MapBox矢量切片及本地调用流程修改版

月落日出594

于 2024-09-01 11:47:05 发布

阅读量321

点赞数 11

分类专栏：地图发布服务切图配图文章标签： arcgis 开源软件开源服务发现

本文链接：https://blog.csdn.net/weixin_56841411/article/details/141782080

版权

地图同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

发布服务

1 篇文章 0 订阅

订阅专栏

切图配图

1 篇文章 0 订阅

订阅专栏

MapBox矢量切片及本地调用流程

tippecanoe工具切片（目标文件.mbtiles）
1. tippecanoe安装

OSX系统执行命令

$ brew install tippecanoe

关于Homebrew介绍和使用查看链接Homebrew介绍和使用 - 简书

Ubuntu系统依次执行下列命令

$ yum install sqlite-devel.x86_64 -y

$ yum install -y gcc automake autoconf libtool make

$ yum install -y gcc gcc-c++

$ yum install zlib-devel

$ Y

$ mkdir /data

$ cd /data

$ git clone GitHub - mapbox/tippecanoe: Build vector tilesets from large collections of GeoJSON features.(下载数据路径)

$ git clone tippecanoe: Build vector tilesets from large collections of GeoJSON features.(下载数据路径)

$ rm -rf tippecanoe(路径下载数据失败，删除目录)

$ git clone https://gitee.com/ssjylsg/tippecanoe.git(下载数据路径)

$ cd tippecanoe

$ make -j

$ make install

1. Tippecanoe常用参数说明

简写	全称	说明
-o file.mbtiles	--output=file.mbtiles	输出文件名称
-e directory	--output-to-directory=directory	输出文件至指定路径
-f	--force	如果存在同名文件，执行过程中会自动替换
-F	--allow-existing	如果存在同名文件，则保留原文件
-s projection	--projection=projection	指定投影坐标系，目前支持EPSG:4326，EPSG:3857两种，默认前者
-z zoom	--maximum-zoom=zoom	指定生成切片的最高缩放级别，默认到14级
-zg	--maximum-zoom=g	根据空间要素估算一个合适的缩放级别
-Z zoom	--minimum-zoom=zoom	指定生成切片的最低缩放级别，默认到0级
-ae	--extend-zooms-if-still-dropping	从指定级别到最大缩放级别，删除或简化要素
-R zoom/x/y	--one-tile=zoom/x/y	指定最小、最大缩放级别
-d detail	--full-detail=detail	最大缩放级别的分辨率，默认12，即切片分辨率为 2^12=4096
-D detail	--low-detail=detail	最小缩放级别的分辨率，默认12，即切片分辨率为 2^12=4096
-m detail	--minimum-detail=detail	如果切片分辨率过大，将尝试最小分辨率
-x name	--exclude=name	从所有要素中排出某个或某几个属性
-y name	--include=name	从所有要素中提取某个或某几个属性，没有指定的属性将被排除
-X	--exclude-all	排除要素所有属性，仅对几何图形进行切片
-M bytes	--maximum-tile-bytes=bytes	指定切片最大字节数，默认500k
-O features	--maximum-tile-features=features	指定切片要素个数，默认200000
-pf	--no-feature-limit	不要将切片限制为200,000个要素
-pk	--no-tile-size-limit	不要将切片限制为500k字节
-pC	--no-tile-compression	不要压缩PBF矢量切片数据
-pg	--no-tile-stats	不要在tileset元数据中统计行，不统计会增加上传时间
	--tile-stats-attributes-limit=count	指定切片最多包含的统计信息，默认1000
	--tile-stats-sample-values-limit=count	根据指定值计算切片属性统计信息，默认1000
	--tile-stats-values-limit=count	统计tilestats中唯一属性值，默认100
