优化地图信息窗口逻辑，修复拉流代理播放

2025-10-27 19:02:57 +08:00
parent a2e3738509
commit 08206ca824
16 changed files with 466 additions and 535 deletions
--- a/web/src/views/common/DeviceTree.vue
+++ b/web/src/views/common/DeviceTree.vue
@@ -72,7 +72,7 @@ export default {
  },
  data() {
    return {
-      showRegion: true,
+      showRegion: false,
      defaultProps: {
        children: 'children',
        label: 'name',
@@ -149,7 +149,6 @@ export default {
      }
    },
    refresh: function(id) {
-      console.log(id)
      if (this.showRegion) {
        this.$refs.regionTree.refresh(id)
      }else {
--- a/web/src/views/common/GroupTree.vue
+++ b/web/src/views/common/GroupTree.vue
@@ -73,7 +73,7 @@
    </div>
    <div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
      <ul v-if="groupList.length > 0" style="list-style: none; margin: 0; padding: 10px">
-        <li v-for="item in groupList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)">
+        <li v-for="item in groupList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)" >
          <span
            v-if="chooseId !== item.deviceId"
            style="color: #409EFF; font-size: 20px"
@@ -92,7 +92,7 @@
      </ul>

      <ul v-if="channelList.length > 0" style="list-style: none; margin: 0; padding: 10px; overflow: auto">
-        <li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)">
+        <li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)" @contextmenu.prevent="contextmenuEventHandlerForLi($event, item)">
          <span
            v-if="item.gbStatus === 'ON'"
            style="color: #409EFF; font-size: 20px"
@@ -234,116 +234,119 @@ export default {
      this.$forceUpdate()
    },
    contextmenuEventHandler: function(event, data, node, element) {
+
      if (!this.edit && !this.contextmenu) {
        return
      }
      const allMenuItem = []
-      if (node.data.type === 0) {
-        if (this.edit) {
-          const menuItem = [
-            {
-              label: '刷新节点',
-              icon: 'el-icon-refresh',
-              disabled: false,
-              onClick: () => {
-                this.refreshNode(node)
-              }
-            },
-            {
-              label: '新建节点',
-              icon: 'el-icon-plus',
-              disabled: false,
-              onClick: () => {
-                this.addGroup(data.id, node)
-              }
-            },
-            {
-              label: '编辑节点',
-              icon: 'el-icon-edit',
-              disabled: node.level === 1,
-              onClick: () => {
-                this.editGroup(data, node)
-              }
-            },
-            {
-              label: '删除节点',
-              icon: 'el-icon-delete',
-              disabled: node.level === 1,
-              divided: true,
-              onClick: () => {
-                this.$confirm('确定删除?', '提示', {
-                  confirmButtonText: '确定',
-                  cancelButtonText: '取消',
-                  type: 'warning'
-                }).then(() => {
-                  this.removeGroup(data.id, node)
-                }).catch(() => {
+      console.log(2)
+      console.log(node.data.type)
+      if (this.edit && node.data.type === 0) {

-                })
-              }
+        const menuItem = [
+          {
+            label: '刷新节点',
+            icon: 'el-icon-refresh',
+            disabled: false,
+            onClick: () => {
+              this.refreshNode(node)
            }
-          ]
+          },
+          {
+            label: '新建节点',
+            icon: 'el-icon-plus',
+            disabled: false,
+            onClick: () => {
+              this.addGroup(data.id, node)
+            }
+          },
+          {
+            label: '编辑节点',
+            icon: 'el-icon-edit',
+            disabled: node.level === 1,
+            onClick: () => {
+              this.editGroup(data, node)
+            }
+          },
+          {
+            label: '删除节点',
+            icon: 'el-icon-delete',
+            disabled: node.level === 1,
+            divided: true,
+            onClick: () => {
+              this.$confirm('确定删除?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }).then(() => {
+                this.removeGroup(data.id, node)
+              }).catch(() => {

-          if (this.enableAddChannel) {
-            menuItem.push(
-              {
-                label: '添加设备',
-                icon: 'el-icon-plus',
-                disabled: node.level <= 2,
-                onClick: () => {
-                  this.addChannelFormDevice(data.id, node)
-                }
-              }
-            )
-            menuItem.push(
-              {
-                label: '移除设备',
-                icon: 'el-icon-delete',
-                disabled: node.level <= 2,
-                divided: true,
-                onClick: () => {
-                  this.removeChannelFormDevice(data.id, node)
-                }
-              }
-            )
-            menuItem.push(
-              {
-                label: '添加通道',
-                icon: 'el-icon-plus',
-                disabled: node.level <= 2,
-                onClick: () => {
-                  this.addChannel(data.id, node)
-                }
-              }
-            )
-          }
-          allMenuItem.push(...menuItem)
-        }
-        if (this.contextmenu) {
-          for (let i = 0; i < this.contextmenu.length; i++) {
-            let item = this.contextmenu[i]
-            if (item.type === node.data.type) {
-              allMenuItem.push({
-                label: item.label,
-                icon: item.icon,
-                onClick: () => {
-                  item.onClick(event, data, node)
-                }
              })
            }
          }
-        }
-        if (allMenuItem.length === 0) {
-          return
-        }
+        ]

-        this.$contextmenu({
-          items: allMenuItem,
-          event, // 鼠标事件信息
-          customClass: 'custom-class', // 自定义菜单 class
-          zIndex: 3000 // 菜单样式 z-index
-        })
+        if (this.enableAddChannel) {
+          menuItem.push(
+            {
+              label: '添加设备',
+              icon: 'el-icon-plus',
+              disabled: node.level <= 2,
+              onClick: () => {
+                this.addChannelFormDevice(data.id, node)
+              }
+            }
+          )
+          menuItem.push(
+            {
+              label: '移除设备',
+              icon: 'el-icon-delete',
+              disabled: node.level <= 2,
+              divided: true,
+              onClick: () => {
+                this.removeChannelFormDevice(data.id, node)
+              }
+            }
+          )
+          menuItem.push(
+            {
+              label: '添加通道',
+              icon: 'el-icon-plus',
+              disabled: node.level <= 2,
+              onClick: () => {
+                this.addChannel(data.id, node)
+              }
+            }
+          )
+        }
+        allMenuItem.push(...menuItem)
      }
+      if (this.contextmenu && node.data.type === 1) {
+        console.log(this.contextmenu)
+        for (let i = 0; i < this.contextmenu.length; i++) {
+          let item = this.contextmenu[i]
+          if (item.type === node.data.type) {
+            allMenuItem.push({
+              label: item.label,
+              icon: item.icon,
+              onClick: () => {
+                item.onClick(event, data, node)
+              }
+            })
+          }
+        }
+      }
+      if (allMenuItem.length === 0) {
+        return
+      }
+
+      this.$contextmenu({
+        items: allMenuItem,
+        event, // 鼠标事件信息
+        customClass: 'custom-class', // 自定义菜单 class
+        zIndex: 3000 // 菜单样式 z-index
+      })

      return false
    },
@@ -458,8 +461,6 @@ export default {
      })
    },
    groupSync: function() {
-
-
      this.groupSyncLoading = true
      this.$store.dispatch('group/sync').then(data => {
        this.$message.success({
@@ -472,24 +473,40 @@ export default {
      }).finally(() => {
        this.groupSyncLoading = false
      })
+    },
+    contextmenuEventHandlerForLi(event, data) {
+      console.log(data)
+      const allMenuItem = []
+      if (this.contextmenu) {
+        for (let i = 0; i < this.contextmenu.length; i++) {
+          let item = this.contextmenu[i]
+          allMenuItem.push({
+            label: item.label,
+            icon: item.icon,
+            onClick: () => {
+              item.onClick(event, {
+                id: data.gbId
+              })
+            }
+          })
+        }
+      }
+      if (allMenuItem.length === 0) {
+        return
+      }
+
+      this.$contextmenu({
+        items: allMenuItem,
+        event, // 鼠标事件信息
+        customClass: 'custom-class', // 自定义菜单 class
+        zIndex: 3000 // 菜单样式 z-index
+      })
    }
  }
 }
 </script>

-<style>
-.device-tree-main-box {
-  text-align: left;
-}
-
-.device-online {
-  color: #252525;
-}
-
-.device-offline {
-  color: #727272;
-}
-
+<style scoped>
 .custom-tree-node .el-radio__label {
  padding-left: 4px !important;
 }
@@ -502,4 +519,12 @@ export default {
  height: 100%;
  overflow-x: auto;
 }
+.channel-list-li {
+  height: 40px;
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  margin-bottom: 10px;
+}
 </style>
--- a/web/src/views/common/MapComponent.vue
+++ b/web/src/views/common/MapComponent.vue
@@ -254,7 +254,7 @@ export default {
      if (overlay) {
        olMap.removeOverlay(overlay)
      }
-      var element = document.getElementById(id)
+      let element = document.getElementById(id)
      if (element) {
        element.remove()
      }
@@ -278,82 +278,73 @@ export default {
     * @param option
     */
    addPointLayer(data, clickEvent, option) {
-      if (data.length > 0) {
-        let vectorLayer = this.createPointLayer(data, clickEvent, option)
-        olMap.addLayer(vectorLayer)
-        return vectorLayer
-      }
+      let vectorLayer = this.createPointLayer(data, clickEvent, option)
+      olMap.addLayer(vectorLayer)
+      return vectorLayer
    },
    createPointLayer(data, clickEvent, option){
+      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
      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)))
          feature.setId(data[i].id)
          feature.customData = data[i].data
          feature.setProperties({
-            status: data[i].status,
+            status: data[i].status
          })
-          // const style = new Style()
-          // style.setImage(new Icon({
-          //   anchor: data[i].image.anchor,
-          //   crossOrigin: 'Anonymous',
-          //   src: data[i].image.src,
-          //   opacity: 1
-          // }))
-          // feature.setStyle(style)
          features.push(feature)
        }
-        const source = new VectorSource()
+      }
+      const source = new VectorSource()
+      if (features.length > 0) {
        source.addFeatures(features)
-        const vectorLayer = new WebGLVectorLayer({
-          source: source,
-          maxZoom: maxZoom,
-          minZoom: minZoom,
-          style: {
-            // 必须提供 style 配置，可以是对象或函数
-            // 'circle-radius': 10,
-            // 'circle-fill-color': 'red',
-            // 'circle-stroke-color': 'white',
-            // 'circle-stroke-width': 0.5
-            'icon-src': 'static/images/gis/sprite.png',
-            'icon-width': 120,
-            'icon-height': 40,
-            'icon-size': [40, 40],
-            'icon-anchor': [0.5, 1],
-            'icon-offset-origin': 'bottom-left',
-            'icon-offset': [
-              'match',
-              ['get', 'status'],
-              'ON',
-              [0, 0],
-              'OFF',
-              [40, 0],
-              'checked',
-              [80, 0],
-              [120, 60]
-            ]
+      }
+      const vectorLayer = new WebGLVectorLayer({
+        source: source,
+        maxZoom: maxZoom,
+        minZoom: minZoom,
+        style: {
+          // 必须提供 style 配置，可以是对象或函数
+          // 'circle-radius': 10,
+          // 'circle-fill-color': 'red',
+          // 'circle-stroke-color': 'white',
+          // 'circle-stroke-width': 0.5
+          'icon-src': 'static/images/gis/sprite.png',
+          'icon-width': 120,
+          'icon-height': 40,
+          'icon-size': [40, 40],
+          'icon-anchor': [0.5, 1],
+          'icon-offset-origin': 'bottom-left',
+          'icon-offset': [
+            'match',
+            ['get', 'status'],
+            'ON',
+            [0, 0],
+            'OFF',
+            [40, 0],
+            'checked',
+            [80, 0],
+            [120, 60]
+          ]
+        }
+      })
+      if (clickEvent && typeof clickEvent === 'function') {
+        vectorLayer.on('click', (event) => {
+
+          if (event.features.length > 0) {
+            const items = []
+            for (let i = 0; i < event.features.length; i++) {
+              items.push(event.features[i].customData)
+            }
+            clickEvent(items)
          }
        })
-        if (clickEvent && typeof clickEvent === 'function') {
-          vectorLayer.on('click', (event) => {
-
-            if (event.features.length > 0) {
-              const items = []
-              for (let i = 0; i < event.features.length; i++) {
-                items.push(event.features[i].customData)
-              }
-              clickEvent(items)
-            }
-          })
-        }
-
-        return vectorLayer
      }
+      return vectorLayer
+
    },
    createPointLayer2(data, clickEvent, option){
      if (data.length > 0) {
@@ -401,20 +392,44 @@ export default {
        return vectorLayer
      }
    },
+    hasFeature (layer, id) {
+      if (layer instanceof LayerGroup) {
+        // 目前LayerGroup的情况肯定含有这个
+        return true
+      }else {
+        if (layer.getSource().getFeatureById(id)) {
+          return true
+        }
+      }
+      return false
+    },
+    addFeature (layer, data) {
+
+      const feature = new Feature(new Point(fromLonLat(data.position)))
+      feature.setId(data.id)
+      feature.customData = data.data
+      feature.setProperties({
+        status: data.status
+      })
+      layer.getSource().addFeature(feature)
+    },
    updatePointLayer(layer, data, postponement) {
      layer.getSource().clear(true)
+      if (!data || data.length == 0) {
+        return
+      }
      const features = []
      for (let i = 0; i < data.length; i++) {
        const feature = new Feature(new Point(fromLonLat(data[i].position)))
        feature.setId(data[i].id)
        feature.customData = data[i].data
-        const cloneStyle = new Style()
-        cloneStyle.setImage(new Icon({
-          anchor: data[i].image.anchor,
-          crossOrigin: 'Anonymous',
-          src: data[i].image.src
-        }))
-        feature.setStyle(cloneStyle)
+        // const cloneStyle = new Style()
+        // cloneStyle.setImage(new Icon({
+        //   anchor: data[i].image.anchor,
+        //   crossOrigin: 'Anonymous',
+        //   src: data[i].image.src
+        // }))
+        // feature.setStyle(cloneStyle)
        features.push(feature)
      }
      layer.getSource().addFeatures(features)
@@ -437,6 +452,7 @@ export default {
        let vectorLayer = this.createPointLayer(data.get(zoom), clickEvent, {
          minZoom : zoom
        })
+        vectorLayer.setProperties('layerId', zoom)
        if (vectorLayer) {
          layers.push(vectorLayer)
        }
@@ -454,6 +470,9 @@ export default {
    removeLayer(layer) {
      olMap.removeLayer(layer)
    },
+    clearLayer(layer) {
+      layer.getSource().clear(true)
+    },
    setFeatureImageById(layer, featureId, image) {
      let feature = layer.getSource().getFeatureById(featureId)
      if (!feature) {
@@ -470,6 +489,11 @@ export default {
      olMap.render()
    },
    setFeaturePositionById(layer, featureId, data) {
+      if (layer instanceof LayerGroup) {
+
+      }else {
+
+      }
      let featureOld = layer.getSource().getFeatureById(featureId)
      if (featureOld) {
        layer.getSource().removeFeature(featureOld)
--- a/web/src/views/common/RegionTree.vue
+++ b/web/src/views/common/RegionTree.vue
@@ -86,7 +86,7 @@
      </ul>

      <ul v-if="channelList.length > 0" style="list-style: none; margin: 0; padding: 10px; overflow: auto">
-        <li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)">
+        <li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)" @contextmenu.prevent="contextmenuEventHandlerForLi($event, item)">
          <span
            v-if="item.gbStatus === 'ON'"
            style="color: #409EFF; font-size: 20px"
@@ -236,89 +236,86 @@ export default {
        return
      }
      const allMenuItem = []
-      if (node.data.type === 0) {
-        if (this.edit) {
+      if (this.edit && node.data.type === 0) {
+        const menuItem = [
+          {
+            label: '刷新节点',
+            icon: 'el-icon-refresh',
+            disabled: false,
+            onClick: () => {
+              this.refreshNode(node)
+            }
+          },
+          {
+            label: '新建节点',
+            icon: 'el-icon-plus',
+            disabled: false,
+            onClick: () => {
+              this.addRegion(data.id, node)
+            }
+          },
+          {
+            label: '编辑节点',
+            icon: 'el-icon-edit',
+            disabled: node.level === 1,
+            onClick: () => {
+              this.editCatalog(data, node)
+            }
+          },
+          {
+            label: '删除节点',
+            icon: 'el-icon-delete',
+            disabled: node.level === 1,
+            divided: true,
+            onClick: () => {
+              this.$confirm('确定删除?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }).then(() => {
+                this.removeRegion(data.id, node)
+              }).catch(() => {

-          const menuItem = [
+              })
+            }
+          }
+        ]
+        if (this.enableAddChannel) {
+          menuItem.push(
            {
-              label: '刷新节点',
-              icon: 'el-icon-refresh',
-              disabled: false,
-              onClick: () => {
-                this.refreshNode(node)
-              }
-            },
-            {
-              label: '新建节点',
+              label: '添加设备',
              icon: 'el-icon-plus',
-              disabled: false,
-              onClick: () => {
-                this.addRegion(data.id, node)
-              }
-            },
-            {
-              label: '编辑节点',
-              icon: 'el-icon-edit',
              disabled: node.level === 1,
              onClick: () => {
-                this.editCatalog(data, node)
+                this.addChannelFormDevice(data.id, node)
              }
-            },
+            }
+          )
+          menuItem.push(
            {
-              label: '删除节点',
+              label: '移除设备',
              icon: 'el-icon-delete',
              disabled: node.level === 1,
              divided: true,
              onClick: () => {
-                this.$confirm('确定删除?', '提示', {
-                  confirmButtonText: '确定',
-                  cancelButtonText: '取消',
-                  type: 'warning'
-                }).then(() => {
-                  this.removeRegion(data.id, node)
-                }).catch(() => {
-
-                })
+                this.removeChannelFormDevice(data.id, node)
              }
            }
-          ]
-          if (this.enableAddChannel) {
-            menuItem.push(
-              {
-                label: '添加设备',
-                icon: 'el-icon-plus',
-                disabled: node.level === 1,
-                onClick: () => {
-                  this.addChannelFormDevice(data.id, node)
-                }
+          )
+          menuItem.push(
+            {
+              label: '添加通道',
+              icon: 'el-icon-plus',
+              disabled: node.level === 1,
+              onClick: () => {
+                this.addChannel(data.id, node)
              }
-            )
-            menuItem.push(
-              {
-                label: '移除设备',
-                icon: 'el-icon-delete',
-                disabled: node.level === 1,
-                divided: true,
-                onClick: () => {
-                  this.removeChannelFormDevice(data.id, node)
-                }
-              }
-            )
-            menuItem.push(
-              {
-                label: '添加通道',
-                icon: 'el-icon-plus',
-                disabled: node.level === 1,
-                onClick: () => {
-                  this.addChannel(data.id, node)
-                }
-              }
-            )
-          }
-          allMenuItem.push(...menuItem)
+            }
+          )
        }
+        allMenuItem.push(...menuItem)
      }
-      if (this.contextmenu) {
+      if (this.contextmenu && node.data.type === 1) {
        for (let i = 0; i < this.contextmenu.length; i++) {
          let item = this.contextmenu[i]
          if (item.type === node.data.type) {
@@ -457,34 +454,45 @@ export default {
        leaf: true,
        id: data.gbId
      })
+    },
+    contextmenuEventHandlerForLi(event, data) {
+      console.log(data)
+      const allMenuItem = []
+      if (this.contextmenu) {
+        for (let i = 0; i < this.contextmenu.length; i++) {
+          let item = this.contextmenu[i]
+          allMenuItem.push({
+            label: item.label,
+            icon: item.icon,
+            onClick: () => {
+              item.onClick(event, {
+                id: data.gbId
+              })
+            }
+          })
+        }
+      }
+      if (allMenuItem.length === 0) {
+        return
+      }
+
+      this.$contextmenu({
+        items: allMenuItem,
+        event, // 鼠标事件信息
+        customClass: 'custom-class', // 自定义菜单 class
+        zIndex: 3000 // 菜单样式 z-index
+      })
    }
  }
 }
 </script>

-<style>
-.device-tree-main-box {
-  text-align: left;
-}
-
-.device-online {
-  color: #252525;
-}
-
-.device-offline {
-  color: #727272;
-}
+<style scoped>

 .custom-tree-node .el-radio__label {
  padding-left: 4px !important;
 }

-.tree-scroll{
-  width: 200px;
-  border: 1px solid #E7E7E7;
-  height: 100%;
-}
-
 .flow-tree {
  overflow: auto;
  padding-top: 10px;
@@ -494,11 +502,11 @@ export default {
  overflow-x: auto;
 }
 .channel-list-li {
-  height: 24px;
+  height: 40px;
  align-items: center;
  cursor: pointer;
  display: grid;
  grid-template-columns: 26px 1fr;
-  margin-bottom: 18px
+  margin-bottom: 10px;
 }
 </style>
--- a/web/src/views/common/jessibuca.vue
+++ b/web/src/views/common/jessibuca.vue
@@ -9,7 +9,7 @@
      <div class="buttons-box-left">
        <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" />
        <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" />
-        <i class="iconfont icon-stop jessibuca-btn" @click="destroy" />
+        <i class="iconfont icon-stop jessibuca-btn" @click="stop" />
        <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()" />
        <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()" />
      </div>
@@ -224,6 +224,15 @@ export default {
      this.err = ''
      this.performance = ''
    },
+    stop: function() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].pause()
+        jessibucaPlayer[this._uid].clearView()
+      }
+      this.playing = false
+      this.err = ''
+      this.performance = ''
+    },
    screenshot: function() {
      if (jessibucaPlayer[this._uid]) {
        jessibucaPlayer[this._uid].screenshot()
--- a/web/src/views/map/index.vue
+++ b/web/src/views/map/index.vue
@@ -46,7 +46,7 @@
          </el-dropdown>
        </div>
        <div class="map-tool-btn-group">
-          <div class="map-tool-btn" @click="initChannelLayer">
+          <div class="map-tool-btn" @click="refreshLayer">
            <i class="iconfont icon-shuaxin3"></i>
          </div>
        </div>
@@ -137,6 +137,7 @@ let cameraListForSource = []
 let cameraList = []
 let cameraListForLevelMap = new Map()
 let cameraLayerExtent = []
+let channelLayer = null
 export default {
  name: 'Map',
  components: {
@@ -153,7 +154,6 @@ export default {
      feature: null,
      device: null,
      infoBoxId: null,
-      channelLayer: null,
      labelStyle: {
        width: '56px'
      },
@@ -168,8 +168,7 @@ export default {
      saveDrawThinLoading: false,
      layerStyle: 0,
      drawThinLayer: null,
-      layerGroupSource: null,
-      infoBoxTempLayer: null
+      layerGroupSource: null
    }
  },
  created() {
@@ -179,87 +178,6 @@ export default {

  },
  methods: {
-    treeChannelClickEvent: function (id) {
-      this.closeInfoBox()
-      this.$store.dispatch('commonChanel/queryOne', id)
-        .then(data => {
-          if (!data.gbLongitude || data.gbLongitude < 0) {
-            return
-          }
-          let zoomExtent = this.$refs.mapComponent.getZoomExtent()
-          this.$refs.mapComponent.panTo([data.gbLongitude, data.gbLatitude], zoomExtent[1], () => {
-            this.showChannelInfo(data)
-          })
-        })
-    },
-    zoomIn: function() {
-      this.$refs.mapComponent.zoomIn()
-    },
-    zoomOut: function() {
-      this.$refs.mapComponent.zoomOut()
-    },
-    getContextmenu: function (event) {
-        return [
-          {
-            label: '播放通道',
-            icon: 'el-icon-video-play',
-            type: 1,
-            onClick: (event, data, node) => {
-              this.$store.dispatch('commonChanel/queryOne', data.id)
-                .then(data => {
-                  this.play(data)
-                })
-            }
-          },
-          {
-            label: '编辑位置',
-            icon: 'el-icon-edit',
-            type: 1,
-            onClick: (event, data, node) => {
-              this.$store.dispatch('commonChanel/queryOne', data.id)
-                .then(data => {
-                  this.edit(data)
-                })
-            }
-          }
-          // ,
-          // {
-          //   label: '轨迹查询',
-          //   icon: 'el-icon-map-location',
-          //   type: 1,
-          //   onClick: (event, data, node) => {
-          //
-          //   }
-          // }
-        ]
-    },
-    showChannelInfo: function(data) {
-      this.channel = data
-      if (this.infoBoxTempLayer) {
-        this.$refs.mapComponent.removeLayer(this.infoBoxTempLayer)
-        this.infoBoxTempLayer = null
-      }
-      if (this.layerStyle === 0 || this.layerStyle === 2) {
-        // 此时增加临时图标
-        let position = [data.gbLongitude, data.gbLatitude]
-        let cameraData = {
-          id: data.gbId,
-          position: position,
-          data: data,
-          status: data.gbStatus,
-          image: {
-            anchor: [0.5, 1],
-            src: this.getImageByChannel(data)
-          }
-        }
-
-        this.infoBoxTempLayer = this.$refs.mapComponent.addPointLayer([cameraData])
-      }
-      let position = [data.gbLongitude, data.gbLatitude]
-      this.infoBoxId = this.$refs.mapComponent.openInfoBox(position, this.$refs.infobox, [0, -50])
-    },
-    zoomChange: function(zoom) {},
-
    initChannelLayer: function () {

      this.mapTileList = this.$refs.mapComponent.mapTileList
@@ -315,6 +233,87 @@ export default {
        this.updateChannelLayer()
      })
    },
+    refreshLayer(){
+      this.closeInfoBox()
+      this.$refs.mapComponent.clearLayer(channelLayer)
+      this.initChannelLayer()
+    },
+    treeChannelClickEvent: function (id) {
+      this.closeInfoBox()
+      this.$store.dispatch('commonChanel/queryOne', id)
+        .then(data => {
+          if (!data.gbLongitude || data.gbLongitude < 0 || !data.gbLatitude || data.gbLatitude < 0) {
+            this.$message.warning({
+              showClose: true,
+              message: '无位置信息'
+            })
+            return
+          }
+          let zoomExtent = this.$refs.mapComponent.getZoomExtent()
+          this.$refs.mapComponent.panTo([data.gbLongitude, data.gbLatitude], zoomExtent[1], () => {
+            this.showChannelInfo(data)
+          })
+        })
+    },
+    zoomIn: function() {
+      this.$refs.mapComponent.zoomIn()
+    },
+    zoomOut: function() {
+      this.$refs.mapComponent.zoomOut()
+    },
+    getContextmenu: function (event) {
+        return [
+          {
+            label: '播放通道',
+            icon: 'el-icon-video-play',
+            type: 1,
+            onClick: (event, data, node) => {
+              console.log(data)
+              this.$store.dispatch('commonChanel/queryOne', data.id)
+                .then(data => {
+                  this.play(data)
+                })
+            }
+          },
+          {
+            label: '编辑位置',
+            icon: 'el-icon-edit',
+            type: 1,
+            onClick: (event, data, node) => {
+              this.$store.dispatch('commonChanel/queryOne', data.id)
+                .then(data => {
+                  this.edit(data)
+                })
+            }
+          }
+          // ,
+          // {
+          //   label: '轨迹查询',
+          //   icon: 'el-icon-map-location',
+          //   type: 1,
+          //   onClick: (event, data, node) => {
+          //
+          //   }
+          // }
+        ]
+    },
+    showChannelInfo: function(data) {
+      this.channel = data
+      // 此时增加临时图标
+      let position = [data.gbLongitude, data.gbLatitude]
+      let cameraData = {
+        id: data.gbId,
+        position: position,
+        data: data,
+        status: data.gbStatus
+      }
+      if (!this.$refs.mapComponent.hasFeature(channelLayer, data.gbId)) {
+        this.$refs.mapComponent.addFeature(channelLayer, cameraData, )
+      }
+      this.infoBoxId = this.$refs.mapComponent.openInfoBox(position, this.$refs.infobox, [0, -50])
+    },
+    zoomChange: function(zoom) {},
+
    changeMapTile: function (index) {
      if (this.showDrawThin) {
        this.$message.warning({
@@ -330,14 +329,11 @@ export default {
        return
      }
      this.layerStyle = index
-      this.$refs.mapComponent.removeLayer(this.channelLayer)
+      this.$refs.mapComponent.removeLayer(channelLayer)
      this.channelLayer = null
      this.updateChannelLayer()
    },
    updateChannelLayer: function() {
-      if (this.layerStyle === 0) {
-        return
-      }
      let clientEvent = data => {
        this.closeInfoBox()
        this.$nextTick(() => {
@@ -350,24 +346,30 @@ export default {
      }

      switch (this.layerStyle) {
+        case 0:
+          channelLayer = this.$refs.mapComponent.addPointLayer([], clientEvent, null)
+          console.log(22222)
+          console.log(channelLayer)
+          break
        case 1:
+
          // 直接展示
-          if (this.channelLayer) {
-            this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, cameraList, true)
+          if (channelLayer) {
+            channelLayer = this.$refs.mapComponent.updatePointLayer(channelLayer, cameraList, true)
          }else {
            console.log(cameraList.length)
            setTimeout(()=>{
-              this.channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, null)
+              channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, null)
            })
          }
          break
        case 2:
          // 碰撞检测
-          if (this.channelLayer) {
-            this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, cameraList, true)
+          if (channelLayer) {
+            channelLayer = this.$refs.mapComponent.updatePointLayer(channelLayer, cameraList, true)
          }else {
            setTimeout(()=>{
-              this.channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, {
+              channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, {
                declutter: true
              })
            })
@@ -375,13 +377,8 @@ export default {
          break
        case 3:
          // 抽稀图层
-          if (this.channelLayer) {
-            this.channelLayer = this.$refs.mapComponent.updatePointLayerGroup(this.channelLayer, cameraListForLevelMap, true)
-          }else {
-            setTimeout(() => {
-              this.channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraListForLevelMap, clientEvent)
-            })
-          }
+          this.$refs.mapComponent.removeLayer(channelLayer)
+          channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraListForLevelMap, clientEvent)
          break
        // case 4:
        //   // 聚合图层
@@ -402,10 +399,6 @@ export default {
      }
      this.channel = null
      this.dragChannel = null
-      if (this.infoBoxTempLayer) {
-        this.$refs.mapComponent.removeLayer(this.infoBoxTempLayer)
-        this.infoBoxTempLayer = null
-      }
    },
    play: function (channel) {
      const loading = this.$loading({
@@ -461,17 +454,12 @@ export default {
      }else {
        this.showEditInfo(channel)
      }
-
      // 标记可编辑图标为红色
-      this.$refs.mapComponent.setFeaturePositionById(this.channelLayer, channel.gbId, {
+      this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
        id: channel.gbId,
        position: position,
        data: channel,
-        status: 'checked',
-        image: {
-          anchor: [0.5, 1],
-          src: 'static/images/gis/camera1-red.png'
-        }
+        status: 'checked'
      })
    },
    showEditInfo: function(data) {
@@ -484,15 +472,11 @@ export default {
      channel.gbLongitude = channel.oldLongitude
      channel.gbLatitude = channel.oldLatitude
      channel['edit'] = false
-      this.$refs.mapComponent.setFeaturePositionById(this.channelLayer, channel.gbId, {
+      this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
        id: channel.gbId,
        position: [channel.gbLongitude, channel.gbLatitude],
        data: channel,
-        status: channel.gbStatus,
-        image: {
-          anchor: [0.5, 1],
-          src: this.getImageByChannel(channel)
-        }
+        status: channel.gbStatus
      })
    },
    submitEdit: function(channel) {
@@ -506,15 +490,12 @@ export default {
          this.closeInfoBox()
          channel['edit'] = false
          this.$refs.mapComponent.dragInteraction.removeFeatureId(channel.gbId)
-          this.$refs.mapComponent.setFeaturePositionById(this.channelLayer, channel.gbId, {
+
+          this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
            id: channel.gbId,
            position: position,
            data: channel,
-            status: channel.gbStatus,
-            image: {
-              anchor: [0.5, 1],
-              src: this.getImageByChannel(channel)
-            }
+            status: channel.gbStatus
          })
          // 刷星树菜单
          this.$refs.deviceTree.refresh('channel' + channel.gbId)
@@ -574,7 +555,7 @@ export default {
    },
    quicklyDrawThin: function (){
      if (this.channelLayer) {
-        this.$refs.mapComponent.removeLayer(this.channelLayer)
+        this.$refs.mapComponent.removeLayer(channelLayer)
      }
      if (this.drawThinLayer !== null) {
        this.$refs.mapComponent.removeLayer(this.drawThinLayer)
@@ -614,8 +595,8 @@ export default {
      this.$refs.mapComponent.startDrawBox((extent) => {

        // 清理默认的摄像头图层
-        if (this.channelLayer) {
-          this.$refs.mapComponent.removeLayer(this.channelLayer)
+        if (channelLayer) {
+          this.$refs.mapComponent.clearLayer(channelLayer)
        }
        this.$message.info({
          showClose: true,
--- a/web/src/views/streamProxy/edit.vue
+++ b/web/src/views/streamProxy/edit.vue
@@ -200,16 +200,7 @@ export default {
    },
    noneReaderHandler: function() {
      console.log(this.streamProxy)
-      if (!this.streamProxy.noneReader || this.streamProxy.noneReader === 0) {
-        this.streamProxy.enableDisableNoneReader = false
-        this.streamProxy.enableRemoveNoneReader = false
-      } else if (this.streamProxy.noneReader === 1) {
-        this.streamProxy.enableDisableNoneReader = true
-        this.streamProxy.enableRemoveNoneReader = false
-      } else if (this.streamProxy.noneReader === 2) {
-        this.streamProxy.enableDisableNoneReader = false
-        this.streamProxy.enableRemoveNoneReader = true
-      }
+      this.streamProxy.enableDisableNoneReader = this.streamProxy.noneReader && this.streamProxy.noneReader === 1
    }
  }
 }