Алексей Емелин "Как разместить на карте тысячи...
DESCRIPTION
Почти каждый разработчик геоинформационного сервиса сталкивался с необходимостью отобразить на карте очень большое число объектов, с каждым из которых нужно взаимодействовать. Как сделать так, чтобы пользователю было комфортно работать, а браузер не задохнулся от нагрузки? Кто-то ограничивает число объектов областью видимости карты, кто-то использует кластеризацию и отображает некие множества этих объектов. Рассказ об альтернативном решении – технологии активных областей. С её помощью можно показать пользователю все доступные объекты на вашей карте, не ограничиваясь областью видимости и не разделяя объекты на множества. К тому же это решение почти не нагружает браузер и прекрасно работает даже в Internet Explorer.TRANSCRIPT
![Page 1: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/1.jpg)
Алексей Емелин Инженер по автоматизации тестирования
Как разместить на карте тысячи интерактивных объектов
APIшник, Киев, 27 апреля 2013 года
![Page 2: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/2.jpg)
2
Карта
![Page 3: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/3.jpg)
3
Карта с географическим объектом
![Page 4: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/4.jpg)
4
Карта с географическими объектами
![Page 5: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/5.jpg)
5
Карта с географическими объектами
![Page 6: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/6.jpg)
6
Карта с географическими объектами
![Page 7: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/7.jpg)
7
Карта с географическими объектами
![Page 8: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/8.jpg)
8
Кластеры
![Page 9: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/9.jpg)
9
Кластеры
![Page 10: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/10.jpg)
10
Не точечные объекты
![Page 11: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/11.jpg)
11
Много файлов
![Page 12: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/12.jpg)
12
Технология активных областей
![Page 13: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/13.jpg)
13
Технология активных областей
• Картиночный слой • Описания активных областей • Источник данных • Слой активных областей
![Page 14: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/14.jpg)
14
Технология активных областей
![Page 15: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/15.jpg)
15
Технология активных областей
![Page 16: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/16.jpg)
16
Технология активных областей
![Page 17: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/17.jpg)
17
Картиночный слой
![Page 18: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/18.jpg)
18
Картиночный слой
![Page 19: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/19.jpg)
19
Картиночный слой
![Page 20: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/20.jpg)
20
Картиночный слой. How-to
Хотите зависеть от стороннего
сервиса?
gmapuploader.com bit.ly/APIDler
ДА НЕТ
![Page 21: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/21.jpg)
21
Картиночный слой
• Создается с помощью класса Layer • Для всех уровней масштабирования • Прозрачный фон • Только нужные тайлы
![Page 22: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/22.jpg)
22
Описания активных областей
![Page 23: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/23.jpg)
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]]]!
}! } !! ! ! !}!
}]! }!
Описания активных областей
![Page 24: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/24.jpg)
24
Описания активных областей
![Page 25: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/25.jpg)
25
Описания активных областей
тайл [0, 0] тайл [0, 1]
(160, 140)
(160, 396)
(376, 140)
(376, 396)
(120, 140)
(120, 396)
(-96, 140)
(-96, 396)
![Page 26: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/26.jpg)
26
Описания активных областей тайл [0, 0] тайл [0, 1]
тайл [1, 0] тайл [1, 1]
![Page 27: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/27.jpg)
27
Описания активных областей
Пример Тип геометрии Описание
Rectangle
Прямоугольник
Polygon
Многоугольник
ConvexPolygon
Выпуклый многоугольник
MulDpolygon
Сложная фигура. Состоит из нескольких многоугольников
MulDConvexPolygon
Сложная фигура. Состоит из нескольких выпуклых многоугольников
![Page 28: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/28.jpg)
28
Описания активных областей
• JSON • Для всех уровней масштабирования • Уникальные идентификаторы в пределах слоя
• Пиксельные координаты • Строгий тип геометрии • Могут содержать данные
![Page 29: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/29.jpg)
29
Источник данных
![Page 30: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/30.jpg)
30
Источник данных
описания активных областей
источник данных
слой активных областей
![Page 31: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/31.jpg)
31
Источник данных
описания активных областей
источник данных
слой активных областей
![Page 32: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/32.jpg)
32
Источник данных. JSONP
1. API формирует callback функцию 2. API в запросе к серверу передает имя
callback функции 3. Сервер оборачивает данные в callback функцию, взяв ее имя из запроса
4. API выполняет callback функцию с полученными от сервера данными
![Page 33: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/33.jpg)
33
Источник данных. JSONP
1. API формирует callback функцию 2. API в запросе к серверу передает имя
callback функции 3. Сервер оборачивает данные в callback функцию, взяв ее имя из запроса
4. API выполняет callback функцию с полученными от сервера данными
![Page 34: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/34.jpg)
34
Источник данных. JSONP. Шаблоны
1. API формирует callback функцию по шаблону (callback_%x_%y_%z)
2. API запрашивает данные от сервера, уже обернутые в функцию заданную по шаблону
3. API выполняет callback функцию с полученными от сервера данными
![Page 35: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/35.jpg)
35
Источник данных. Бонусы
• Переопределение метода restrict(layer, tileNumber, zoom) для уменьшения числа запросов к серверу (http://bit.ly/APIhotspot)
• Кэширование ответа сервера
![Page 36: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/36.jpg)
36
Источник данных
• JSONP • Создается с помощью класса ObjectSource • Шаблон пути к данным • Необязательный jsonp-callback • Кэширование
![Page 37: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/37.jpg)
37
Слой активных областей
![Page 38: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/38.jpg)
38
Слой активных областей
![Page 39: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/39.jpg)
39
Технология активных областей
• Картиночный слой • Описания активных областей • Источник данных • Слой активных областей
![Page 40: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/40.jpg)
40
Технология активных областей
![Page 41: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/41.jpg)
41
Технология активных областей
![Page 42: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/42.jpg)
42
Технология активный областей
![Page 43: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/43.jpg)
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);!!
Технология активных областей
![Page 44: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/44.jpg)
44
Технология активных областей. Фотографии
![Page 45: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/45.jpg)
45
Технология активных областей. Пробки
![Page 46: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/46.jpg)
46
Технология активных областей. Поиск
![Page 47: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/47.jpg)
47
Бонус!
![Page 48: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/48.jpg)
48
Технология активных областей
менеджер хотспотов
событие на карте
список контейнеров
контейнер шейпов слоев
шейп
шейп
шейп
описания активных областей
источник данных слой
![Page 49: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/49.jpg)
49
Технология активных областей
менеджер хотспотов
событие на карте
список контейнеров
контейнер шейпов слоев
контейнер шейпов оверлеев
шейп
шейп
шейп
описания активных областей
источник данных слой
шейп
шейп
шейп
![Page 50: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/50.jpg)
50
Технология активных областей
![Page 51: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/51.jpg)
51
Сотни географических объектов
![Page 52: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/52.jpg)
52
Тысячи DOM-элементов
3646 DOM-элементов!
document.getElementsByTagName("*").length
![Page 53: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/53.jpg)
53
* не работает в браузерах, не поддерживающих canvas
map.options.set({!!geoObjectOverlayFactory:'default#interactiveGraphics’!
});!
Строка изменившая мир *
![Page 54: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/54.jpg)
54
Сотни географических объектов
![Page 55: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/55.jpg)
55
Сотни DOM-элементов
60 DOM-элементов!
![Page 56: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/56.jpg)
56
Полезные ссылки API
api.yandex.ru/maps
ymapsapi.ya.ru
facebook.com/ymapsapi
![Page 57: Алексей Емелин "Как разместить на карте тысячи интерактивных объектов"](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f0c87d8b42a01678b4705/html5/thumbnails/57.jpg)
Емелин Алексей
Инженер по автоматизации тестирования
+7 (911) 785-42-46
[email protected] twitter:aemelin
Спасибо!