Графика на карте в API 2.0

Антон Корзунов,разработчик интерфейсов API Яндекс.Карт

APIшник Яндекс.Карт, Москва, 26 апреля 2012

Когда мы в первый раз слышим про графику

1

Потом мы осознаем, что так не получится

2

И даже так

3

Начиналось все очень хорошо

4

— VML

— VRML

— ActiveX

— Java

Правда не было никаких «ускорителей»

Графику использовать было нельзя

5

— Отображение 10 полигонов убивало браузер

— Анимация противопоказана

— Мало кто умел готовить

К сожалению на несколько лет мирзабыл про графику в интернете.

*2 секунды молчания*6

100500 Gflops

3dfx Voodoo

DirectX 10

GeForce

Shaders

Oblivion

WoW

LA 2 Open GL 2

А тем временем в неинтернете:

API 1.x

7

— VML, SVG, SSG

— Polyline, Polygon

— Цвет, ширина обводки

— Сложный клиппинг

Не будем оригинальны

8

API 2.0

9

— VML, SVG, Canvas

— Polyline, Polygon, Circle, Rectangle, Image

— Цвет, ширина контура, стиль контура,

— множественная прозрачность

— Оптимизация для высокодетализированных

— данных

Мультфильмы!

10

1. Определить геометрию:geometry.Polyline([[x,y],[x,y]])

geometry.Polygon([[[x,y],[x,y]]])

geometry.Rectangle([[x,y],[x,y]])

geometry.Circle([x,y],radius)

geometry.Point([x,y])

2. Создать геообъект: new ymaps.GeoObject(feature)

3. Добавить на карту

4. ?????

5. Profit!

Как готовить

11

Добавляем метки на Canvas

12

new ymaps.GeoObject({ geometry: { type: 'Point', coordinates: [x ,y] }}, { preset: 'twirl#blueIcon', overlayFactory: ymaps.geoObject.overlayFactory.interactiveGraphics

});

Очень много меток

13

Умная графика

14

— Полигональная симплификация

— Оптимизация под viewport

— СSG

— Оптимизация рендеринга

— Быстрая математика

— Различные технологии одновременно

Симплификация

15

— На этапе вычисления PixelGeometry

— Выполняется в 2 этапа:

1. Отброс соседних вершин

2. Симплификация контура

Оптимизация под viewport

16

— RenderManager = ObjectManager в API 1.x

— graphics.Pane умеет клипаться

— graphics.Shape отбрасывает из себя крупные

— куски, которые не помещаются на карте

— Мы используем Sutherland-Cohen. Графика

— справляется с многоконтурными объектами

ConstructiveSolidGeometry

17

— Если fillRule = evenOdd, контуры полигона

— вырезаются друг из друга

— Нативно для VML и SVG. Обучили Canvas

— Если сложный полигон, алгоритмически

— вырезаем дырку

— А VML не умеет fillRule = nonZero

Оптимизация рендеринга

18

— И у вас Canvas, а у нас?

— А у нас тайловый Canvas

И многое другое

19

— Математика на основе монотонов

— Бинарный поиск

— Сложные графические фигуры

— Поддерживает интерактивность, анимации,

— любой браузер

Еще быстрее можно?

20

Если нужна скорость, используйте

overlay.staticGraphics напрямую

Его, кстати, можно добавить в любой IPane

(можно получить ускорение до двух раз, а можно и наоборот)

Лучшее, конечно, впереди

21

Помните!

22

Вопросы?Антон Корзунов

kashey@yandex-team.ru

@theKashey