Вчера — впервые за шесть лет — побывал на местном JS-митапе, aka HelsinkiJS.
Не надо на меня так смотреть, я не ходок по митапам. Но на нескольких конференциях, впрочем, был.
И как-то так получилось, что помимо пива и пиццы были и доклады. И вот один из них — «Как нарисовать карту?» — был весьма интересен и его результат прекрасно подходит под формат канала.
Автор — Скотт Стрит — постарался объяснить и показать, как работают библиотеки отрисовки карт. Какие форматы, какие решения. Ну и, собственно, шаг за шагом рассказал и показал процесс конвертации мировых координат в координаты элементов сетки и отрисовки их в SVG.
Например, как из описания линии формата MapLibre (там protobuf, но в виде текста как-то так):
{
"layers": [
{
"version": 2,
"name": "roads",
"extent": 4096,
"features": [
{
"id": 42,
"type": "LINESTRING",
"tags": [0, 0],
"geometry": [
9,
1024, 2048,
26,
2048, 0,
1024, 1024,
2048, 0
]
}
],
"keys": ["class"],
"values": [
{ "string_value": "primary" }
]
}
]
}
Путем прямого чтения команд:
9 → MoveTo, count=1
1024, 2048 → dx, dy
26 → LineTo, count=3
2048, 0 → dx, dy
1024, 1024 → dx, dy
2048, 0 → dx, dy
...получается описание кривых в SVG. Тут надо понимать, что сами плитки — тайлы — кодируются как квадрат 4096*4096, а, стало быть, координаты — относительно тайла.
К сожалению, слайдов доклада в наличии нет, но есть, собственно демо и репозиторий.
Конечно, там сейчас всё достаточно минималистично — дороги, парки, дома — но если вам было интересно, как это всё работает — подойдёт прекрасно.
#svg #maplibre #map