-as	--drop-densest-as-needed	如果切片太大，尝试通过增加要素之间的最小间距将其减小到500K以下。该间距适用于整个缩放级别
-ad	--drop-fraction-as-needed	从每个缩放级别动态删除一些要素，以使切片保持在500K大小限制之下。适用于整个缩放级别
-an	--drop-smallest-as-needed	从每个缩放级别动态删除最小的要素（即最短的线或最小的多边形），以使切片保持在500K大小限制之下。此选项不适用于点要素。
-aN	--coalesce-smallest-as-needed	将每个缩放级别的最小要素（即最短的线或最小的多边形）动态合并到其他附近的要素中，以使大的区块保持在500K大小限制之下。主要用于多边形，以保持多边形覆盖的完整原始区域，同时仍以某种方式减少特征数量。小多边形的属性不会保留到组合要素中（通过--accumulate属性除外），只保留其几何形状。此外，嵌套多边形合并的多边形可能不一定是直接封闭的要素。
-aD	--coalesce-densest-as-needed	动态地将每个缩放级别的最密集要素合并到其他附近的要素中，以使切片保持在500K大小限制之下。（主要适用于多边形。）
-aS	--coalesce-fraction-as-needed	动态地将每个缩放级别的一小部分要素合并到其他附近要素中，以使切片保持在500K大小限制之下。（主要适用于多边形。）
-pd	--force-feature-limit	从切片动态删除一部分要素，使其低于500K大小限制。可能使切片边界看起来很难看。（类似于-ad但是单独应用于每个切片，而不是整个缩放级别。）
-aC	--cluster-densest-as-needed	尝试通过增加要素之间的最小间距来减小其大小，并从每个组中留下一个占位符要素（参考）

其他参数请阅读https://github.com/mapbox/tippecanoe

1. 切片（以geoJson为例）

（1）数据准备

利用QGIS将shape数据转化为geoJson，注意数据编码为GBK，否则会出现中文乱码，影像后期配图，同时数据坐标为WGS84，或Web墨卡托投影数据。

（2）执行切片命令

以运城项目数据为例：

tippecanoe -o yuncheng.mbtiles -M 3000000 -z 19 -s EPSG:3857 BLDNUMPT.geojson BLDPL.geojson CITYPL.geojson COUNTYLN.geojson COUNTYPL.geojson COUNTYPT.geojson FUNCPL.geojson HYDPL.geojson poi.geojson RAILWAYLN.geojson REPREST.geojson ROAD.geojson TOWNLN.geojson TOWNPL.geojson TOWNPT.geojson VEGPL.geojson

tippecanoe -o LA.mbtiles -M 20000000 -Z 0 -z 18 -s EPSG:4326 -pC BLDPG.geojson POI.geojson ROAD.geojson AHCityT.geojson AHCityM.geojson CD.geojson FUNCPG.geojson FUNCPT.geojson HYGPG.geojson HYGPT.geojson LACityT.geojson FUNCPGxx LouHao.geojson VEGPG.geojson VEGPT.geojson QuXianD.geojson QuXianM.geojson ShengM.geojson LACityM.geojson RAILWAY.geojson XiangZhenD.geojson FUNCPTxx.geojson

tippecanoe -o LA.mbtiles -M 20000000 -Z 17 -z 18 -s EPSG:4326 -pC BLDPG.geojson

-o：最终输出文件名yuncheng.mbtiles

-M：指定切片最大字节数3000000byte(因为切片过程中，每个层级报>500k，到第7级报错，tippecanoe could not make tile 7/103/50 small enough，加上此参数解决)

-z：切片最大缩放层级19，不指定只切14级

-s：指定数据投影EPSG:3857（数据是web墨卡托投影，不指定汇报未指定投影错误，但程序不停止，默认EPSG:4326）

-pC:不要压缩PBF矢量切片数据,因为第一次没有添加该参数，导出切片后发现前端不能直接调用，需要解压转换数据格式，浪费很多时间，在切片过程中，添加该参数后，可能需要重新修改-M后的数值。

注意：利用Mapbox Studio配图时，需要上传.mbtiles文件，为确保数据安全，重新切一版样例数据或偏移数据，以运城项目为例，利用上述命令切偏移数据后，将结果文件上传至Mapbox Studio平台时，因为切片数据量过大上传失败，所以在切偏移数据时，没有添加-M参数，为避免（tippecanoe could not make tile 7/103/50 small enough）错误，添加-ad命令，切图后上传成功。

