Mapbox GL: как работают современные векторные карты
-
Upload
eatdog -
Category
Engineering
-
view
54 -
download
0
Transcript of Mapbox GL: как работают современные векторные карты
![Page 1: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/1.jpg)
как работают
современные векторные
картыVladimir Agafonkin
16.02.2017
![Page 2: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/2.jpg)
![Page 3: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/3.jpg)
![Page 4: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/4.jpg)
100% моего кода за время работы в
Mapbox — open source
![Page 5: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/5.jpg)
![Page 6: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/6.jpg)
![Page 7: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/7.jpg)
![Page 8: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/8.jpg)
![Page 9: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/9.jpg)
![Page 10: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/10.jpg)
![Page 11: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/11.jpg)
![Page 12: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/12.jpg)
![Page 13: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/13.jpg)
![Page 14: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/14.jpg)
![Page 15: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/15.jpg)
![Page 16: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/16.jpg)
![Page 17: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/17.jpg)
![Page 18: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/18.jpg)
![Page 19: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/19.jpg)
Тайлы
![Page 20: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/20.jpg)
![Page 21: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/21.jpg)
OpenLayers
![Page 22: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/22.jpg)
![Page 23: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/23.jpg)
MAPS.ME
![Page 24: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/24.jpg)
![Page 25: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/25.jpg)
![Page 26: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/26.jpg)
open source
![Page 27: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/27.jpg)
платформа длямобильных и
браузеров
![Page 28: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/28.jpg)
на основе открытых данных
![Page 29: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/29.jpg)
плавноемасштабирование и
поворот карты
![Page 30: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/30.jpg)
~
![Page 31: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/31.jpg)
![Page 32: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/32.jpg)
![Page 33: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/33.jpg)
полный контроль над отображением данных в реальном
времени
![Page 34: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/34.jpg)
![Page 35: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/35.jpg)
![Page 36: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/36.jpg)
любой объект на карте может
быть интерактивным
![Page 37: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/37.jpg)
![Page 38: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/38.jpg)
![Page 39: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/39.jpg)
![Page 40: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/40.jpg)
визуальныйредактор карты
![Page 41: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/41.jpg)
mapbox.com/studio
![Page 42: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/42.jpg)
![Page 43: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/43.jpg)
вид в перспективе,3D-возможности
![Page 44: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/44.jpg)
![Page 45: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/45.jpg)
![Page 46: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/46.jpg)
меньше трафика
![Page 47: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/47.jpg)
less bandwidth
![Page 48: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/48.jpg)
видео на картах
![Page 49: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/49.jpg)
![Page 50: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/50.jpg)
![Page 51: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/51.jpg)
![Page 52: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/52.jpg)
![Page 53: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/53.jpg)
почему так малоприменений
WebGL?
![Page 54: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/54.jpg)
делаем WebGL-приложение
![Page 55: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/55.jpg)
WebGL — 3D API?
![Page 56: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/56.jpg)
WebGL —низкоуровневый
2D API
![Page 57: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/57.jpg)
![Page 58: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/58.jpg)
WebGL:технология очень
быстрой отрисовки треугольников
![Page 59: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/59.jpg)
![Page 60: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/60.jpg)
vertex shaderпреобразовывает координаты
![Page 61: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/61.jpg)
fragment shaderпреобразовывает цвет пикселей
![Page 62: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/62.jpg)
отрисовка линий
![Page 63: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/63.jpg)
![Page 64: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/64.jpg)
антиалиасинг
![Page 65: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/65.jpg)
6 треугольников
![Page 66: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/66.jpg)
атрибуты вершин
![Page 67: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/67.jpg)
2 треугольника
![Page 68: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/68.jpg)
соединения
![Page 69: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/69.jpg)
![Page 70: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/70.jpg)
отрисовка полигонов
![Page 71: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/71.jpg)
триангуляция
![Page 72: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/72.jpg)
github.com/mapbox/earcut (JS)
github.com/mapbox/earcut.hpp (C++)
![Page 73: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/73.jpg)
отрисовка текста
![Page 74: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/74.jpg)
шрифтовые текстуры
![Page 75: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/75.jpg)
интервалы символов
/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
![Page 76: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/76.jpg)
![Page 77: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/77.jpg)
signed distance fields
![Page 78: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/78.jpg)
![Page 79: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/79.jpg)
![Page 80: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/80.jpg)
![Page 81: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/81.jpg)
mapbox/shelf-pack (JS)
mapbox/shelf-pack-cpp (C++)
![Page 82: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/82.jpg)
![Page 83: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/83.jpg)
icu4cC + Emscripten
github.com/mapbox/mapbox-gl-rtl-text
![Page 84: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/84.jpg)
загрузка и обработкаданных
![Page 85: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/85.jpg)
![Page 86: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/86.jpg)
Protocol Buffers
бинарный форматкомпактной сериализации
данных
![Page 87: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/87.jpg)
/mapbox/pbf (JS)
/mapbox/protozero (C++)
Protocol Buffers
![Page 88: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/88.jpg)
в 3-4 раза компактнееJSON (gzip)
в 6-7 раз быстрееJSON.parse
![Page 89: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/89.jpg)
github.com/mapbox/
vector-tile-spec
![Page 90: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/90.jpg)
![Page 91: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/91.jpg)
UI JS
браузер залипает
на объемных
вычислениях
UI
![Page 92: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/92.jpg)
UI
Worker JS
браузер залипает на загрузке
и пересылке данных
загрузка данных UI
![Page 93: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/93.jpg)
UI
Worker JS
браузер залипает
на получении данных
загрузка данных
UIUI
![Page 94: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/94.jpg)
UI
processing
браузер не залипает,
если данные в ArrayBuffer
loading data
UIUImain
thread
web worker
![Page 95: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/95.jpg)
размещениенадписей
![Page 96: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/96.jpg)
![Page 97: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/97.jpg)
![Page 98: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/98.jpg)
R-tree
![Page 99: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/99.jpg)
github.com/mapbox/grid-index
github.com/mourner/rbush
![Page 100: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/100.jpg)
![Page 101: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/101.jpg)
Ёханый бабай
![Page 102: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/102.jpg)
динамическая загрузка сторонних
данных
![Page 103: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/103.jpg)
~
![Page 104: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/104.jpg)
mapbox/geojson-vt (JS)
mapbox/geojson-vt-cpp (C++)
![Page 105: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/105.jpg)
кластеризация точек
![Page 106: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/106.jpg)
mapbox/supercluster (JS)
mapbox/supercluter-hpp (C++)
![Page 107: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/107.jpg)
![Page 108: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/108.jpg)
язык стиля карты
![Page 109: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/109.jpg)
github.com/mapbox/
mapbox-gl-style-spec
![Page 110: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/110.jpg)
mapbox.com/studio
![Page 111: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/111.jpg)
![Page 112: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/112.jpg)
![Page 113: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/113.jpg)
![Page 114: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/114.jpg)
![Page 115: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/115.jpg)
мобильныеустройства?
![Page 116: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/116.jpg)
Mapbox GL NativeC++11
Android, iOS, macOS, Qt, Node
github.com/mapbox/
mapbox-gl-native
![Page 117: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/117.jpg)
тесты для рендеринга
![Page 118: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/118.jpg)
![Page 119: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/119.jpg)
![Page 120: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/120.jpg)
mapbox/pixelmatch (JS)
mapbox/pixelmatch-cpp (C++)
сравнение скриншотовс учетом антиалиасинга
![Page 121: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/121.jpg)
AppVeyor
![Page 122: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/122.jpg)
инструменты
![Page 123: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/123.jpg)
browserifywatchify
transforms (glify, brfs, etc)
![Page 124: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/124.jpg)
ES6 + Bublé
![Page 125: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/125.jpg)
ESLint
![Page 126: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/126.jpg)
тестирование:TapeNyc
![Page 127: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/127.jpg)
![Page 128: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/128.jpg)
![Page 129: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/129.jpg)
а что там на стороне сервера?
![Page 130: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/130.jpg)
![Page 131: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/131.jpg)
Вован,
а когда ты сделаешь
WebGL рендеринг в
Leaflet? ^___^
![Page 132: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/132.jpg)
![Page 133: Mapbox GL: как работают современные векторные карты](https://reader036.fdocument.pub/reader036/viewer/2022081418/58b894251a28ab3e3a8b63f3/html5/thumbnails/133.jpg)