本文提供了完整OSM数据切瓦片，并实现前端可视化的流程。参考了一些大佬的开源项目，在此感谢这些大佬，并在最后提供相关参考资料。话不多说，整起。
1. OSM矢量数据下载
OSM数据下载链接为OSM数据下载链接，网站界面如下：
本文下载maldives PBF格式数据进行测试数据地址。
2. 矢量数据切瓦片
2.1 PBF格式转GeoJSON格式数据
使用ogr2ogr工具，这里将multipolygons layer数据转为GeoJSON格式数据。
ogr2ogr -f "GeoJSON" /path/to/madives_multipolygon.geojson /path/to/madives-latest.osm.pbf multipolygons
2.2 切GeoJSON格式矢量数据为mbtiles格式瓦片
使用tippecanoe将GeoJSON格式矢量数据为mbtiles格式瓦片。
tippecanoe -o /path/to/maldives_multipolygon.mbtiles /path/to/maldives_multipolygon.geojson --drop-densest-as-needed
3. 矢量瓦片前端可视化
本文使用Mapbox GL JS将瓦片数据可视化，需要注册Mapbox获得tocken。
3.1 Mapbox注册以及tocken获取
参考这个大佬的教程，目前是可以的。
3.2 基于Mapbox GL JS 前端可视化
参考这个mbtiles4j教程将mbtiles瓦片通过tomcat发布。
- 修改mbtiles4j.properties配置，修改mbtiles文件路径改为你的文件路径。
tile-dbs = db1
db1.path = path/to/maldives_multipolygon.mbtiles
- 在mbtiles4j工程下用maven打包成war包，文件位置在target文件夹下，打包文件如下图。
mvn package
- 将mbtiles4j.war放到tomcat webapps下面，启动tomcat。
startup.bat
- 新建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mapbox GL JS Map</title>
<script src='https://api.mapbox.***/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.***/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.a***essToken = 'your mapbox tocken';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [73, 8], // starting position [lng, lat]
zoom: 5, // starting zoom
});
map.on('load',function(){
var maldives_tile_source={
type: 'vector',
scheme: "tms",
tiles:[
'http://localhost:8080/mbtiles4j/db1/{z}/{x}/{y}.pbf'
],
minzoom: 0,
maxzoom:16
};
var maldives_polygon_layer={
'id':'maldives_polygon_id',
'type': 'fill',
'source':'maldives_tile_source',
'source-layer':'maldives_multipolygon',
'paint': {
'fill-color': 'rgba(0, 128, 255, 0.6)', // 蓝色填充，透明度为 0.6
'fill-outline-color': 'blue' // 边界颜色为蓝色
}
};
map.addSource('maldives_tile_source',maldives_tile_source);
map.addLayer(maldives_polygon_layer);
});
</script>
</body>
</html>
谷歌浏览器打开，如下图。
在此，感谢各位大佬提供的资料，参考链接如下：
Mapbox注册: https://www.bilibili.***/read/cv24878918/?spm_id_from=333.999.0.0
mbtiles4j发布矢量瓦片： https://github.***/gisarmory/mbtiles4j?tab=readme-ov-file
