贴个群号
WebGIS学习交流群461555818,欢迎大家。
mapbox
map.addSource('vector', { //此处的vector是我们的source的id
type: 'vector', // 此处vector即为矢量瓦片的类型
tiles: [
'你的地址,地址末尾应该是这样的{z}/{x}/{y}.vector.pbf'
],
tileSize: 512
})
map.addLayer({
id: "layer",
paint: { //此处为图层的设置,你需要自己配你自己的,我这里对数据分层设色了
"fill-color":["step",["to-number",["get","pop"]],"#e3f2fd",1000,"#90caf9",3000,"#42a5f5",5000,"#039be5",7000,"#1565c0"],
'fill-opacity': 1,
'fill-outline-color': "#ff7043"
},
layout: {
visibility: 'visible'
},
source: "vector",
'source-layer': "layer", // 矢量瓦片都需要一个source-layer ,需要填图层的名字
type: "fill" // 瓦片类型,我这里是填充的面数据
}
leaflet
<script src="./leaflet/Leaflet.VectorGrid.js"></script>
// 需要一个能加载矢量切片的插件
var DEFAULT_COLOR_SOCIAL_ECONOMY = ['#e3f2fd', '#90caf9', '#42a5f5', '#039be5', '#1565c0'] //我需要分层设色的数组
/**
*
* @desc 加载矢量切片
* @params {String} url 矢量切片地址
*
*/
function addVectorPbf (url, map) {
let vectorGrid = L.vectorGrid.protobuf(url, {
rendererFactory: L.canvas.tile,
layerURL: url,
vectorTileLayerStyles: {
// layer对应于mapbox中source-layer的值
layer: function (property) {
const num = Number(property.pop)
// 根据人口分段
let color = ''
if (num <= 1000) {
color = DEFAULT_COLOR_SOCIAL_ECONOMY[0]
} else if (num > 1000 && num <= 3000) {
color = DEFAULT_COLOR_SOCIAL_ECONOMY[1]
} else if (num > 3000 && num <= 5000) {
color = DEFAULT_COLOR_SOCIAL_ECONOMY[2]
} else if (num > 5000 && num <= 7000) {
color = DEFAULT_COLOR_SOCIAL_ECONOMY[3]
} else {
color = DEFAULT_COLOR_SOCIAL_ECONOMY[4]
}
return {
"weight": 0.3,
"color": '#ff7043',
"fill": true,
"fillColor": color,
"fillOpacity": 1,
"opacity": 1
}
}
},
maxZoom: 20,
interactive: true,
pane: 'overlayPane'
}).addTo(map)
}
addVectorPbf('你的地址,末尾应该是/{z}/{x}/{y}.vector.pbf', map)