mapbox和leaflet给地图添加矢量切片_mapbox矢量切片工具

贴个群号

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"  // 瓦片类型，我这里是填充的面数据
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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)
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

结果