Документ описывает технологии и практики, используемые для разработки современных векторных карт, включая кодовую базу Mapbox и инструменты для 3D-визуализации. Он затрагивает темы, такие как отрисовка графики с использованием WebGL, использование протоколов для обработки данных и различные аспекты оптимизации производительности. Также рассматриваются возможности работы с большими объемами данных и динамическая загрузка сторонних данных на мобильных устройствах.

1. как работают
современные векторные
карты
Vladimir Agafonkin
16.02.2017

4. 100% моего кода
за время работы в
Mapbox — open source

19. Тайлы

21. OpenLayers

23. MAPS.ME

26. open source

27. платформа для
мобильных и
браузеров

28. на основе
открытых данных

29. плавное
масштабирование и
поворот карты

30. ~

33. полный контроль
над отображением
данных в реальном
времени

36. любой объект на
карте может
быть
интерактивным

40. визуальный
редактор карты

41. mapbox.com/studio

43. вид в перспективе,
3D-возможности

46. меньше трафика

47. less bandwidth

48. видео на картах

53. почему так мало
применений
WebGL?

54. делаем WebGL-приложение

55. WebGL — 3D API?

56. WebGL —
низкоуровневый
2D API

58. WebGL:
технология очень
быстрой отрисовки
треугольников

60. vertex shader
преобразовывает координаты

61. fragment shader
преобразовывает цвет пикселей

62. отрисовка линий

64. антиалиасинг

65. 6 треугольников

66. атрибуты вершин

67. 2 треугольника

68. соединения

70. отрисовка полигонов

71. триангуляция

72. github.com/mapbox/earcut (JS)
github.com/mapbox/earcut.hpp (C++)

73. отрисовка текста

74. шрифтовые
текстуры

75. интервалы символов
/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

77. signed distance fields

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

83. icu4c
C + Emscripten
github.com/mapbox/mapbo
x-gl-rtl-text

84. загрузка и обработка
данных

86. Protocol Buffers
бинарный формат
компактной сериализации
данных

87. /mapbox/pbf (JS)
/mapbox/protozero (C++)
Protocol Buffers

88. в 3-4 раза компактнее
JSON (gzip)
в 6-7 раз быстрее
JSON.parse

89. github.com/mapbox/
vector-tile-spec

91. UI JS
браузер залипает
на объемных
вычислениях
UI

92. UI
Worker JS
браузер залипает на загрузке
и пересылке данных
загрузка
данных UI

93. UI
Worker JS
браузер залипает
на получении данных
загрузка
данных
UIUI

94. UI
processing
браузер не залипает,
если данные в ArrayBuffer
loading data
UIUI
main
thread
web worker

95. размещение
надписей

98. R-tree

99. github.com/mapbox/grid-index
github.com/mourner/rbush

101. Ёханый
бабай

102. динамическая
загрузка сторонних
данных

103. ~

104. mapbox/geojson-vt (JS)
mapbox/geojson-vt-cpp (C++)

105. кластеризация
точек

106. mapbox/supercluster (JS)
mapbox/supercluter-hpp (C++)

108. язык стиля карты

109. github.com/mapbox/
mapbox-gl-style-spec

110. mapbox.com/studio

115. мобильные
устройства?

116. Mapbox GL Native
C++11
Android, iOS, macOS, Qt, Node
github.com/mapbox/
mapbox-gl-native

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

120. mapbox/pixelmatch (JS)
mapbox/pixelmatch-cpp (C++)
сравнение скриншотов
с учетом антиалиасинга

121. AppVeyor

122. инструменты

123. browserify
watchify
transforms (glify, brfs, etc)

124. ES6 + Bublé

125. ESLint

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

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

131. Вован,
а когда ты сделаешь
WebGL рендеринг в
Leaflet? ^___^