как работают

современные векторные

картыVladimir Agafonkin

16.02.2017

100% моего кода за время работы в

Mapbox — open source

Тайлы

OpenLayers

MAPS.ME

open source

платформа длямобильных и

браузеров

на основе открытых данных

плавноемасштабирование и

поворот карты

~

полный контроль над отображением данных в реальном

времени

любой объект на карте может

быть интерактивным

визуальныйредактор карты

mapbox.com/studio

вид в перспективе,3D-возможности

меньше трафика

less bandwidth

видео на картах

почему так малоприменений

WebGL?

делаем WebGL-приложение

WebGL — 3D API?

WebGL —низкоуровневый

2D API

WebGL:технология очень

быстрой отрисовки треугольников

vertex shaderпреобразовывает координаты

fragment shaderпреобразовывает цвет пикселей

отрисовка линий

антиалиасинг

6 треугольников

атрибуты вершин

2 треугольника

соединения

отрисовка полигонов

триангуляция

github.com/mapbox/earcut (JS)

github.com/mapbox/earcut.hpp (C++)

отрисовка текста

шрифтовые текстуры

интервалы символов

/v4/fontstack/Arial Unicode MS Regular/0-255.pbf

/v4/fontstack/Arial Unicode MS Regular/256-511.pbf

/v4/fontstack/Arial Unicode MS Regular/512-767.pbf

signed distance fields

mapbox/shelf-pack (JS)

mapbox/shelf-pack-cpp (C++)

icu4cC + Emscripten

github.com/mapbox/mapbox-gl-rtl-text

загрузка и обработкаданных

Protocol Buffers

бинарный форматкомпактной сериализации

данных

/mapbox/pbf (JS)

/mapbox/protozero (C++)

Protocol Buffers

в 3-4 раза компактнееJSON (gzip)

в 6-7 раз быстрееJSON.parse

github.com/mapbox/

vector-tile-spec

UI JS

браузер залипает

на объемных

вычислениях

UI

UI

Worker JS

браузер залипает на загрузке

и пересылке данных

загрузка данных UI

UI

Worker JS

браузер залипает

на получении данных

загрузка данных

UIUI

UI

processing

браузер не залипает,

если данные в ArrayBuffer

loading data

UIUImain

thread

web worker

размещениенадписей

R-tree

github.com/mapbox/grid-index

github.com/mourner/rbush

Ёханый бабай

динамическая загрузка сторонних

данных

~

mapbox/geojson-vt (JS)

mapbox/geojson-vt-cpp (C++)

кластеризация точек

mapbox/supercluster (JS)

mapbox/supercluter-hpp (C++)

язык стиля карты

github.com/mapbox/

mapbox-gl-style-spec

mapbox.com/studio

мобильныеустройства?

Mapbox GL NativeC++11

Android, iOS, macOS, Qt, Node

github.com/mapbox/

mapbox-gl-native

тесты для рендеринга

mapbox/pixelmatch (JS)

mapbox/pixelmatch-cpp (C++)

сравнение скриншотовс учетом антиалиасинга

AppVeyor

инструменты

browserifywatchify

transforms (glify, brfs, etc)

ES6 + Bublé

ESLint

тестирование:TapeNyc

а что там на стороне сервера?

Вован,

а когда ты сделаешь

WebGL рендеринг в

Leaflet? ^___^