Embed Size (px)
Citation preview
Как сделать веб-карту, сохранить здоровье и возненавидеть IE
Что будет
• Зачем мы это начали делать • Где взять данные для карты • Как нарисовать карту, хранить и отдавать
пользователям • Как сделать карту интерактивной• Как прикрутить маркеры, полигоны, балуны• Панорамы улиц, роутинг, 3D и мобильные
карты• Что делать если вдруг проблемы
ДубльГИС Путь самурая
Было в 2005
Стало в 2009
Ясно, вы молодцы!Давай с начала и по порядку
Где взять данные для карты?
OpenStreetMap
Как? Это же классный сервис для велосипедистов
• Напрямую фрагмент с сервиса, в форматах XML/картинка
• Скачать всю планету Planet.osm. Формат xml. Многогигабайт.
• Парсить самим ручками или через Osmosis
Но и провайдер данных
А есть что попроще?
CloudMade— товарищи из OpenStreetMap
• Planet.osm с разбивкой по странам с выделенными фичами
• Shape-файл с полигонами• TomTom POI• И многое другое…
Итак
Ну хорошо. А вы-то как?
А мы вот этими руками по космоснимкам с уточнением на местности
Мы тоже хотим своими руками
• GPS Mapedit• Mapedit++ (бесплатный)• MapInfo• ArcView• Panorama• И много чего ещё
Тогда вам в помощь
Как отрастеризовать карту?
Mapnik— бесплатная и компактная утилита
• Основной разработчик — наш соотечественник
• С++• Есть binding'и к Python
И это ещё не все!
GeoServer
Но за $
И тяжеловаты
Ну а мы пошли своим путем
• Компактное• Быстрое• Кросс-
платформенное• Понимает наш
внутренний формат
Решение получилось:
Вау, ну а если данных очень много?
Мощное железо!
Но!
• Дорого• Могут быть простои
«железки»• А если совмещать с
другими задачами, то тормоза во время растеризации
«Неожиданное» решение — облака
• Дешево• Быстро• Да и вообще —
прикольно ;)
Но они «облака» летают где-то над Европой
Чем наши офисные машины хуже?
Ничем.
Python+
Rpyc+
Py2exe+
Rasterizator =
Сервис растеризации
22 города • 5 офисных машин = 3 часа
А если надо весь мир, тогда что?
Как хранить тайлы?
По полочкам
— уровень масштабирования Z
— координата тайла X
— координата тайла Y
Как отдавать тайлы?
Через Nginx
Тайлы понятно, а обычные данные
где хранить?
Классика жанра, в СУДБ
MySQL +
PostgreSQL+
PostGIS
Так, тайлы на сервере, все по полочкам.
Что с клиентом?
VS
— зато там все есть
Что лучше?
— но свой родной
Мы за OpenLayers
• Открытый код• Хорошая документация• Активная разработка• Да и выбрать толком не из
чего :(
Давай уже интерактив: хотим масштабировать,
таскать и кликать куда попало
Желаете масштабировать?
OpenLayers.Map.zoomTo(уровень)
Желаете таскать?
OpenLayers.Map.panTo(координаты)
Желаете кликать?
OpenLayers.Map.events.register(тип события)
И ещё несметное количество всяких вкусностей, ммм...
Не хочу разбираться с OpenLayers.
Есть что проще?
Есть! Например, горячо любимые
• Ymaps.TileDataSource — тайловый слой
• YMaps.MapType — тип карты
• YMaps.CartesianCoordSystem / YMaps.GeoCoordSystem — система координат
• GtileLayerOverlay — тайловый слой
• GmapType — тип карты
Хочу показать на карте свой дом. Как?
Маркеры
Правда, тут не все так просто
Если объектов ≤ 100,тогда DOM-маркеры.
Обычные div-ки
Если 100 ≥ объектов ≥ 500,тогда SVG-маркеры.
Те, которые рисуются графическим движком
Если объектов ≥ 500,тогда тайловые-маркеры.
Те, которые рисуются на сервере и отдаются в виде
тайлов
Что так сложно-то?
Все бы делали как div, ну или на худой конец как SVG
Некоторым браузерам становится плохо
Сначала умирает
когда уже наконец-то и насовсем
Потом плохеет
он никогда не славился скоростью
Далее по списку
это вообще загадочное существо
Самый стойкий
Ave Google!
Матчасть повторили.
А как на практике?
В OpenLayers естьDOM и векторные (SVG)
маркеры.
В API Яндекс и Google только DOM
и ограничение сверху по количеству
А вы как боролись с≥ 500 маркеров?
Мы придумали их рисовать на сервере и отдавать виде
тайлов
Для этого на сервере сделали демона-
отрисовщика на С++
А на клиенте механизм трассировки тайловых
маркеров
Мы очень гордимся этим решением!
Демон
• 60 RPS• Две работающие сущности, если одной
поплохеет• Логирование, статистика, мониторинг• Может рисовать любые примитивы• Работает на базе нашего родного рендера
Клиент
• Не более 50% от CPU при трассировке• Может работать с любыми примитивами• Как компонента OpenLayers
С этим ясно.Хочу нарисовать маршрут
от дома до работы.
Пожалуйста,графические примитивы:точки, линии, полигоны
В OpenLayers есть возможность рисовать
примитивы. Ура!
У товарищей по парте тоже…
Но, и тут не все так просто.Представим себе линию,
проходящую через весь город.
Умный SVG-рендер при крупных масштабах будет её выводить только в видимой
области карты.
Глупый VML-рендер будет пробовать её просчитывать
по всей длине, а это несколько десятков метров /
сотни тысяч пикселей.
Например, смотрим карту 800 х 600 px, а линия у нас от
подвала и до крыши с голубями.
А какой браузер у нас использует VML?
Правильно!
когда же уже наконец
А балун, он же бабл, он же информационное окно?
Конечно же есть в OpenLayers, API Яндекса и Гугла.
Кстати, в OpenLayers балунов можно создавать сколько
угодно.
Все это прошлый век, сейчас модно панорамы улиц, поиск
проезда, 3D и мобильные карты.
С этим как?
Панорамы улиц
• Специальный плеер: обычно это Adobe Flash, бывает Java Applet или QuickTime
• Терабайты панорамных фоток с геопривязкой
• Автоматизированный комплекс для сбора информации. Обычно это велосипед/машина с установленной камерой и компьютером в багажнике
Поиск проезда
• Граф дорожной сети• Механизм поиска оптимального маршрута
по графу — демон (высокие нагрузки) • А на клиенте у нас есть OpenLayers с
линиями, маркерами и балунами
(Псевдо) 3D
• Добываем для зданий на картах z-компоненту (высоту)
• Не забываем, что здания могут налезать друг на друга — думаем как при этом сделать идентификацию
• Растеризуем здания на тайлах в псевдо 3D виде
• А дальше все также как и для 2D
Мобильные карты
• Толстый клиент, обычно Java2ME• Меньший размер тайлов, т.к. экран
мелкий. Обычно 64 х 64 px.• Все тяжелые операции делаем на
сервере, т.к. ограниченные ресурсы• На чистом мобильном браузере сделать
почти нереально
Проблемы с сервером
• Frontend — Backend• Тяжелые операции в очередь и/или на демонов• База данных: пространственные индексы,
шардинг, кластеризация• Тайлы только Nginx: конфиг без регулярок,
emptygif• Кеш
Проблемы с клиентом
• Framework не панацея — тяжелые методы напильником
• Много маркеров — пусть делает сервер• Выборка из хеша в разы быстрее массива• Паттерн фасад это наше все — без костылей не
обойтись• Выбор оптимального рендера для каждого
браузера• Тайлы по разным доменам
Проблемы с сетью
20К (размер тайла) * 20 тайлов * 5 операций = 2М за сеанс• Оптимизация png• Кеширование на клиенте всего, но разумно• Опережающая загрузка данных: буфер для
тайлов, html/json• Сжатие и объединение клиентской динамики: js,
css, html/json• AJAX, итак понятно ;)
Технологии + команда
• PHP + MySQL + PostgreSQL + (C++) + VBA + Python
• Nginx + Memcache + Sphinx
• Состав: 4 php + 2 (c++) + 2 vba + 2 qa + 1 sysadm + 1 ui + 1 pm
• Работаем по Scrum • Хотите к нам?
Слайд про здоровье
• Каждый день в 11.00 зарядка в виде standup meeting’а
• После каждого спринта русский team building• Дартс для профилактики туннельного синдрома• Нескончаемые плюшки для здорового
пищеварения
• Если болеем, то только за ВК Локомотив
Ссылки на картинкиhttp://joshhighland.com/blog/2009/07/21/internet-explorer-6-must-die/http://mindfulmom.com/2009/06/08/pushme-pullyou/http://janeheller.mlblogs.com/archives/2009/08/http://uniquetraveldestinations.wordpress.com/2009/10/16/color-me-pretty-hotels-are-going-the-http://www.bostonherald.com/blogs/sports/rap_sheet/wp-http://rexmen.ru/index.php?cstart=8&do=membershttp://www.photosight.ru/photos/682635/?from_memberhttp://www.progs.kiev.ua/publics/1843http://www.eroshka.ru/e107_plugins/forum/forum_viewtopic.php?9.lasthttp://protomodel.ucoz.ru/load/1-1-0-2http://etu3332.narod.ru/ready/http://pitachog.ru/print:page,1,675-supergeroi-39-foto.htmlhttp://omskpress.ru/tags/трасса/http://www.v3toys.ru/index.php?manufacturersort=-1&page=1http://www.forum-grad.ru/den-vseh-vlyublennih/25434-golubi-nerazluchniki-simvol-dnya-svyatogo-valentina.htmlhttp://latimesblogs.latimes.com/washington/images/2008/10/22/southpark.jpghttp://www.independentvoice.com/http://volfenstein.splinder.com/http://www.topwork.com.ua/front/article/doc/241http://www.liveinternet.ru/users/1216183/http://www.simpsoncrazy.com/content/pictures/homer/HomerSimpson42.gif
