Как сделать веб-карту, сохранить здоровье и...
TRANSCRIPT
![Page 1: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/1.jpg)
Как сделать веб-карту, сохранить здоровье и возненавидеть IE
![Page 2: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/2.jpg)
Что будет
• Зачем мы это начали делать • Где взять данные для карты • Как нарисовать карту, хранить и отдавать
пользователям • Как сделать карту интерактивной• Как прикрутить маркеры, полигоны, балуны• Панорамы улиц, роутинг, 3D и мобильные
карты• Что делать если вдруг проблемы
![Page 3: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/3.jpg)
ДубльГИС Путь самурая
![Page 4: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/4.jpg)
Было в 2005
![Page 5: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/5.jpg)
Стало в 2009
![Page 6: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/6.jpg)
Ясно, вы молодцы!Давай с начала и по порядку
![Page 7: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/7.jpg)
Где взять данные для карты?
![Page 8: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/8.jpg)
OpenStreetMap
![Page 9: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/9.jpg)
Как? Это же классный сервис для велосипедистов
![Page 10: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/10.jpg)
• Напрямую фрагмент с сервиса, в форматах XML/картинка
• Скачать всю планету Planet.osm. Формат xml. Многогигабайт.
• Парсить самим ручками или через Osmosis
Но и провайдер данных
![Page 11: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/11.jpg)
А есть что попроще?
![Page 12: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/12.jpg)
CloudMade— товарищи из OpenStreetMap
![Page 13: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/13.jpg)
• Planet.osm с разбивкой по странам с выделенными фичами
• Shape-файл с полигонами• TomTom POI• И многое другое…
Итак
![Page 14: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/14.jpg)
Ну хорошо. А вы-то как?
![Page 15: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/15.jpg)
А мы вот этими руками по космоснимкам с уточнением на местности
![Page 16: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/16.jpg)
Мы тоже хотим своими руками
![Page 17: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/17.jpg)
• GPS Mapedit• Mapedit++ (бесплатный)• MapInfo• ArcView• Panorama• И много чего ещё
Тогда вам в помощь
![Page 18: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/18.jpg)
Как отрастеризовать карту?
![Page 19: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/19.jpg)
Mapnik— бесплатная и компактная утилита
![Page 20: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/20.jpg)
• Основной разработчик — наш соотечественник
• С++• Есть binding'и к Python
![Page 21: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/21.jpg)
И это ещё не все!
![Page 22: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/22.jpg)
GeoServer
Но за $
![Page 23: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/23.jpg)
И тяжеловаты
![Page 24: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/24.jpg)
Ну а мы пошли своим путем
![Page 25: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/25.jpg)
• Компактное• Быстрое• Кросс-
платформенное• Понимает наш
внутренний формат
Решение получилось:
![Page 26: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/26.jpg)
Вау, ну а если данных очень много?
![Page 27: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/27.jpg)
Мощное железо!
![Page 28: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/28.jpg)
Но!
![Page 29: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/29.jpg)
• Дорого• Могут быть простои
«железки»• А если совмещать с
другими задачами, то тормоза во время растеризации
![Page 30: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/30.jpg)
«Неожиданное» решение — облака
• Дешево• Быстро• Да и вообще —
прикольно ;)
![Page 31: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/31.jpg)
Но они «облака» летают где-то над Европой
![Page 32: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/32.jpg)
Чем наши офисные машины хуже?
Ничем.
![Page 33: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/33.jpg)
Python+
Rpyc+
Py2exe+
Rasterizator =
Сервис растеризации
![Page 34: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/34.jpg)
22 города • 5 офисных машин = 3 часа
![Page 35: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/35.jpg)
А если надо весь мир, тогда что?
![Page 36: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/36.jpg)
![Page 37: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/37.jpg)
Как хранить тайлы?
![Page 38: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/38.jpg)
По полочкам
— уровень масштабирования Z
— координата тайла X
— координата тайла Y
![Page 39: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/39.jpg)
Как отдавать тайлы?
![Page 40: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/40.jpg)
Через Nginx
![Page 41: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/41.jpg)
Тайлы понятно, а обычные данные
где хранить?
![Page 42: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/42.jpg)
Классика жанра, в СУДБ
![Page 43: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/43.jpg)
MySQL +
PostgreSQL+
PostGIS
![Page 44: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/44.jpg)
Так, тайлы на сервере, все по полочкам.
Что с клиентом?
![Page 45: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/45.jpg)
VS
— зато там все есть
Что лучше?
— но свой родной
![Page 46: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/46.jpg)
Мы за OpenLayers
• Открытый код• Хорошая документация• Активная разработка• Да и выбрать толком не из
чего :(
![Page 47: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/47.jpg)
Давай уже интерактив: хотим масштабировать,
таскать и кликать куда попало
![Page 48: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/48.jpg)
Желаете масштабировать?
OpenLayers.Map.zoomTo(уровень)
![Page 49: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/49.jpg)
Желаете таскать?
OpenLayers.Map.panTo(координаты)
![Page 50: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/50.jpg)
Желаете кликать?
OpenLayers.Map.events.register(тип события)
![Page 51: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/51.jpg)
И ещё несметное количество всяких вкусностей, ммм...
![Page 52: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/52.jpg)
Не хочу разбираться с OpenLayers.
Есть что проще?
![Page 53: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/53.jpg)
Есть! Например, горячо любимые
![Page 54: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/54.jpg)
• Ymaps.TileDataSource — тайловый слой
• YMaps.MapType — тип карты
• YMaps.CartesianCoordSystem / YMaps.GeoCoordSystem — система координат
![Page 55: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/55.jpg)
• GtileLayerOverlay — тайловый слой
• GmapType — тип карты
![Page 56: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/56.jpg)
Хочу показать на карте свой дом. Как?
![Page 57: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/57.jpg)
Маркеры
![Page 58: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/58.jpg)
Правда, тут не все так просто
![Page 59: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/59.jpg)
Если объектов ≤ 100,тогда DOM-маркеры.
Обычные div-ки
![Page 60: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/60.jpg)
Если 100 ≥ объектов ≥ 500,тогда SVG-маркеры.
Те, которые рисуются графическим движком
![Page 61: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/61.jpg)
Если объектов ≥ 500,тогда тайловые-маркеры.
Те, которые рисуются на сервере и отдаются в виде
тайлов
![Page 62: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/62.jpg)
Что так сложно-то?
Все бы делали как div, ну или на худой конец как SVG
![Page 63: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/63.jpg)
Некоторым браузерам становится плохо
![Page 64: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/64.jpg)
Сначала умирает
когда уже наконец-то и насовсем
![Page 65: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/65.jpg)
Потом плохеет
он никогда не славился скоростью
![Page 66: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/66.jpg)
Далее по списку
это вообще загадочное существо
![Page 67: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/67.jpg)
Самый стойкий
Ave Google!
![Page 68: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/68.jpg)
Матчасть повторили.
А как на практике?
![Page 69: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/69.jpg)
В OpenLayers естьDOM и векторные (SVG)
маркеры.
В API Яндекс и Google только DOM
и ограничение сверху по количеству
![Page 70: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/70.jpg)
А вы как боролись с≥ 500 маркеров?
![Page 71: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/71.jpg)
Мы придумали их рисовать на сервере и отдавать виде
тайлов
![Page 72: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/72.jpg)
Для этого на сервере сделали демона-
отрисовщика на С++
![Page 73: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/73.jpg)
А на клиенте механизм трассировки тайловых
маркеров
![Page 74: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/74.jpg)
Мы очень гордимся этим решением!
![Page 75: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/75.jpg)
Демон
• 60 RPS• Две работающие сущности, если одной
поплохеет• Логирование, статистика, мониторинг• Может рисовать любые примитивы• Работает на базе нашего родного рендера
![Page 76: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/76.jpg)
Клиент
• Не более 50% от CPU при трассировке• Может работать с любыми примитивами• Как компонента OpenLayers
![Page 77: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/77.jpg)
С этим ясно.Хочу нарисовать маршрут
от дома до работы.
![Page 78: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/78.jpg)
Пожалуйста,графические примитивы:точки, линии, полигоны
![Page 79: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/79.jpg)
В OpenLayers есть возможность рисовать
примитивы. Ура!
У товарищей по парте тоже…
![Page 80: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/80.jpg)
Но, и тут не все так просто.Представим себе линию,
проходящую через весь город.
![Page 81: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/81.jpg)
Умный SVG-рендер при крупных масштабах будет её выводить только в видимой
области карты.
![Page 82: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/82.jpg)
Глупый VML-рендер будет пробовать её просчитывать
по всей длине, а это несколько десятков метров /
сотни тысяч пикселей.
![Page 83: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/83.jpg)
Например, смотрим карту 800 х 600 px, а линия у нас от
подвала и до крыши с голубями.
![Page 84: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/84.jpg)
А какой браузер у нас использует VML?
![Page 85: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/85.jpg)
Правильно!
когда же уже наконец
![Page 86: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/86.jpg)
А балун, он же бабл, он же информационное окно?
![Page 87: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/87.jpg)
Конечно же есть в OpenLayers, API Яндекса и Гугла.
Кстати, в OpenLayers балунов можно создавать сколько
угодно.
![Page 88: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/88.jpg)
Все это прошлый век, сейчас модно панорамы улиц, поиск
проезда, 3D и мобильные карты.
С этим как?
![Page 89: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/89.jpg)
Панорамы улиц
• Специальный плеер: обычно это Adobe Flash, бывает Java Applet или QuickTime
• Терабайты панорамных фоток с геопривязкой
• Автоматизированный комплекс для сбора информации. Обычно это велосипед/машина с установленной камерой и компьютером в багажнике
![Page 90: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/90.jpg)
Поиск проезда
• Граф дорожной сети• Механизм поиска оптимального маршрута
по графу — демон (высокие нагрузки) • А на клиенте у нас есть OpenLayers с
линиями, маркерами и балунами
![Page 91: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/91.jpg)
(Псевдо) 3D
• Добываем для зданий на картах z-компоненту (высоту)
• Не забываем, что здания могут налезать друг на друга — думаем как при этом сделать идентификацию
• Растеризуем здания на тайлах в псевдо 3D виде
• А дальше все также как и для 2D
![Page 92: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/92.jpg)
Мобильные карты
• Толстый клиент, обычно Java2ME• Меньший размер тайлов, т.к. экран
мелкий. Обычно 64 х 64 px.• Все тяжелые операции делаем на
сервере, т.к. ограниченные ресурсы• На чистом мобильном браузере сделать
почти нереально
![Page 93: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/93.jpg)
Проблемы с сервером
• Frontend — Backend• Тяжелые операции в очередь и/или на демонов• База данных: пространственные индексы,
шардинг, кластеризация• Тайлы только Nginx: конфиг без регулярок,
emptygif• Кеш
![Page 94: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/94.jpg)
Проблемы с клиентом
• Framework не панацея — тяжелые методы напильником
• Много маркеров — пусть делает сервер• Выборка из хеша в разы быстрее массива• Паттерн фасад это наше все — без костылей не
обойтись• Выбор оптимального рендера для каждого
браузера• Тайлы по разным доменам
![Page 95: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/95.jpg)
Проблемы с сетью
20К (размер тайла) * 20 тайлов * 5 операций = 2М за сеанс• Оптимизация png• Кеширование на клиенте всего, но разумно• Опережающая загрузка данных: буфер для
тайлов, html/json• Сжатие и объединение клиентской динамики: js,
css, html/json• AJAX, итак понятно ;)
![Page 96: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/96.jpg)
Технологии + команда
• PHP + MySQL + PostgreSQL + (C++) + VBA + Python
• Nginx + Memcache + Sphinx
• Состав: 4 php + 2 (c++) + 2 vba + 2 qa + 1 sysadm + 1 ui + 1 pm
• Работаем по Scrum • Хотите к нам?
![Page 97: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/97.jpg)
Слайд про здоровье
• Каждый день в 11.00 зарядка в виде standup meeting’а
• После каждого спринта русский team building• Дартс для профилактики туннельного синдрома• Нескончаемые плюшки для здорового
пищеварения
• Если болеем, то только за ВК Локомотив
![Page 98: Как сделать веб-карту, сохранить здоровье и возненавидеть IE](https://reader031.vdocuments.site/reader031/viewer/2022013114/555e16c5d8b42a99188b5528/html5/thumbnails/98.jpg)
Ссылки на картинки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