修改聚合图标的点击显示消息卡片方式

.idea/workspace.xml

@@ -3,7 +3,8 @@
   <component name="ChangeListManager">
     <list default="true" id="66102da6-d8e2-4f98-976c-45db41c8fbe2" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/mobileBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/mobileBar.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/map.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/map.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/static/js/clusterDisplay.js" beforeDir="false" afterPath="$PROJECT_DIR$/static/js/clusterDisplay.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -38,7 +39,8 @@
       <option name="presentableId" value="Default" />
       <updated>1633693759532</updated>
       <workItem from="1633693760645" duration="5858000" />
-      <workItem from="1634022035080" duration="10793000" />
+      <workItem from="1634022035080" duration="12257000" />
+      <workItem from="1634174841495" duration="9219000" />
     </task>
     <servers />
   </component>

src/components/map.vue

@@ -104,9 +104,6 @@ import phoneCard from './card.vue'
 // slogan
 import slogan from './slogan.vue'
 
-// cluster
-import cluster from '../../static/js/clusterDisplay'
-
 // 地图对象
 // eslint-disable-next-line
 var map = null
@@ -321,9 +318,29 @@ export default {
         })
         targetLayer.setSource(clusterSource)
         let style = (feature) => {
-          let lastFeature = feature.get('features')[feature.get('features').length - 1]
+          let features = feature.get('features')
+          let size = features.length
+          let lastFeature = features[size - 1]
+          let lonArr = []
+          let latArr = []
+          // 存储图标聚合的点的矩形范围
+          if (feature.get('features').length > 1) {
+            for (let i = 0; i < size - 1; i++) {
+              let coordinate = features[i].values_.geometry.flatCoordinates
+              lonArr.push(coordinate[0])
+              latArr.push(coordinate[1])
+            }
+            let maxLon = Math.max(...lonArr)
+            let minLon = Math.min(...lonArr)
+            let maxLat = Math.max(...latArr)
+            let minLat = Math.min(...latArr)
+            let extent = [minLon, minLat, maxLon, maxLat]
+            feature.set('extent', extent)
+          }
           feature.set('id', lastFeature.values_.id)
           feature.set('type', lastFeature.values_.type)
+          feature.set('number', feature.get('features').length)
+
           let style = layerStyle
           return style
         }
