step1:安装cygwin
1.1下载cygwin
下载cygwin的安装包setup-x86_64.exe：地址
1.2 创建安装目录
推荐在c盘根目录下创建cygwin目录，把下载下来的setup-x86_64.exe放入c:\cygwin中，其中需要代理，直接选择阿里云的镜像
1.3.安装Cygwin terminal
cmd进入setup-x86_64.exe所在的目录，即c:\cygwin，输入如下命令进行安装：
setup-x86_64.exe -q -P zlib-devel,libsqlite3-devel,gcc-g++,make,python,git,gdal,python-gdal
中间可能会出现选择下载源的地方，随便选即可。稍等片刻，安装完成后在桌面会创建快捷方式如下图所示：
双击打开Cygwin terminal输入： python -m ensurepip
step2:下载tippecanoe源码
2.1下载源码
可直接在Cygwin terminal输入:git clone https://github.com/mapbox/tippecanoe.git进行下载，也可以自己在github上下载:传送门
2.2修改makefile文件
下载完成后打开源码目录下的makefile文件，注意不要使用notepad，可以用写字板
找到：
CXXFLAGS := $(CXXFLAGS) -std=c++11
修改为：
CXXFLAGS := $(CXXFLAGS) -std=c++11 -U__STRICT_ANSI__
step3：编译安装
在Cygwin terminal中进入tippecanoe源码目录。
如果是使用Cygwin terminal命令下载的源码，直接输入cd tippecanoe即可，如果是自行下载的源码请输入全路径，cd xxx/xxx/tippecanoe
然后依次执行
make
make install
到此安装完毕
step4:矢量切片
tippecanoe能从大量的 GeoJSON、Geobuf 或 CSV 特征集合中创建矢量瓦片
Cygwin64 Terminal中切换到数据目录，输入如下命令：
tippecanoe -o outfile.mbtiles -Z8 -z20 infile.geojson
参数说明: -o outfile 输出的切片，是.mbtiles格式的文件，该文件是一个sqlite库
-Z 是切片的最小zoom, -z 切片的最大zoom
infile可以是多个，这样会按照图层分别存放切片
特别注意，-e 可用于将 tile 写入指定的目录而不是 mbtiles 文件，想要将矢量瓦片发布到 Web 服务的开发者可以使用这个功能
具体实例如下：
然后等待处理完成即可。
mapbox加载例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox Tippecanoe Tile Example</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [121.080322, 30.911651],
zoom: 10,
pitch: 60, // 设置地图的倾斜角度
bearing: -30, // 设置地图的旋转角度
maxBounds: [[120.858160, 30.690926], [121.902650, 31.850307]]
});
// 添加切片图层
map.on('load', function () {
map.addSource('tiles', {
type: 'vector',
tiles: [
'http://127.0.0.1:5501/shanghaipbf/{z}/{x}/{y}.pbf',
],
minzoom: 8,
maxzoom: 14
});
map.addLayer({
id: 'tile-layer',
type: 'fill-extrusion',
source: 'tiles',
'source-layer': 'shanghai', // 提供您的矢量图层名称
paint: {
'fill-extrusion-color': '#ff0000', // 设置填充颜色为红色
'fill-extrusion-base': 500, // 设置填充底部宽度为0
'fill-extrusion-height': {
type: 'identity',
property: 'height' // 使用 'height' 属性作为填充高度
},
'fill-extrusion-opacity': 0.5 // 设置填充透明度为0.5
}
});
map.addLayer({
id: 'label-layer',
type: 'symbol',
source: 'tiles',
'source-layer': 'shanghai', // 提供您的矢量图层名称
layout: {
'text-field': ['get', 'NAME'], // 将 'NAME' 属性显示为标签
'text-size': 12,
'text-anchor': 'center'
},
paint: {
'text-color': '#000000', // 设置标签颜色
}
});
});
</script>
</body>
</html>
1255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
