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