@@ -439,9 +456,7 @@ export default {
       // 要素装载入图层
       // 1.起始点
       layer.getSource().addFeature(feature)
-      // if (!isLocate) {
-      //   layer.getSource().addFeature(feature)
-      // }
+
       // 2.关联线
       let fe = null
       if (isRelate && msg.relate) {
@@ -681,24 +696,31 @@ export default {
         if (feature) {
           var id = feature.get('id')
           let type = feature.get('type')
-          let data = null
-          switch (type) {
-            case 'notice':
-              data = await that.loadNoticeByID(id)
-              break
-            case 'report':
-              data = await that.loadReportByID(id)
-              break
-            case 'culture':
-              data = await that.loadCultureByID(id)
-              break
-            case 'other':
-              data = await that.loadOthersByID(id)
-              break
+          let number = feature.get('number')
+          if (number === 1) {
+            let data = null
+            switch (type) {
+              case 'notice':
+                data = await that.loadNoticeByID(id)
+                break
+              case 'report':
+                data = await that.loadReportByID(id)
+                break
+              case 'culture':
+                data = await that.loadCultureByID(id)
+                break
+              case 'other':
+                data = await that.loadOthersByID(id)
+                break
+            }
+            that.printFeature('markLayer', data, type, true, true, true)
+            that.isShow = true
+            bus.$emit('closeList')
+          } else {
+            // 当点击的图标个数大于1时设置视角范围为多个图标的矩形范围
+            let extent = feature.get('extent')
+            map.getView().fit(extent, map.getSize())
           }
-          that.printFeature('markLayer', data, type, true, true, true)
-          that.isShow = true
-          bus.$emit('closeList')
         } else {
           that.closePopup()
         }
@@ -710,10 +732,17 @@ export default {
           return feature
         })
         if (feature) {
-          bus.$emit('printMapMark', {
-            type: feature.get('type'),
-            id: feature.get('id')
-          })
+          let number = feature.get('number')
+          if (number === 1) {
+            bus.$emit('printMapMark', {
+              type: feature.get('type'),
+              id: feature.get('id')
+            })
+          } else {
+            // 当点击的图标个数大于1时设置视角范围为多个图标的矩形范围
+            let extent = feature.get('extent')
+            map.getView().fit(extent, map.getSize())
+          }
         } else {
           that.closePopup()
         }
@@ -917,7 +946,6 @@ export default {
       function onMouseWheel (ev) {
         window.setTimeout(function () {
           let zoom = map.getView().getZoom()
-          console.log('zoom:' + zoom)
           if (zoom > 15.3) {
             that.slogan.isShow = false
           } else {
@@ -942,16 +970,6 @@ export default {
       }
     },
 
-    /**
-     * @description：图层 点聚合
-     */
-    openCluster: function () {
-      cluster.openNoticeLayerCluster(info, map)
-      cluster.openReportLayerCluster(report, map)
-      cluster.openCultureLayerCluster(culture, map)
-      cluster.openOtherLayerCluster(more, map)
-    },
-
     /**
      * @description: eventBus的bus.$on 触发事件汇总
      */
@@ -1065,7 +1083,6 @@ export default {
     this.loadRecentNotices(365)
     this.loadOthers()
     this.loadCulture()
-    this.openCluster()
     this.mapClick()
     this.sloganListener()
   },

static/js/clusterDisplay.js

@@ -2,94 +2,82 @@
 import ol from './ol'
 
 class createCluster {
-    constructor(option, map) {
-        this.layer = null
-        this.flag = false // 用于判断是否有目标图层
-        let layer = map.getLayers()
-        this.map = map
-
-        this.imgUrl = option.imgUrl //图标路径
-        this.layerName = option.layerName // 传入聚合的目标图层的名字
-        this.distance = option.distance || 10//聚合的距离默认30个像素
-
-        for (let i = 0; i < layer.array_.length; i++) {
-            if(layer.array_[i].className_ === this.layerName){
-                this.flag = true
-                this.layer = layer.array_[i]
-            }
-        }
+  constructor (option, map) {
+    this.layer = null
+    this.flag = false // 用于判断是否有目标图层
+    let layer = map.getLayers()
+    this.map = map
+
+    this.imgUrl = option.imgUrl
+    this.layerName = option.layerName // 传入聚合的目标图层的名字
+    this.distance = option.distance || 10
+
+    for (let i = 0; i < layer.array_.length; i++) {
+      if (layer.array_[i].className_ === this.layerName) {
+        this.flag = true
+        this.layer = layer.array_[i]
+      }
     }
-
-    openCluster() {
-        if (this.flag) {
-            let scale = 0.13
-            let features = this.layer.getSource().getFeatures()
-            var source = new ol.source.Vector({
-                features: features
-            });
-            //聚合标注数据源
-            var clusterSource = new ol.source.Cluster({
-                distance: this.distance,               //聚合的距离参数，即当标注间距离小于此值时进行聚合，单位是像素
-                source: source              //聚合的数据源，即矢量要素数据源对象
-            });
-            //加载聚合标注的矢量图层
-            let style = new ol.style.Style({
-                image: new ol.style.Icon({
-                    src: this.imgUrl,
-                    anchor: [0.5, 0.5],
-                    scale: scale,
-
-                })
-            })
-            this.layer.setSource(clusterSource)
-            this.layer.setStyle(style)
-        }
+  }
+
+  openCluster () {
+    if (this.flag) {
+      let scale = 0.13
+      let features = this.layer.getSource().getFeatures()
+      var source = new ol.source.Vector({
+        features: features
+      })
+      var clusterSource = new ol.source.Cluster({
+        distance: this.distance,
+        source: source
+      })
+      let style = new ol.style.Style({
+        image: new ol.style.Icon({
+          src: this.imgUrl,
+          anchor: [0.5, 0.5],
+          scale: scale
+        })
+      })
+      this.layer.setSource(clusterSource)
+      this.layer.setStyle(style)
     }
-
+  }
 }
 
-
-function openNoticeLayerCluster(noticeImgUrl,map) {
-    let cluster = new createCluster({
-        'layerName' : 'noticeLayer',
-        'imgUrl' : noticeImgUrl
-    },map)
-    cluster.openCluster()
+function openNoticeLayerCluster (noticeImgUrl, map) {
+  let cluster = new createCluster ({
+    'layerName': 'noticeLayer',
+    'imgUrl': noticeImgUrl
+  }, map)
+  cluster.openCluster()
 }
 
-function openReportLayerCluster(reportImgUrl,map) {
-    let cluster = new createCluster({
-        'layerName' : 'reportLayer',
-        'imgUrl' : reportImgUrl
-    },map)
-    cluster.openCluster()
+function openReportLayerCluster (reportImgUrl, map) {
+  let cluster = new createCluster ({
+    'layerName': 'reportLayer',
+    'imgUrl': reportImgUrl
+  }, map)
+  cluster.openCluster()
 
 }
 
-function openCultureLayerCluster(cultureImgUrl,map) {
-    let cluster = new createCluster({
-        'layerName' : 'cultureLayer',
-        'imgUrl' : cultureImgUrl
-    },map)
-    cluster.openCluster()
-
+function openCultureLayerCluster (cultureImgUrl, map) {
+  let cluster = new createCluster({
+    'layerName': 'cultureLayer',
+    'imgUrl': cultureImgUrl
+  }, map)
+  cluster.openCluster()
 }
 
-function openOtherLayerCluster(otherImgUrl,map) {
-    let cluster = new createCluster({
-        'layerName' : 'otherLayer',
-        'imgUrl' : otherImgUrl
-    },map)
-    cluster.openCluster()
-
+function openOtherLayerCluster (otherImgUrl, map) {
+  let cluster = new createCluster ({
+    'layerName': 'otherLayer',
+    'imgUrl': otherImgUrl
+  }, map)
+  cluster.openCluster()
 }
 
-export default {openNoticeLayerCluster,openReportLayerCluster,openCultureLayerCluster,openOtherLayerCluster}
-
-
-
-
-
+export default {openNoticeLayerCluster, openReportLayerCluster, openCultureLayerCluster, openOtherLayerCluster}