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

最新推荐文章于 2025-06-19 09:24:31 发布

原创

最新推荐文章于 2025-06-19 09:24:31 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js

本文介绍了如何使用tippecanoe工具将geojson数据转化为矢量切片，包括生成mbtiles和xyz(pbf)格式，并在MapboxGL中预览。在macOS环境下，通过tippecanoe的配置选项进行切片制作，然后利用Express服务处理gzip压缩的pbf切片，解决MapboxGL加载时的兼容问题。

《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=