切OSM数据矢量瓦片并前端可视化最完整流程

辛士心

已于 2024-03-04 11:36:58 修改

阅读量1.9k

点赞数 22

文章标签：前端 big data html

于 2024-01-11 15:41:43 首次发布

本文链接：https://blog.csdn.net/weixin_43129102/article/details/135524514

版权

本文详细介绍了如何从OSM下载矢量数据，将其转换为GeoJSON并切割为mbtiles瓦片，最后使用MapboxGLJS在前端实现可视化的过程，包括Mapbox注册、MBTiles配置和前端代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文提供了完整OSM数据切瓦片，并实现前端可视化的流程。参考了一些大佬的开源项目，在此感谢这些大佬，并在最后提供相关参考资料。话不多说，整起。

1. OSM矢量数据下载

OSM数据下载链接为OSM数据下载链接，网站界面如下：

本文下载maldives PBF格式数据进行测试数据地址。

使用ogr2ogr工具，这里将multipolygons layer数据转为GeoJSON格式数据。

ogr2ogr -f "GeoJSON" /path/to/madives_multipolygon.geojson /path/to/madives-latest.osm.pbf multipolygons

使用tippecanoe将GeoJSON格式矢量数据为mbtiles格式瓦片。

tippecanoe -o /path/to/maldives_multipolygon.mbtiles  /path/to/maldives_multipolygon.geojson --drop-densest-as-needed

本文使用Mapbox GL JS将瓦片数据可视化，需要注册Mapbox获得tocken。

参考这个大佬的教程，目前是可以的。

参考这个mbtiles4j教程将mbtiles瓦片通过tomcat发布。

tile-dbs = db1
db1.path = path/to/maldives_multipolygon.mbtiles

mvn package

在这里插入图片描述

startup.bat

<!DOCTYPE html>
<html lang