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加载例子
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
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', // 设置标签颜色
}
});
});