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