前言
mapbox提供的官方的切片工具tippecanoe,可以快速进行矢量切片,生成pbf格式切片或者mbtiles。也可以将矢量瓦片反向合成为具体数据。这里主要实现,用python调用tippecanoe实现将geojson转换为pbf切片。
环境部署
可以参考我之前的博文https://hanbo.blog.csdn.net/article/details/113172570
实现代码
import os
if __name__ == '__main__':
command = "tippecanoe -e lakepbf -pC -Z1 -z17 -f geo.json"
error_code = os.system(command)
print(error_code)
# -e是切成pdf
# -pC是关闭GZIP压缩
# -f 强制压缩
# -o outfile 输出的切片,是.mbtiles格式的文件,该文件是一个sqlite库
# -Z 是切片的最小zoom, -z 切片的最大zoom
# -R zoom/x/y 或 --one-tile=zoom/x/y
# -s projection 或 --projection=projection: 给定输入文件的坐标系统。当前支持的坐标系有EPSG:4326(WGS84,默认值)、EPSG:3857(Web Mercator)。请尽量使用 WGS84 坐标系统的数据集
# -z zoom 或 --maximum-zoom=zoom:切片的最大级别(默认为14)
# -zg 或 --maximum-zoom=g: 根据数据的密集程度自动计算一个最大级别
# -Z zoom 或 --minimum-zoom=zoom: 切片的最小级别(默认0)
# -ae 或 --extend-zooms-if-still-dropping: 如果在大级别下瓦片仍然很大,它将自动增加最大级别,以使最大级别下没有要素被删除
# -x name 或 --exclude=name: 指定切片中应剔除的字段。
# -y name 或 --include=name: 指定切片中应包含的字段
# -zg: 自动选择最大级别;
# --drop-densest-as-needed: 如果在小级别下瓦片太大,该选项将自动简化要素;
# --extend-zooms-if-still-dropping: 如果在大级别下瓦片仍然很大,它将自动增加最大级别,以使最大级别下没有要素被删除;
速度还是非常快的,生成数据目录如下:
测试
将之前生成pbf矢量切片文件,直接放入nginx或者IIS等容器下进行发布。然后用Mapbox进行调用,代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width: 100vw;height: 100vh"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaGFtYnVnZXJkZXZlbG9wIiwiYSI6ImNqNXJtZjF4ZzB3em4yd21pZmVqbHlleDAifQ.I9eqVjtotz7jaU7XcJm9pQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9'
});
map.on('load', function() {
map.addSource('qing',{
'type':'vector',
'tiles':['http://localhost/lakepbf/{z}/{x}/{y}.pbf']
});
map.addLayer({
'id': 'test',//随意
'source': 'qing',//和上面那个source保持一致
'source-layer':'geo',//图层名称。就是数据的名称,和切图时指定的图层名称相同
'type': 'fill',
'paint': {
'fill-color':"rgb(215,25,28)"
}
});
})
</script>
</body>
</html>
这里尤其要注意source-layer要和切片的geoJson的文件名相同,要不然无法正确调用。
预览效果