tippecanoe -o yuncheng.mbtiles -z 19 -s EPSG:3857 -ad BLDNUMPT.geojson BLDPL.geojson CITYPL.geojson COUNTYLN.geojson COUNTYPL.geojson COUNTYPT.geojson FUNCPL.geojson HYDPL.geojson poi.geojson RAILWAYLN.geojson REPREST.geojson ROAD.geojson TOWNLN.geojson TOWNPL.geojson TOWNPT.geojson VEGPL.geojson

mbutil工具导出pbf（目标文件.pbf）
1. mbutil安装

克隆mbutil项目

git clone git://github.com/mapbox/mbutil.git

cd mbutil

# get usage

./mb-util -h

全局安装mb-util

sudo python setup.py install

# then you can run:

mb-util

1. Mbutil参数说明

简写	全称	说明
-h	--help	显示此帮助消息并退出
	--scheme=SCHEME	切片的平铺方案。默认为“xyz”（z / x / y），其他选项是“tms”，也是z / x / y，但使用翻转的y坐标和复制的“wms” MapServer WMS TileCache目录结构“z / 000/000 / x / 000/000 / y.png”，和“zyx”这是格式vips dzsave --layout谷歌使用。
	--image_format=FORMAT	切片格式，png, jpg, webp or pbf
	--grid_callback=CALLBACK	用于控制UTFGrid切片的JSONP回调的选项。如果网格不能用作JSONP，可以删除，指定--grid_callback =“”的回调
	--do_compression	做压缩
	--silent	指示操作是否以后台方式运行

注意：需要Python环境2.6以上版本

Git网址：https://github.com/mapbox/mbutil

1. 导出pbf

只需将准确数据.mbtiles文件进行导出，执行以下命令

mb-util --image_format=pbf yuncheng.mbtiles tiles

压缩文件命令

zip -r 17.zip 17

1. 解压缩pbf

如果tippecanoe切片过程中没有添加-pC参数，通过mbutil直接导出的pbf文件不能直接在前端使用，需要在经过gzip等操作处理才能使用。具体操作方式如下：

cd tiles

// 执行gzip压缩

gzip -d -r -S .pbf *

// 重命名（非必要，如果不执行这一步那么前端访问使用的是 xxx/{z}/{x}/{y}，否则就就是 xxx/{z}/{x}/{y}.pbf）

find . -type f -exec mv '{}' '{}'.pbf \;

MapBox Studio配图及注意事项
1. 上传.mbtiles文件

打开Mapbox | Maps, Navigation, Search, and Data网站，注册账号并登录
依次点击Start Building、Start by desining a map开始配图

配图流程

点击Add layer弹出Source资源框，点击Upload，即可上传自己的.mbtiles资源，上传完成后，可以在目录结构中生成自己的source目录

如上图，点击yuncheng，即可看到图层文件

依次点击每个图层加载至页面，注意每次点击后选择type类型，点线面分别选择Circle、Line、Fill，如果要配成三维立体图形，选择Fill extrusion，标注选择Symbol

其他按键如下图所示

1. 特别要素配图
关于道路

以铁路为例，黑白格相间，需要上传两条道路进行复合配图，黑线宽度稍宽在底层，白线稍窄在上层，同时，通过dash参数将其设置成虚线。（其他道路复合样式也需要多次上传重复图层）

关于标注

每个需要标注的图层都需要重复上传一个Symbol类型的相同图层，标注符号（icon）可以上传自己的svg数据，配图过程中需要注意注记与符号相对位置关系，避免压盖，另外，道路需要沿道路走向标注，在Placement中选择如下图所示选项

关于立体建筑

需要立体显示的建筑，在加载图层的时候类型选择Fill extrusion，配图过程中，以某字段数值作为拉伸高度，同时，用相同数据层的Fill类型至于Fill extrusion底部以显示建筑阴影。（其他符合样式都需要注意图层顺序）

