Карта в браузере: путь от спутникового снимка до...
-
Upload
tech-talks-nsu -
Category
Software
-
view
77 -
download
3
Transcript of Карта в браузере: путь от спутникового снимка до...
![Page 1: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/1.jpg)
Путь карты от спутникового снимка до пользователя
Илья Таратухин, 2ГИС
![Page 2: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/2.jpg)
План● Терминология● Сбор и подготовка данных● Backend● Frontend
![Page 3: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/3.jpg)
Терминология
![Page 4: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/4.jpg)
ТерминологияКарты
● растровые● векторные
![Page 5: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/5.jpg)
ТерминологияГеообъекты:
● точечные● линейные● площадные
![Page 6: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/6.jpg)
ТерминологияГеокодирование
● прямое (объекты)● обратное (координаты)
![Page 7: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/7.jpg)
ТерминологияAPI карт - Библиотека для работы с картографическими данными
● Тайлы● Слои (overlay)
○ Маркер○ Балун (каллаут)○ POI
● Проекции
![Page 8: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/8.jpg)
ТерминологияСистемы координат (проекции)
● Географическая● Проекция меркатора (UTM, эллипсоид WGS84)
○ Проекция EPSG:3857 (тайлы)○ Проекция EPSG:4326 (данные)
![Page 9: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/9.jpg)
Сбор и подготовка данных
![Page 10: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/10.jpg)
![Page 11: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/11.jpg)
![Page 12: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/12.jpg)
![Page 13: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/13.jpg)
Сбор и подготовка данных● Спутниковые снимки● Выверка пешими специалистами● Обзвон компаний● GPS треки
![Page 14: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/14.jpg)
Как стать самым востребованной ГИС?
![Page 15: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/15.jpg)
Актуальность и полнота данных!
![Page 16: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/16.jpg)
Backend
![Page 17: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/17.jpg)
BackendЗадачи бекенда
● прямое и обратное геокодирование● поиск точек интереса (POI)● отдача статики
![Page 18: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/18.jpg)
BackendИнструменты для работы с динамическими данными
● Большой комбайн за деньги● Дайте OpenSource, яжпрограммист
![Page 19: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/19.jpg)
BackendИнструменты для работы с динамическими данными
● PostgreSQL + PostGIS● MySQL + Spatial Data● Можно написать свои
![Page 20: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/20.jpg)
BackendПроблемы статики
● файлов много● файлы маленькие (1-15кб)● на файловой системе хочется положить много файлов рядом● файлов реально много (68 719 476 736 на zoom 18)● очень много маленьких файлов, которые занимают места меньше
размера кластера, просят указатель и которые хочется положить в один каталог
![Page 21: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/21.jpg)
BackendИнструменты для работы со статикой
● Распределенная ФС (например Ceph)● Squashfs● NoSQL (MongoDB + MongoFS)● Nginx + ФС
![Page 22: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/22.jpg)
BackendРаздать статику с помощью FS? Реализуемо!
● отключаем журналирование● уменьшаем размер кластера● разворачиваем пути, например /z/x/y.png можно разложить в /hash[4]
/hash[3]/hash[2]/hash[1]/hash[0].png (mod_tile от OSM)
![Page 23: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/23.jpg)
Backend/hash[4]/hash[3]/hash[2]/hash[1]/hash[0].png
// We attempt to cluster the tiles so that a 16x16 square of tiles will be in a single directory// Hash stores our 40 bit result of mixing the 20 bits of the x & y co-ordinates// 4 bits of x & y are used per byte of output
unsigned char i, hash[5];for (i=0; i<5; i++) { hash[i] = ((x & 0x0f) << 4) | (y & 0x0f);
x >>= 4;y >>= 4;
}
https://github.com/openstreetmap/mod_tile/blob/master/src/store_file_utils.c
![Page 24: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/24.jpg)
Frontend
![Page 25: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/25.jpg)
FrontendЗадачи фронтенда
● Визуализация данных● Взаимодействие с пользователем
![Page 26: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/26.jpg)
FrontendИнструменты
● Leaflet● OpenLayers
![Page 27: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/27.jpg)
Крупнейшие игроки на рынке● Cloudmate● Mapbox● OpenStreetMap● Google
![Page 28: Карта в браузере: путь от спутникового снимка до пользователя](https://reader030.fdocument.pub/reader030/viewer/2022032711/5880005c1a28ab3a1e8b7509/html5/thumbnails/28.jpg)
Вопросы?