Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"
•
1 like•1,423 views
Почти каждый разработчик геоинформационного сервиса сталкивался с необходимостью отобразить на карте очень большое число объектов, с каждым из которых нужно взаимодействовать. Как сделать так, чтобы пользователю было комфортно работать, а браузер не задохнулся от нагрузки? Кто-то ограничивает число объектов областью видимости карты, кто-то использует кластеризацию и отображает некие множества этих объектов. Рассказ об альтернативном решении – технологии активных областей. С её помощью можно показать пользователю все доступные объекты на вашей карте, не ограничиваясь областью видимости и не разделяя объекты на множества. К тому же это решение почти не нагружает браузер и прекрасно работает даже в Internet Explorer.
Recommended
Recommended
More Related Content
Similar to Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"
Similar to Алексей Емелин "Как разместить на карте тысячи интерактивных объектов" (20)
More from Yandex
More from Yandex (20)
Recently uploaded
Recently uploaded (9)
Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"
- 1. Алексей Емелин Инженер по автоматизации тестирования Как разместить на карте тысячи интерактивных объектов APIшник, Киев, 27 апреля 2013 года
- 2. 2 Карта
- 3. 3 Карта с географическим объектом
- 4. 4 Карта с географическими объектами
- 5. 5 Карта с географическими объектами
- 6. 6 Карта с географическими объектами
- 7. 7 Карта с географическими объектами
- 8. 8 Кластеры
- 9. 9 Кластеры
- 11. 11 Много файлов
- 13. 13 Технология активных областей • Картиночный слой • Описания активных областей • Источник данных • Слой активных областей
- 20. 20 Картиночный слой. How-to Хотите зависеть от стороннего сервиса? gmapuploader.com bit.ly/APIDler ДА НЕТ
- 21. 21 Картиночный слой • Создается с помощью класса Layer • Для всех уровней масштабирования • Прозрачный фон • Только нужные тайлы
- 23. 23 Пример описания JSON объекта активной области: "data": {! "type": "FeatureCollection",! "features": [{! "type": "Feature",! "properties": {! "hintContent": "содержимое хинта",! "balloonContent": "содержимое балуна",! "HotspotMetaData": {! "id": 10469893,! "RenderedGeometry": {! "type": "Polygon",! "coordinates”:![[[-28, 115], [86, 115], ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! [200, 19], [-28, 115]]]! }! } ! ! ! ! !}! }]! }! Описания активных областей
- 25. 25 Описания активных областей тайл [0, 0] тайл [0, 1] (160, 140) (160, 396) (376, 140) (376, 396) (120, 140) (120, 396) (-96, 140) (-96, 396)
- 26. 26 Описания активных областей тайл [0, 0] тайл [0, 1] тайл [1, 0] тайл [1, 1]
- 27. 27 Описания активных областей Пример Тип геометрии Описание Rectangle Прямоугольник Polygon Многоугольник ConvexPolygon Выпуклый многоугольник MulDpolygon Сложная фигура. Состоит из нескольких многоугольников MulDConvexPolygon Сложная фигура. Состоит из нескольких выпуклых многоугольников
- 28. 28 Описания активных областей • JSON • Для всех уровней масштабирования • Уникальные идентификаторы в пределах слоя • Пиксельные координаты • Строгий тип геометрии • Могут содержать данные
- 30. 30 Источник данных описания активных областей источник данных слой активных областей
- 31. 31 Источник данных описания активных областей источник данных слой активных областей
- 32. 32 Источник данных. JSONP 1. API формирует callback функцию 2. API в запросе к серверу передает имя callback функции 3. Сервер оборачивает данные в callback функцию, взяв ее имя из запроса 4. API выполняет callback функцию с полученными от сервера данными
- 33. 33 Источник данных. JSONP 1. API формирует callback функцию 2. API в запросе к серверу передает имя callback функции 3. Сервер оборачивает данные в callback функцию, взяв ее имя из запроса 4. API выполняет callback функцию с полученными от сервера данными
- 34. 34 Источник данных. JSONP. Шаблоны 1. API формирует callback функцию по шаблону (callback_%x_%y_%z) 2. API запрашивает данные от сервера, уже обернутые в функцию заданную по шаблону 3. API выполняет callback функцию с полученными от сервера данными
- 35. 35 Источник данных. Бонусы • Переопределение метода restrict(layer, tileNumber, zoom) для уменьшения числа запросов к серверу (http://bit.ly/APIhotspot) • Кэширование ответа сервера
- 36. 36 Источник данных • JSONP • Создается с помощью класса ObjectSource • Шаблон пути к данным • Необязательный jsonp-callback • Кэширование
- 39. 39 Технология активных областей • Картиночный слой • Описания активных областей • Источник данных • Слой активных областей
- 43. 43 var map = new ymaps.Map('map', {! center: [55.709243, 37.500737],! zoom: 9! }),! imgUrl = 'http://server.domain/images/tiles/%z/%x/%y', ! hotspotUrl = 'http://server.domain/hotspots/%z/tile_%x_%y', ! callback = 'myCallback_%c', ! objSource = new ymaps.hotspot.ObjectSource(hotspotUrl, callback),! hotspotLayer = new ymaps.hotspot.Layer(objSource),! imgLayer = new ymaps.Layer(imgUrlm {tileTransparent: true});! ! map.layers.add(hotspotLayer);! map.layers.add(imgLayer);! ! Технология активных областей
- 44. 44 Технология активных областей. Фотографии
- 45. 45 Технология активных областей. Пробки
- 46. 46 Технология активных областей. Поиск
- 47. 47 Бонус!
- 48. 48 Технология активных областей менеджер хотспотов событие на карте список контейнеров контейнер шейпов слоев шейп шейп шейп описания активных областей источник данных слой
- 49. 49 Технология активных областей менеджер хотспотов событие на карте список контейнеров контейнер шейпов слоев контейнер шейпов оверлеев шейп шейп шейп описания активных областей источник данных слой шейп шейп шейп
- 53. 53 * не работает в браузерах, не поддерживающих canvas map.options.set({! !geoObjectOverlayFactory:'default#interactiveGraphics’! });! Строка изменившая мир *
- 57. Емелин Алексей Инженер по автоматизации тестирования +7 (911) 785-42-46 dolf@yandex-team.ru twitter:aemelin Спасибо!