1. 发布地图
发布地图

所有图层配图完成后，点击网页右上角Publish按钮进行地图发布

样式下载

完成发布后，点击右上角Share按钮，弹出下图提示框，点击Mapbox Basic Template即可下载样式文件，包括标注样式中的符号图标。

关于不同图层的层级显示利用Style across zoom range等参数进行设置

MapBox矢量切片调用及本地化部署
1. 本地化sprite

通过HTTP请求可以发现，sprite的配置，会导致两个请求，一个sprite.png的请求，一个是sprite.json的请求。sprite.png请求的结果如下：

通过上图，基本可以看出来这是图标的集合，通过把所有的图标放在一起，减少了HTTP请求次数，从而起到优化作用。Mapbox肯定很精通这种方式。既然是集合图片，获取其中的某一个图片，自然就需要坐标位置，图片大小等信息，为此不难猜测sprite.json里面存储的是什么信息了。在浏览器端获取在线png及json代码。

由于图片比较多，暂且放置一部分内容在上面。通过上面的内容可以看出，基本和我们猜想的一样。既然Mapbox GL JS采用这种方式加载图标，那么我们准守这种约定，在本地提供图标合集和信息，基本上也能解决问题。所以我们大胆的尝试一下修改sprite为本地路径： "sprite": "./"，修改之后测试一下，发现请求的地址确实变成本地的了：http://127.0.0.1:3209/.json, http://127.0.0.1:3209/.png。我们还需要取一个名字，比如这样设置，"sprite": "./sprite"。在本地准备好sprite.png和sprite.json这两个文件就好了。

主要参考https://www.jianshu.com/p/693f38ec5730

1. 字体本地化（glyphs）
下载源码node-fontnik-release

wget https://github.com/mapbox/node-fontnik/archive/v0.5.0.tar.gz

安装

#解压缩

tar -xzf v0.5.0.tar.gz

cd node-fontnik-0.5.0

#安装库文件

#这个必须执行到，未执行需要卸载重装，需要curl

apt-get install curl

#一定要使用全局代理运行

./install_mason.sh

#安装node相关

npm install

#编译

make

使用

准备需要转换字体的ttf文件，这里使用微软雅黑 msyh.ttf
编写需要转换使用的js convert.js

var fontnik = require('.');var fs = require('fs');var path = require('path');

var convert = function(fileName, outputDir) {

var font = fs.readFileSync(path.resolve(__dirname + "/" + fileName));

output2pbf(font, 0, 255, outputDir);}

function output2pbf(font, start, end, outputDir) {

if (start > 65535) {

console.log("done!");

return;

}

fontnik.range({font: font, start: start, end: end}, function(err, res) {

var outputFilePath = path.resolve(

__dirname + "/" + outputDir + "/" + start + "-" + end + ".pbf");

fs.writeFile(outputFilePath, res, function(err){

if(err) {

console.error(err);

} else {

output2pbf(font, end+1, end+1+255, outputDir);

}

});

});}

convert("./msyh.ttf", "./msyh");

编写需要转换使用的js convert.js
将msyh.ttf 和convert.js 复制到node-fontnik-0.5.0路径下（按最后一行代码，建立msyh文件夹）
运行js转换文字，出现 done! 则为转换成功。
转换结果为XX-YY.pbf的字体文件夹
1. 前端调用

style.json与icons文件夹是MapBox Studio配图后下载的样式文件

注意：mapbox 默认请求Open Sans Regular,Arial Unicode MS Regular两种字体，实际上本次配图只用到了Open Sans Regular字体，为了规避前端字体报错，此次将文件夹命名为“Open Sans Regular,Arial Unicode MS Regular”，另：参考https://blog.csdn.net/qq_17451827/article/details/76348875中内容，是要在代码中指定请求字体，但是需要在每个标注图层的Layout对象中添加下图代码，此处用“text-font”:[“Open Sans Regular”]尝试成功。