Есть ряд базовых вещей, которые обычно показывают на карте: метки, линии маршрутов и т.п. Однако с помощью API Яндекс.Карт можно сделать намного больше — он позволяет реализовать довольно смелые идеи. Из доклада вы узнаете о фишках, о которых, возможно, даже не догадывались. Рассказ о том, как анимировать движение карты или объектов и применять спрайт-анимацию. Также показано, как одновременно открыть несколько балунов и что делать с балуном, выходящим за границу карты. Вы узнаете о геодезическом представлении геообъектов, заливке кругов и многоугольников фоновой картинкой или паттерном. А в финале рассказано о новых функциях кластеризатора.

1. Секретные фишки
в API Яндекс.Карт
Александр Зинчук
Разработчик интерфейсов
APIшник, Киев, 27 апреля 2013

2. Анимация

3. Анимация / Полетаем...
3

4. Анимация / Полетаем...
4
var destinations = [
[55.753559, 37.609218],
[59.93853, 30.313497],
[56.829748, 60.617435],
[46.466444, 30.7058],
[55.753559, 37.609218]
];
myMap.panTo(destinations, {
flying: true,
duration: 4000,
timingFunction: 'ease-in-out'
});

5. Анимация / И снова полетаем!
5

6. Анимация / И снова полетаем!
6
myGeoObject.options.set({
iconImageHref: '/path/to/dragon.png',
iconImageClipRect: [[0, 280], [75, 350]],
iconImageSize: [40, 40]
});
+
+

7. Графика

8. Графика / Геодезическое отображение
8
WGS 84 - наиболее
распространенная
геодезическая система
Земля - эллипсоид
вращения
экваториальный радиус:
6378.137 км
полярный радиус:
6356.752 км

9. Графика / Геодезическое отображение
9

10. Графика / Геодезическое отображение
10
Геодезическая

11. Решение прямой геодезической задачи
Графика / Геодезическое отображение
11
Решение обратной геодезической задачи

12. Графика / Геодезическое отображение
12
myGeoObject.options.set(‘geodesic’, true);

13. Графика / Геодезическое отображение
13
myMap.options
.set(‘geoObjectGeodesic’, true);
...
или

14. Графика / Геодезическое отображение
14

15. Графика / Фоновая заливка фигур
15
Заливка
паттерном

16. myPolygon.options
.set({
fillImageHref: ‘pattern.jpg’,
fillMethod: ‘tile’
});
Графика / Фоновая заливка фигур
16
fillMethod: ‘tile’
+

17. Графика / Фоновая заливка фигур
17
Заливка
фоном

18. myPolygon.options
.set({
fillImageHref: ‘Kiev.jpg’,
fillMethod: ‘stretch’
});
Графика / Фоновая заливка фигур
18
+
fillMethod: ‘stretch’

19. Инфо-объекты

20. Инфо-объекты / И целого мира мало...
20

21. Инфо-объекты / И целого мира мало...
21
myBalloon.options.set({
pane: 'movableOuters',
shadowPane: 'movableOuters'
});
http://bit.ly/APIballoon

22. Кластеризатор

23. 23
Кластеризатор / На любой вкус...
«Аккордеон»«Карусель»

24. 24
Кластеризатор / На любой вкус...
«Карусель»

25. 25
Кластеризатор / На любой вкус...
«Аккордеон»«Карусель»
clusterer.options.set(
‘clusterBalloonContentBodyLayout’,
‘cluster#balloonCarouselContent’
);
clusterer.options.set(
‘clusterBalloonContentBodyLayout’,
‘cluster#balloonAccordionContent’
);

26. Разработчик интерфейсов
Телефон: +7 (915) 094-2395
zinchuk@yandex-team.ru
Twitter: @ajaxy_ru
Спасибо!
Александр Зинчук