mapbox gl: как работают современные векторные карты
TRANSCRIPT
как работают
современные векторные
карты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? ^___^