在Mapbox-gl-js中添加自定义图层
- 前言
- 一、制作geojson地图
- 二、使用Tippecanoe将geojson转换成vector tile(.pbf)文件
- 三、使用mapbox-gl-js显示
- 三、Mapbox-gl-js中根据矢量数据的属性过滤显示
前言
本文说明如何制作自定义的地图数据，并使用mapbox-gl-js进行显示
一、制作geojson地图
如果自定义的地图格式已经是geojson可跳过。
有时自定义数据来源较多，格式不定，此时需要将这些五花八门的格式统一成geojson格式。
可以通过Python脚本写入：
from geojson import Feature, FeatureCollection, LineString, Polygon
import geojson
my_feature = list()
for var_point in marking_shapes:
feature_shape_list.append((var_point.x / 10 ** 8, var_point.y / 10 ** 8))
var_polyline = Feature(geometry=LineString(feature_shape_list, precision=8),
properties = {
"Id" : "marking",
"LineWidth" : var_width,
"LineColor" : var_color,
"LineType" : var_line_type})
my_feature.append(var_polyline)
all_features = FeatureCollection(my_feature)
with open("./marking.json","w") as f:
geojson.dump(all_features, f)
矢量数据就存放到了geojson文件中。
二、使用Tippecanoe将geojson转换成vector tile(.pbf)文件
建立目录test-data/build/geojson和test-data/build/www；
将geojson文件放到geojson文件夹中；
tippecanoe --no-feature-limit --no-tile-size-limit --layer=Marking --minimum-zoom=18 --maximum-zoom=20 --output-to-directory "build/www/tiles-marking" `find ./build/geojson -type f | grep .json`
在www文件夹下将生成level 18 到level 20的基于marking.json地图的分层后的vector tile数据，后缀名为.pbf
（.pbf文件也可以还原成geojson文件）
tippecanoe-decode 396598.pbf 20 862489 396598 > decode.json
格式tippecanoe-decode (pbf path) z x y > (dest path)
三、使用mapbox-gl-js显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Custom Map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.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>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = "pk.eyJ1Ijoia2V2aW4weHUiLCJhIjoiY2tsa3A4dW1mMDVrOTJybzFkc2luMjVhdSJ9.eksQG3G9_SXMvxrDNmB9jQ";
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 13,
center: [114.126732, 40.098578]
});
map.on('load', function () {
map.addSource('Marking', {
"type": 'vector',
"tiles": ["http://192.168.1.66:8080/tiles-marking/{z}/{x}/{y}.pbf"],
"minzoom": 18,
"maxzoom": 20
});
map.addLayer({
"id": "MarkingSolid",
"type": "line",
"source": "Marking",
"source-layer": "Marking",
"paint": {
"line-color": [
"match", ["get", "LineColor"],
1, "#FFFFF0",
2, "#FFB90F",
"#FFB90F"
],
"line-width" : 3,
"line-opacity" : 1,
},
"filter" : ["==", "LineType", 2]
});
map.addLayer({
"id": "MarkingDashed",
"type": "line",
"source": "Marking",
"source-layer": "Marking",
"paint": {
"line-color": [
"match", ["get","LineColor"],
1, "#FFFFF0",
2, "#FFB90F",
"#FFFFFF"
],
"line-width" : 3,
"line-opacity" : 1,
"line-dasharray": [2, 2]
},
"filter" : ["==", "LineType", 1]
});
});
</script>
</body>
</html>
可以使用live-server简易服务器浏览
live-server --port=8080 --middleware="${PWD}/build/gzip.js" --host=192.168.1.66 build/www
三、Mapbox-gl-js中根据矢量数据的属性过滤显示
例如根据属性中的颜色配置对应的显示颜色：
"line-color": ["match", ["get","LineColor"],
1, "#FFFFF0",
2, "#FFB90F",
"#FFFFFF"]
其中”LineColor“为properties中的属性之一，1/2为其属性对应的值枚举，值后紧随其对应的颜色，最后给一个默认值。
也可以过滤掉某一属性的地图数据：
"filter" : ["==", "LineType", 1]
根据marking的类型过滤等于1的marking
本文转自 https://blog.csdn.net/Kevin00Xu/article/details/114287983，如有侵权，请联系删除。