临时提交

web/src/views/common/MapComponent.vue

@@ -12,6 +12,7 @@ import Tile from 'ol/layer/Tile'
 import VectorLayer from 'ol/layer/Vector'
 import LayerGroup from 'ol/layer/Group'
 import WebGLPointslayer from 'ol/layer/WebGLPoints'
+import WebGLVectorLayer from 'ol/layer/WebGLVector'
 import Style from 'ol/style/Style'
 import Stroke from 'ol/style/Stroke'
 import Icon from 'ol/style/Icon'
@@ -294,32 +295,32 @@ export default {
           const feature = new Feature(new Point(fromLonLat(data[i].position)))
           feature.setId(data[i].id)
           feature.customData = data[i].data
-          // const style = new Style()
+          const style = new Style()
-          // style.setImage(new Icon({
+          style.setImage(new Icon({
-          //   anchor: data[i].image.anchor,
+            anchor: data[i].image.anchor,
-          //   crossOrigin: 'Anonymous',
+            crossOrigin: 'Anonymous',
-          //   src: data[i].image.src,
+            src: data[i].image.src,
-          //   opacity: 1
+            opacity: 1
-          // }))
+          }))
-          // feature.setStyle(style)
+          feature.setStyle(style)
           features.push(feature)
         }
         const source = new VectorSource()
         source.addFeatures(features)
-        const vectorLayer = new WebGLPointslayer({
+        const vectorLayer = new WebGLVectorLayer({
           source: source,
           maxZoom: maxZoom,
           minZoom: minZoom,
           style: {
             // 必须提供 style 配置，可以是对象或函数
-            // 'circle-radius': 3,
+            'circle-radius': 3,
-            // 'circle-fill-color': 'red',
+            'circle-fill-color': 'red',
-            // 'circle-stroke-color': 'white',
+            'circle-stroke-color': 'white',
-            // 'circle-stroke-width': 0.5
+            'circle-stroke-width': 0.5
-            'icon-src': 'static/images/gis/camera1.png',
+            // 'icon-src': 'static/images/gis/camera1.png',
-            'icon-offset': [0, 12],
+            // 'icon-offset': [0, 12],
-            'icon-width': 40,
+            // 'icon-width': 40,
-            'icon-height': 40
+            // 'icon-height': 40
           }
         })
         if (clickEvent && typeof clickEvent === 'function') {
@@ -471,6 +472,179 @@ export default {
       layer.getSource().addFeature(feature)
     },
 
+    // 新增：支持多种图标类型的点图层创建方法
+    createMultiIconPointLayer(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)))
+          feature.setId(data[i].id)
+          feature.customData = data[i].data
+          
+          // 根据数据类型或状态选择不同的图标
+          const iconConfig = this.getIconConfig(data[i])
+          
+          const style = new Style()
+          style.setImage(new Icon({
+            anchor: iconConfig.anchor,
+            crossOrigin: 'Anonymous',
+            src: iconConfig.src,
+            opacity: iconConfig.opacity || 1,
+            scale: iconConfig.scale || 1
+          }))
+          feature.setStyle(style)
+          features.push(feature)
+        }
+        
+        const source = new VectorSource()
+        source.addFeatures(features)
+        const vectorLayer = new VectorLayer({
+          source: source,
+          renderMode: 'image',
+          declutter: declutter,
+          maxZoom: maxZoom,
+          minZoom: minZoom
+        })
+        
+        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
+      }
+    },
+
+    // 新增：根据数据属性获取图标配置
+    getIconConfig(data) {
+      const baseConfig = {
+        anchor: [0.5, 1],
+        opacity: 1,
+        scale: 1
+      }
+
+      // 根据设备类型选择图标
+      if (data.dataType) {
+        switch (data.dataType) {
+          case 1: // 国标设备
+            return {
+              ...baseConfig,
+              src: data.gbStatus === 'ON' ? 'static/images/gis/camera1.png' : 'static/images/gis/camera1-offline.png'
+            }
+          case 2: // 推流设备
+            return {
+              ...baseConfig,
+              src: data.gbStatus === 'ON' ? 'static/images/gis/camera2.png' : 'static/images/gis/camera2-offline.png'
+            }
+          case 3: // 拉流代理
+            return {
+              ...baseConfig,
+              src: data.gbStatus === 'ON' ? 'static/images/gis/camera3.png' : 'static/images/gis/camera3-offline.png'
+            }
+          case 200: // 部标设备
+            return {
+              ...baseConfig,
+              src: data.gbStatus === 'ON' ? 'static/images/gis/camera1-red.png' : 'static/images/gis/camera1-offline.png'
+            }
+          default:
+            return {
+              ...baseConfig,
+              src: 'static/images/gis/camera.png'
+            }
+        }
+      }
+
+      // 根据状态选择图标
+      if (data.gbStatus) {
+        return {
+          ...baseConfig,
+          src: data.gbStatus === 'ON' ? 'static/images/gis/camera1.png' : 'static/images/gis/camera1-offline.png'
+        }
+      }
+
+      // 默认图标
+      return {
+        ...baseConfig,
+        src: 'static/images/gis/camera.png'
+      }
+    },
+
+    // 新增：批量更新图标类型
+    updateIconType(layer, iconType) {
+      const source = layer.getSource()
+      const features = source.getFeatures()
+      
+      features.forEach(feature => {
+        const data = feature.customData
+        if (data) {
+          // 临时修改数据类型来获取新图标
+          const originalType = data.dataType
+          data.dataType = iconType
+          
+          const iconConfig = this.getIconConfig(data)
+          const style = new Style()
+          style.setImage(new Icon({
+            anchor: iconConfig.anchor,
+            crossOrigin: 'Anonymous',
+            src: iconConfig.src,
+            opacity: iconConfig.opacity || 1,
+            scale: iconConfig.scale || 1
+          }))
+          feature.setStyle(style)
+          
+          // 恢复原始类型
+          data.dataType = originalType
+        }
+      })
+      
+      olMap.render()
+    },
+
+    // 新增：根据条件动态切换图标
+    switchIconsByCondition(layer, condition, iconMap) {
+      const source = layer.getSource()
+      const features = source.getFeatures()
+      
+      features.forEach(feature => {
+        const data = feature.customData
+        if (data && condition(data)) {
+          const iconKey = this.getIconKey(data)
+          const iconConfig = iconMap[iconKey] || iconMap.default
+          
+          const style = new Style()
+          style.setImage(new Icon({
+            anchor: iconConfig.anchor,
+            crossOrigin: 'Anonymous',
+            src: iconConfig.src,
+            opacity: iconConfig.opacity || 1,
+            scale: iconConfig.scale || 1
+          }))
+          feature.setStyle(style)
+        }
+      })
+      
+      olMap.render()
+    },
+
+    // 新增：获取图标键值
+    getIconKey(data) {
+      if (data.dataType && data.gbStatus) {
+        return `${data.dataType}_${data.gbStatus}`
+      }
+      return data.gbStatus || 'default'
+    },
+
     addLineLayer(positions) {
       if (positions.length > 0) {
         const points = []