nginx发布矢量切片mvt/pbf

nginx发布矢量切片mvt/pbf

mvt（pbf）矢量切片数据使用Tippecanoe进行切片，安装教程可以参考我之前的博客内容

然后用nginx进行发布（静态文件发布）

数据处理

这里需要先将shapefile文件转换成GeoJson再处理

# 我这里设置每个切片中图斑数量不超过1000，切片到18级别
tippecanoe  -Bf1000 -z18 -e /data/data/skpt/pbf/1000_1 --drop-densest-as-needed --extend-zooms-if-still-dropping /data/data/skpt/shp/respl1.geojson

处理完成后如下，处理完成后将文件放到nginx指定目录：

nginx配置

前端加载响应体如下：

切片完成后的数据为pbf格式，并且使用Tippecanoe切片默认会进行gzip压缩，我们配置nginx 的时候需要设置一下

nginx.conf

server {
    
                                                  
        listen       8088;
        server_name web_resources;
        root   D:/data/webdata;  
        autoindex on; 
        location / {
    
      
            add_header 'Access-Control-Allow-Origin' '*';
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' '*';
			add_header 'Content-Encoding' 'gzip'; # 指明数据进行了gzip压缩
			add_header Cache-Control no-store;
			if ($request_method = 'OPTIONS') {
    
    
			add_header 'Access-Control-Max-Age' 1728000;
			add_header 'Content-Type' 'text/plain; charset=utf-8';
			add_header 'Content-Length' 0;
			return 204;
			}
	      default_type application/x-protobuf; #设置pbf返回格式
        }
    }

mapbox加载mvt代码

      map.on('load', () => {
    
    
        map.addSource('mapillary', {
    
    
          'type': 'vector',
          // 'scheme':'tms',
          'tiles': [
            'http://localhost:8088/pdf/1000_1/{z}/{x}/{y}.pbf'
          ],
          'minzoom': 1,
          'maxzoom': 18
        });
        map.addLayer(
            {
    
    
              'id': 'mapillary', // Layer ID
              type: 'fill-extrusion',
              'source': 'mapillary', // ID of the tile source created above
              'source-layer': 'respl1',
              'paint': {
    
    
                'fill-extrusion-color': 'white',
                 'fill-extrusion-height': ['get','height'],
                'fill-extrusion-base': 0,
                'fill-extrusion-opacity': 1
              }
            },
        );
      });

最后效果