Алексей Емелин Инженер по автоматизации тестирования

Как разместить на карте тысячи интерактивных объектов

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

Спасибо!