Embed Size (px)
DESCRIPTION
Есть ряд базовых вещей, которые обычно показывают на карте: метки, линии маршрутов и т.п. Однако с помощью API Яндекс.Карт можно сделать намного больше — он позволяет реализовать довольно смелые идеи. Из доклада вы узнаете о фишках, о которых, возможно, даже не догадывались. Рассказ о том, как анимировать движение карты или объектов и применять спрайт-анимацию. Также показано, как одновременно открыть несколько балунов и что делать с балуном, выходящим за границу карты. Вы узнаете о геодезическом представлении геообъектов, заливке кругов и многоугольников фоновой картинкой или паттерном. А в финале рассказано о новых функциях кластеризатора.
Citation preview
Секретные фишкив API Яндекс.Карт
Александр ЗинчукРазработчик интерфейсов
APIшник, Киев, 27 апреля 2013
Анимация
Анимация / Полетаем...
3
Анимация / Полетаем...
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
Анимация / И снова полетаем!
6
myGeoObject.options.set({
iconImageHref: '/path/to/dragon.png',
iconImageClipRect: [[0, 280], [75, 350]],
iconImageSize: [40, 40]
});
+
+
Графика
Графика / Геодезическое отображение
8
WGS 84 - наиболее распространенная
геодезическая система
Земля - эллипсоид вращения
экваториальный радиус:
6378.137 км полярный радиус:
6356.752 км
Графика / Геодезическое отображение
9
Графика / Геодезическое отображение
10
Геодезическая
Решение прямой геодезической задачи
Графика / Геодезическое отображение
11
Решение обратной геодезической задачи
Графика / Геодезическое отображение
12
myGeoObject.options.set(‘geodesic’, true);
Графика / Геодезическое отображение
13
myMap.options.set(‘geoObjectGeodesic’, true);
... или
Графика / Геодезическое отображение
14
Графика / Фоновая заливка фигур
15
Заливка паттерном
myPolygon.options.set({
fillImageHref: ‘pattern.jpg’,fillMethod: ‘tile’
});
Графика / Фоновая заливка фигур
16
fillMethod: ‘tile’
+
Графика / Фоновая заливка фигур
17
Заливка фоном
myPolygon.options.set({
fillImageHref: ‘Kiev.jpg’,fillMethod: ‘stretch’
});
Графика / Фоновая заливка фигур
18
+
fillMethod: ‘stretch’
Инфо-объекты
Инфо-объекты / И целого мира мало...
20
Инфо-объекты / И целого мира мало...
21
myBalloon.options.set({pane: 'movableOuters',shadowPane: 'movableOuters'
});
http://bit.ly/APIballoon
Кластеризатор
23
Кластеризатор / На любой вкус...
«Аккордеон»«Карусель»
24
Кластеризатор / На любой вкус...
«Карусель»
25
Кластеризатор / На любой вкус...«Аккордеон»«Карусель»
clusterer.options.set(‘clusterBalloonContentBodyLayout’, ‘cluster#balloonCarouselContent’
);
clusterer.options.set(‘clusterBalloonContentBodyLayout’, ‘cluster#balloonAccordionContent’
);
Разработчик интерфейсов
Телефон: +7 (915) 094-2395
[email protected]: @ajaxy_ru
Спасибо!
Александр Зинчук
