Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как...
-
Upload
yandex -
Category
Technology
-
view
1.142 -
download
3
description
Transcript of Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как...
![Page 1: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/1.jpg)
Я.Субботник, Минск, 2 июня 2012 года
Разработчик интерфейсов API Яндекс.Карт Сергей Перескоков
API Яндекс.Карт 2.0: что нового и как это работает
![Page 2: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/2.jpg)
Зачем делали
2
![Page 3: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/3.jpg)
— Архитектура API 1.x не позволяла дальше расширять
функционал
— Появляются новые технологии (CSS3, canvas) и устройства (touch)
— В современном мире нужны новые инструменты для отображения данных
3
![Page 4: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/4.jpg)
Для кого делали
4
![Page 5: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/5.jpg)
Пользователь - красиво - информативно - понятно
Бизнес - надежно - довольные
пользователи
Разработчик - просто - удобно - предсказуемо
5
![Page 6: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/6.jpg)
Что мы сделали
6
![Page 7: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/7.jpg)
Отказ от ключей
...&key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==
— Удобнее интегрировать в CMS — Упрощается дистрибуция готовых модулей и плагинов — Меньше головной боли с зеркалами и доменами
7
![Page 8: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/8.jpg)
Поддержка https
— Все так же, как и по http — Доступность всех сервисов API:
геокодирование, маршрутизация, пробки…
https://api-maps.yandex.ru/2.0/...
8
![Page 9: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/9.jpg)
2 Кб 52 Кб 107 Кб 8 Кб …
Загрузчик Монолитное ядро JS API Данные css Спрайты
12 Кб 60 Кб
Загрузчик Микроядро JS API: код + css + спрайты
API 1.x
Быстрый загрузчик
API 2.0
9
![Page 10: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/10.jpg)
Быстрый загрузчик index.xml?load=package.full…— Решает, какие модули грузить — Делает запрос к combine.xml — Весит всего 12кб
combine.xml?modules=drdFgu…
— Содержит код запрошенных модулей — Кешируется — Весит от 60кб
10
![Page 11: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/11.jpg)
Модульная архитектура
11
![Page 12: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/12.jpg)
package.full
package.route
route
package.search
geocode
util.script util.Promise
util.jsonp
Пакеты
Модули
Модульная архитектура
12
![Page 13: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/13.jpg)
Поддержка touch-устройств
13
![Page 14: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/14.jpg)
Эмулируем события мыши
touchstart mouseenter, mousemove, mousedown
touchend mouseup
touchmove mousemove
14
![Page 15: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/15.jpg)
Эмулируем события мыши
touchstart > 400 мс contextmenu
иначе click
touchend < 250мс dblclick
15
![Page 16: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/16.jpg)
События множественного касания транслируем так:
Multitouch
— multitouchstart — multitouchmove — multitouchend
16
![Page 17: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/17.jpg)
Где работает touch/multitouch — Там, где можно перехватывать браузерные touch-события
dolfin mobile safari mobile
— Скоро будет релиз с поддержкой touch в других браузерах
17
![Page 18: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/18.jpg)
Тайловый движок API 1.X
{ top: 10px; left: 10px; width: 256px; height: 256px; }
{ top: 138px; left: 138px; width: 128px; height: 128px; }
Пошаговая анимация
18
![Page 19: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/19.jpg)
Тайловый движок API 2.0
{ transform: translate3d(10px, 10px) scale(1, 1); transition-property: transform; }
{ transform: translate3d(138px, 138px) scale(0.5, 0.5); }
CSS TransiKon
19
![Page 20: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/20.jpg)
Тайловый движок API 2.0
Браузер/платформа Движок позиционирования
Движок анимации
Safari, iOS, Bada transform3d transform3d + transiKon
Firefox top/leZ transform3d + transiKon
Opera, Android transform2d transform2d + transiKon
IE9, Chrome transform2d Пошаговый
IE6-‐8 top/leZ Пошаговый
20
![Page 21: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/21.jpg)
Кластеризатор
Зачем? У меня и так все хорошо.
21
![Page 22: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/22.jpg)
Кластеризатор
Хм… Все равно не понимаю.
22
![Page 23: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/23.jpg)
Кластеризатор
OMG!!1 Давайте его сюда быстро!11
23
![Page 24: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/24.jpg)
Кластеризатор
И нет проблем!
24
![Page 25: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/25.jpg)
25
Грид-кластеризация
![Page 26: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/26.jpg)
Работает из коробки
var objects = [new Placemark([53,27]),new Placemark([54,26]),new Placemark([53,26])
];var clusterer = new ymaps.Clusterer();clusterer.add(objects);map.geoObjects.add(clusterer);
26
![Page 27: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/27.jpg)
Графика — Canvas, SVG, VML — Polyline, Polygon, Circle, Rectangle, Image — Цвет, ширина контура, стиль контура, множественная
прозрачность — Симплификация данных — Оптимизация под viewport
27
![Page 28: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/28.jpg)
28
![Page 29: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/29.jpg)
Метки на canvas
new Placemark([53,26], {}, { overlayFactory:
ymaps.geoObject.overlayFactory.interactiveGraphics});
А без хотспотов еще быстрее:
new Placemark([53,26], {}, { overlayFactory:
ymaps.geoObject.overlayFactory.staticGraphics});
29
![Page 30: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/30.jpg)
Новый дизайн
30
![Page 31: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/31.jpg)
На сайте: api.yandex.ru/maps В клубике: clubs.ya.ru/mapsapi
Полезная информация
31
![Page 32: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/32.jpg)
— 4,5 миллиона пользователей карт на сервисах Яндекса — 7 миллионов пользователей АПИ на сторонних сайтах — более 135 000 сайтов используют АПИ
А еще…
32
![Page 33: Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"](https://reader034.fdocuments.net/reader034/viewer/2022042503/5486e5c6b47959e70c8b536f/html5/thumbnails/33.jpg)
Вопросы?
33