聚散

zhsq_qk-ui/src/views/supermap/supermap.vue

@@ -126,7 +126,7 @@ export default {
      * 影像图
      */
     initYxt: async function () {
-      if(this.yxtSlt == 'yxt'){//影像图
+      if (this.yxtSlt == 'yxt') {//影像图
         this.layers.push(this.map_qikaiYingXiang);//汽开影像
       }
       this.initZxd();
@@ -288,45 +288,84 @@ export default {
     //事件落点相关方法
     init: function (options) {
       listForMark().then(response => {
-        let res = response;
-        for (let i = 0; i < res.data.length; i++) {
-          this.addMark(res.data[i]);
-        }
+        // let res = response;
+        // for (let i = 0; i < res.data.length; i++) {
+        this.addMark(response);
+        // }
       });
     },
     addMark: function (options) {
-      let that = this;
-      let marker = "markers" + options.id;
-      marker = L.marker(
-        [options.latitude,options.longitude]
-        ,{
-          icon: L.icon({
-            iconUrl: getIcon(options.buildType),
-            iconAnchor: [50, 50],
-            iconSize: [37, 64],
-            popupAnchor: [-33, -47],
-            shadowSize: [41, 41],
-          })
-        }
-        );
-      /**鼠标悬停打开popup**/
-      marker.on('mouseover', function () {
-        let html = "";
-        html += "<p class='v-p-color'>摄像头名称：" + options.cameraName + "</p>";
-        html += "<p class='v-p-color'>摄像头类型：" + options.buildTypeName + "</p>";
-        html += "<p class='v-p-color'>所属派出所：" + options.policeName + "</p>";
-        this.bindPopup(html).openPopup(this.getLatLng());
-      });
-      // /**鼠标移开关闭popup**/
-      marker.on('mouseout', function () {
-        this.closePopup();
+      //创建聚散图层并添加layers
+      let marker = [];
+      let resultLayer = L.markerClusterGroup({
+        showCoverageOnHover: true,
+        zoomToBoundsOnClick: true,
+        animateAddingMarkers: true,
+        spiderfyOnMaxZoom: true
       });
+      options.data.forEach(e => {
+        var lat = e.latitude;
+        var lon = e.longitude;
+        var buildType = e.buildType;
+        var markpoint = e.markpoint;
+        var myIcon = L.icon({
+          iconUrl: getIcon(buildType),
+          iconAnchor: [50, 50],
+          iconSize: [37, 64],
+          popupAnchor: [-33, -47],
+          shadowSize: [41, 41],
+        });
+        marker = L.marker([lat, lon], {
+          icon: myIcon
+        });
+        marker.bindPopup(markpoint);
+        resultLayer.addLayer(marker);
+        /**鼠标悬停打开popup**/
+        marker.on('mouseover', function () {
+          let html = "";
+          html += "<p class='v-p-color'>摄像头名称：" + e.cameraName + "</p>";
+          html += "<p class='v-p-color'>摄像头类型：" + e.buildTypeName + "</p>";
+          html += "<p class='v-p-color'>所属派出所：" + e.policeName + "</p>";
+          this.bindPopup(html).openPopup(this.getLatLng());
+        });
+        // /**鼠标移开关闭popup**/
+        marker.on('mouseout', function () {
+          this.closePopup();
+        });
+      })
+
+      // marker = L.marker(
+      //   [options.latitude,options.longitude]
+      //   ,{
+      //     icon: L.icon({
+      //       iconUrl: getIcon(options.buildType),
+      //       iconAnchor: [50, 50],
+      //       iconSize: [37, 64],
+      //       popupAnchor: [-33, -47],
+      //       shadowSize: [41, 41],
+      //     })
+      //   }
+      //   );
+      // /**鼠标悬停打开popup**/
+      // marker.on('mouseover', function () {
+      //   let html = "";
+      //   html += "<p class='v-p-color'>摄像头名称：" + val.cameraName + "</p>";
+      //   html += "<p class='v-p-color'>摄像头类型：" + val.buildTypeName + "</p>";
+      //   html += "<p class='v-p-color'>所属派出所：" + val.policeName + "</p>";
+      //   this.bindPopup(html).openPopup(this.getLatLng());
+      // });
+      // // /**鼠标移开关闭popup**/
+      // marker.on('mouseout', function () {
+      //   this.closePopup();
+      // });
       // marker.on('click', function () {
       //   getEventDetail(options.eventId).then(response => {
       //     that.$emit('child-event', response);
       //   });
       // });
-      marker.addTo(that.map);
+      // marker.addTo(this.map);
+
+      resultLayer.addTo(this.map)
     },
   }
 }