MapBox加载自定义矢量切片
2021-07-30 本文已影响0人
木木111314
加载底图
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
//"sprite": "http://localhost:8080/mapboxTest/sprite",
//"glyphs": "http://localhost:8080/mapboxTest/mapbox本地化/font/{fontstack}/{range}.pbf",
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
],
'tileSize': 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "osm-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
//center: [116.39547280003353, 39.90533832710483],
center: [121.49531000112344, 31.116395398832502],
zoom: 9
});
添加矢量切片数据源
map.addSource('custom-go-vector-tile-source-shanghaitaxi', {
type: 'vector',
'tileSize': 512, scheme: "xyz",
tiles: ['http://127.0.0.1:9008/tileserver/tile/test/shanghaitaxi2/{x}/{y}/{z}']
});
添加图层
根据字段的不同设置不同的颜色
map.addLayer({
"id": "custom-go-vector-tile-layer-shanghaitaxi",
"type": "circle",
"source": "custom-go-vector-tile-source-shanghaitaxi",
"source-layer": "shanghaitaxi2",
"paint": {
'circle-stroke-color': '#000',
'circle-stroke-width': 1,
// 'circle-color': '#FF0000'
"circle-color": [
'case',
['>=', ['get', 'speed'], 80],
'#FF0000',
['<', ['get', 'speed'], 40],
'#ADFF2F',
'#DA70D6',
]
}
});
image.png