webgis之制作地图切片方法(三) —— tippecanoe

最新推荐文章于 2024-03-23 09:39:58 发布

imxiezy

最新推荐文章于 2024-03-23 09:39:58 发布

阅读量992

点赞数

分类专栏： Mapboxgl GIS Nodejs 文章标签： javascript node.js

本文链接：https://blog.csdn.net/imxiezy/article/details/129775193

版权

GIS 同时被 3 个专栏收录

11 篇文章 2 订阅

订阅专栏

Mapboxgl

4 篇文章 0 订阅

订阅专栏

Nodejs

3 篇文章 0 订阅

订阅专栏

《webgis之制作地图切片方法(一) —— QGIS》
《webgis之制作地图切片方法(二) —— gdal2tiles.py》

前言
本文介绍Mapbox开源的一个非常强大的矢量切片工具应用 —— tippecanoe。通过该工具可以将geojson格式的数据切片成 xyz 形式的矢量切片或者 mbtiles 格式的矢量切片。本文将介绍该工具简单应用方式，并通过 MapboxGL 预览切片。

环境
macOS、tippecanoe、express、MapboxGL
工具安装
本实验是macOS环境，win系统使用可以装个ubuntu虚拟机，具体方式可以参考官网。

$ brew install tippecanoe

制作切片

更多配置项参考官网。

1. 制作mbtiles 切片

配置项	含义
-zg	自动选择最大的maxZoom，平衡性能
-o	输出文件
custome.json	切片的文件，仅支持geojson，根据实际情况写

tippecanoe -zg -o custom.bmtiles custom.json

2. 制作xyz切片（pbf）

（1）不压缩的pbf 切片

配置项	含义
-z	maxZoom，最大的切片层级
-Z	minZoom，最小的切片层级
-pC	不压缩文件（gzip）
-e	输出文件夹
custome.json	切片的文件，仅支持geojson，根据实际情况写

tippecanoe -z10 -Z0 -pC -e xyz custom.json

切片结果如下：
MapboxGL加载切片

未压缩的切片放在服务器中以静态文件服务的形式发布，可以使用MapboxGL直接调用。

<html>

<head>
    <title>Mapbox Demo</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
</head>

<body>
    <div id="map" style="width: 100vw; height: 100vh"></div>
</body>
<script type="text/javascript">

    // Get a mapbox API access token
    mapboxgl.accessToken = 'token';

    // Initialize mapbox map
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v11',
        center: [22.324219, 42.423322],
        zoom: 4,
    });

    map.on('load', () => {

        map.addSource('myvct', {
            type: 'vector',
            tiles: ['http://localhost:3000/geoserver/{z}/{x}/{y}.pbf']
        })
        map.addLayer({
            id: 'mylayer',
            source: 'myvct',
            "source-layer": 'custom',
            type: 'fill',
            paint: {
                "fill-color": '#0080ff',
                'fill-opacity': 0.5
            }
        })
    });
</script>

</html>

渲染效果

（2）gzip压缩的pbf切片
gzip压缩是默认的切片方式，其中有一点点坑，切片集不能在像未压缩那样简单粗暴的扔到服务器调用就行，如何使用往下看吧。
切片命令

tippecanoe -z10 -Z0 -e xyz custom.json

问题
将切片结果，仍然像上文那样去使用时，客户端报错了message : "Unimplemented type: 3"，这个问题官方也有提到 issues，由此官网也对这个做了补充描述。
解决方法
解决方法很简单，只需要在请求切片返回头参数Response Headers加参数 Content-Encoding: gzip 就可以了。实现目的的方式多种多样，本实验使用 express 实现地图服务支持。服务端关键代码如下：

const express = require("express");
const fs = require("fs");
const path = require("path");

const app = express();
const port = 3000;

// 自定义跨域中间件
const allowCors = function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
};
app.use(allowCors); //使用跨域中间件

// pbf 矢量切片请求接口
app.get("/geoserver/:z/:x/:y", (req, res) => {
  const { z, x, y } = req.params;

  // 读取pbf文件
  const pbfFilePath = `./zipxyz/${z}/${x}/${y}`

  if(fs.existsSync(pbfFilePath)){
    const file = fs.createReadStream(pbfFilePath);
    // 根据pbf文件是否压缩设置相应头
    res.setHeader("Content-Encoding", "gzip");
  
    /**
     * some program block.
     */
  
    file.pipe(res);
  }
});

app.listen(port, () => {
  console.log(`server on ${port}`);
});

效果

imxiezy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webgis之制作地图切片方法(三) —— tippecanoe

前言本文介绍Mapbox开源的一个非常强大的工具应用 —— tippecanoe。通过该工具可以将geojson格式的数据切片成的矢量切片或者的矢量切片。本文将介绍该工具简单应用方式，并通过预览切片。
复制链接

扫一扫