Александр Зинчук "Секретные (и не очень) фишки в API...

Preview:

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

zinchuk@yandex-team.ruTwitter: @ajaxy_ru

Спасибо!

Александр Зинчук

Recommended