切OSM数据矢量瓦片并前端可视化最完整流程-Toy模板网

这篇具有很好参考价值的文章主要介绍了切OSM数据矢量瓦片并前端可视化最完整流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

1. OSM矢量数据下载

OSM数据下载链接为OSM数据下载链接，网站界面如下：
osm转瓦片,前端,big data,html
本文下载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 packeage

osm转瓦片,前端,big data,html

将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.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/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.accessToken = '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>

谷歌浏览器打开，如下图。

osm转瓦片,前端,big data,html
在此，感谢各位大佬提供的资料，参考链接如下：
Mapbox注册: https://www.bilibili.com/read/cv24878918/?spm_id_from=333.999.0.0
mbtiles4j发布矢量瓦片： https://github.com/gisarmory/mbtiles4j?tab=readme-ov-file文章来源地址https://www.toymoban.com/news/detail-827745.html