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

本文提供了完整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文件


  
    
    Mapbox GL JS Map
    
    
    
      body{
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    
  
  
    
  
    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);
    });

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

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