临时提交

web/src/views/common/MapComponent.vue

@@ -11,6 +11,7 @@ import XYZ from 'ol/source/XYZ'
 import VectorSource from 'ol/source/Vector'
 import Tile from 'ol/layer/Tile'
 import VectorLayer from 'ol/layer/Vector'
+import LayerGroup from 'ol/layer/Group'
 import Style from 'ol/style/Style'
 import Stroke from 'ol/style/Stroke'
 import Icon from 'ol/style/Icon'
@@ -259,10 +260,18 @@ export default {
      * @param option
      */
     addPointLayer(data, clickEvent, option) {
+      if (data.length > 0) {
+        let vectorLayer = this.createPointLayer(data, clickEvent, option)
+        olMap.addLayer(vectorLayer)
+        return vectorLayer
+      }
+    },
+    createPointLayer(data, clickEvent, option){
       if (data.length > 0) {
         const features = []
         let maxZoom = (option && option.maxZoom) ? option.maxZoom : olMap.getView().getMaxZoom()
         let minZoom = (option && option.minZoom) ? option.minZoom : olMap.getView().getMinZoom()
+        let declutter = option && option.declutter
 
         for (let i = 0; i < data.length; i++) {
           const feature = new Feature(new Point(fromLonLat(data[i].position)))
@@ -283,12 +292,11 @@ export default {
         const vectorLayer = new VectorLayer({
           source: source,
           renderMode: 'image',
-          declutter: false,
+          declutter: declutter,
           maxZoom: maxZoom,
           minZoom: minZoom
         })
-        olMap.addLayer(vectorLayer)
+        if (clickEvent && typeof clickEvent === 'function') {
-        if (typeof clickEvent === 'function') {
           vectorLayer.on('click', (event) => {
 
             if (event.features.length > 0) {
@@ -329,8 +337,26 @@ export default {
       }
       return layer
     },
-    addPointLayerGroup(data, clickEvent, option) {
+    addPointLayerGroup(data, clickEvent) {
 
+      let keys = Array.from(data.keys())
+
+      let layers = []
+      for (let i = 0; i < keys.length; i++) {
+        let zoom = keys[i]
+        console.log(zoom)
+        let vectorLayer = this.createPointLayer(data.get(zoom), clickEvent, {
+          minZoom : zoom
+        })
+        if (vectorLayer) {
+          layers.push(vectorLayer)
+        }
+      }
+      let groupLayer = new LayerGroup({
+        layers: layers
+      })
+      olMap.addLayer(groupLayer)
+      return groupLayer
     },
     updatePointLayerGroup(layer, data, postponement) {
 

web/src/views/map/index.vue

@@ -24,10 +24,10 @@
                 <span v-if="layerStyle !== 3">抽稀图层</span>
                 <span v-if="layerStyle === 3" style="color: rgb(64, 158, 255);">抽稀图层</span>
               </el-dropdown-item>
-              <el-dropdown-item :command="4">
+<!--              <el-dropdown-item :command="4">-->
-                <span v-if="layerStyle !== 4">聚合图层</span>
+<!--                <span v-if="layerStyle !== 4">聚合图层</span>-->
-                <span v-if="layerStyle === 4" style="color: rgb(64, 158, 255);">聚合图层</span>
+<!--                <span v-if="layerStyle === 4" style="color: rgb(64, 158, 255);">聚合图层</span>-->
-              </el-dropdown-item>
+<!--              </el-dropdown-item>-->
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -291,14 +291,12 @@ export default {
     },
     changeLayerStyle: function (index) {
       this.layerStyle = index
+      this.$refs.mapComponent.removeLayer(this.channelLayer)
+      this.channelLayer = null
+      this.updateChannelLayer()
     },
     updateChannelLayer: function() {
-      if (this.layerStyle === 3) {
+      let clientEvent = data => {
-        // 按图层展示结果
-        if (this.channelLayer) {
-          this.channelLayer = this.$refs.mapComponent.updatePointLayerGroup(this.channelLayer, cameraList, true)
-        }else {
-          this.channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraList, data => {
         this.closeInfoBox()
         this.$nextTick(() => {
           if (data[0].edit) {
@@ -307,25 +305,40 @@ export default {
             this.showChannelInfo(data[0])
           }
         })
-          })
       }
-      }else {
+
+      switch (this.layerStyle) {
+        case 1:
+          // 直接展示
           if (this.channelLayer) {
             this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, cameraList, true)
           }else {
-          this.channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, data => {
+            this.channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, null)
-            this.closeInfoBox()
+          }
-            this.$nextTick(() => {
+          break
-              if (data[0].edit) {
+        case 2:
-                this.showEditInfo(data[0])
+          // 碰撞检测
+          if (this.channelLayer) {
+            this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, cameraList, true)
           }else {
-                this.showChannelInfo(data[0])
+            this.channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, {
-              }
+              declutter: true
-            })
             })
           }
+          break
+        case 3:
+          // 抽稀图层
+          if (this.channelLayer) {
+            this.channelLayer = this.$refs.mapComponent.updatePointLayerGroup(this.channelLayer, cameraListForLevelMap, true)
+          }else {
+            this.channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraListForLevelMap, clientEvent)
+          }
+          break
+        // case 4:
+        //   // 聚合图层
+        //
+        //   break
       }
-
     },
     getImageByChannel: function (channel) {
       if (channel.gbStatus === 'ON') {
@@ -488,6 +501,11 @@ export default {
     },
     showDrawThinBox: function(show){
       this.showDrawThin = show
+      if (!show) {
+        this.updateChannelLayer()
+      }else {
+
+      }
     },
     quicklyDrawThin: function (){
       this.drawThin(cameraLayerExtent)
@@ -498,7 +516,9 @@ export default {
       })
     },
     drawThin: function (extent){
-      console.log(cameraListForSource.length)
+      let layerGroupSource = new Map()
+
+      this.$refs.mapComponent.removeLayer(this.channelLayer)
       let cameraListInExtent = []
       let cameraListOutExtent = []
       if (!extent) {
@@ -564,7 +584,8 @@ export default {
 
         let cameraArray = Array.from(cameraMapForZoom.values())
         zoomCameraMap.set(zoom, cameraArray)
-        this.addZoomLayer(cameraArray, zoom)
+        let layerSource = this.createZoomLayerSource(cameraArray)
+        layerGroupSource.set(zoom - 1, layerSource)
         zoom += 1
       }
       let cameraArray = []
@@ -575,15 +596,25 @@ export default {
         }
         cameraArray.push(value)
       }
-      this.addZoomLayer(cameraArray, zoomExtent[1])
+      let layerSource = this.createZoomLayerSource(cameraArray)
+      layerGroupSource.set(zoomExtent[1] - 1, layerSource)
       if (cameraListOutExtent.length > 0) {
-        console.log("cameraListOutExtent --  " + cameraListOutExtent.length)
+        let layerSourceForOutExtent = this.createZoomLayerSource(cameraListOutExtent, zoomExtent[0])
-        this.addZoomLayer(cameraListOutExtent, zoomExtent[0])
+        layerGroupSource.set(zoomExtent[0] - 1, layerSourceForOutExtent)
       }
+      this.$refs.mapComponent.addPointLayerGroup(layerGroupSource, data => {
+        this.closeInfoBox()
+        this.$nextTick(() => {
+          if (data[0].edit) {
+            this.showEditInfo(data[0])
+          }else {
+            this.showChannelInfo(data[0])
+          }
+        })
+      })
     },
 
-    addZoomLayer(cameraArray, zoom) {
+    createZoomLayerSource(cameraArray) {
-      console.log(zoom + ' ===== ' + cameraArray.length)
       let dataArray = []
       for (let i = 0; i < cameraArray.length; i++) {
         let item = cameraArray[i]
@@ -598,11 +629,7 @@ export default {
           }
         })
       }
-      this.$refs.mapComponent.addPointLayer(dataArray, data => {
+     return dataArray
-
-      }, {
-        minZoom: zoom - 1
-      })
     },
     saveDrawThin: function(){