js lab 2017_mapbox gl: как работают современные интерактивные...

как работают современные векторные карты

Владимир Агафонкин25.03.2017

GL

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

Mapbox — open source

карты сейчас везде

традиционные карты

Тайлы

OpenLayers

векторные карты

MAPS.ME

GL

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

SDFsigned distance fields

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

icu4cC + Emscripten = JS

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-indexgithub.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 Native C++11

Android, iOS, macOS, Qt, Node

github.com/mapbox/ mapbox-gl-native

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

mapbox/pixelmatch (JS)mapbox/pixelmatch-cpp (C++)

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

AppVeyor

инструменты

browserify watchify

ES6 + Bublé

ESLint

тестирование: Tape Nyc

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

Вован, а когда ты сделаешь WebGL рендеринг в

Leaflet? ^___^