leaflet实现点聚合_leaflet点聚合

使用leaflet地图实现点聚合

• 引入插件

"leaflet.markercluster": "^1.5.3",
1

• 在 .vue页面中使用

// 引入 leaflet.markercluster
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster";

//展示受影响的设备--暂时未用
 getpointFuc(str) {
   let urlString = config.newMapPath;
   let sqlBuffer = "tenant_id = '" + this.tenantId + "' and " + str;
   let param = {
       service: 'WFS',
       version: '2.0.0',
       request: 'GetFeature',
       typeName: `ne:${config.deviceTableName}`,
       propertyName: 'shape,device_name,is_conduit_up,device_code,device_model,device_material,supplier_name,device_addr',
       outputFormat: 'application/json',
       maxFeatures: 100000,
       srsName: 'EPSG:4326',
       startIndex: 0,
       cql_filter: sqlBuffer,
   };
   let u = urlString + L.Util.getParamString(param, urlString);
   this.$http({
       url: u
   }).then(res => {
       //设备数据返回后 处理渲染数据加到图层
       let features = res.data.features
       let markers = L.markerClusterGroup();   //点聚合
       this.customerLayer.addLayer(markers)
       let layers = [];
       for (let i = 0; i < features.length; i++) {
           let a = features[i];
           let deviceIcon = this.getIcon(type, 1);
           let marker = L.marker(new L.LatLng(a.geometry.coordinates[1], a.geometry.coordinates[0]), {
               title: a.properties.name,
               icon: deviceIcon,
           });
           let popupContent = `
               <div class="content-flex">名称：${a.properties.device}</div>
               <div class="content-flex">编码：${a.properties.device}</div>
               <div class="content-flex">型号：${a.properties.device}</div>
               <div class="content-flex">材质：${a.properties.device}</div>
               <div class="content-flex">厂商：${a.properties.device}</div>
               <div class="content-flex">地址：${a.properties.device}</div>`
           marker.bindPopup(popupContent);   //点击显示设备信息
           layers.push(marker)
       }
       markers.addLayers(layers);
   })
},

getIcon(isUp, type) {
	  if (type == 0) {
	      return L.icon({ iconUrl: a[0].q, iconSize: [40, 40] });
	  } else {
	      return L.icon({ iconUrl: a[0].s, iconSize: [40, 40] });
	  }
},
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
49
50
51
52
53
54
55
56
57
58