js lab 2017_mapbox gl: как работают современные интерактивные...
TRANSCRIPT
как работают современные векторные карты
Владимир Агафонкин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? ^___^