leaflet实现点聚合

最新推荐文章于 2024-02-06 10:56:45 发布

).(

最新推荐文章于 2024-02-06 10:56:45 发布

阅读量600

点赞数 1

分类专栏： leaflet 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43493113/article/details/130923902

版权

leaflet 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用leaflet地图实现点聚合

引入插件

"leaflet.markercluster": "^1.5.3",

在 .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] });
	  }
},