fix: 修改地图上圆圈的绘制方式，以修复多个世界中出现重复圆圈的问题

src/views/stationOperation/components/MapMarker.vue

@@ -27,6 +27,13 @@ export default {
     list: {
       type: Array,
       required: true
+    },
+    markerType: {
+      type: Number,
+      default: 1
+    },
+    radius: {
+      type: Number
     }
   },
   data() {
@@ -39,6 +46,11 @@ export default {
   },
   mounted() {
     this.map = this.$parent.getMapInstance()
+    this.map.getView().on('change:resolution', () => {
+      // 分辨率发生变化时的处理逻辑
+      this.changeCircleRadius()
+    })
+
     this.getStationInfo = debounce(stationInfo => {
       // 查询设施详情时去抖动
       if (this.isHover) {
@@ -47,6 +59,60 @@ export default {
     }, 0)
   },
   methods: {
+    initCircles() {
+      const circleRadius = this.getRadius() * 2
+
+      this.list
+        .filter(
+          stationInfo =>
+            stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
+        )
+        .forEach(stationInfo => {
+          this.map.addOverlay(this.getCircle(stationInfo, circleRadius))
+        })
+    },
+
+    getCircle({ lon, lat, stationType, stationId }, circleRadius) {
+      const circleDiv = document.createElement('div')
+      circleDiv.className = 'custom-map-circle'
+      circleDiv.style.width = circleRadius + 'px'
+      circleDiv.style.height = circleRadius + 'px'
+      circleDiv.style.borderRadius = '50%'
+      circleDiv.style.backgroundColor = 'rgba(255, 0, 0, .4)'
+      return new Overlay({
+        position: fromLonLat([lon, lat]),
+        element: circleDiv,
+        id: `circle_${stationType}_${stationId}`,
+        positioning: 'center-center',
+        className: 'circle-overlay'
+      })
+    },
+
+    // 修改圆的半径
+    changeCircleRadius() {
+      const overlays = this.map.getOverlays().getArray()
+      const circleOverlays = overlays.filter(item => item.id.indexOf('circle') == 0) // 根据id标识获取所有的圆
+      const circleRadius = this.getRadius() * 2
+
+      circleOverlays.forEach(circle => {
+        const circleEle = circle.getElement()
+        circleEle.style.width = circleRadius + 'px'
+        circleEle.style.height = circleRadius + 'px'
+      })
+    },
+
+    // 半径计算
+    getRadius() {
+      const metersPerUnit = this.map
+        .getView()
+        .getProjection()
+        .getMetersPerUnit()
+
+      const distance = (this.radius * 1000) / metersPerUnit
+      const resolution = this.map.getView().getResolution()
+      return distance / resolution
+    },
+
     // 初始化marker
     initMarkers() {
       this.list.forEach(stationInfo => {
@@ -78,7 +144,7 @@ export default {
       return new Overlay({
         position: fromLonLat([lon, lat]),
         element: img,
-        id: `${stationInfo.stationType}_${stationInfo.stationId}`,
+        id: `marker_${stationInfo.stationType}_${stationInfo.stationId}`,
         positioning: 'center-center'
       })
     },
@@ -107,7 +173,8 @@ export default {
         position: fromLonLat([lon, lat]),
         element: rippleDiv,
         id: `ripple_${stationType}_${stationId}`,
-        positioning: 'center-center'
+        positioning: 'center-center',
+        className: 'ripple-overlay'
       })
     },
 
@@ -164,6 +231,9 @@ export default {
       this.initMapPopup()
       this.initMarkers()
       this.initRipples()
+      if (this.markerType == 2) {
+        this.initCircles()
+      }
     }
   }
 }
@@ -227,10 +297,10 @@ export default {
 .custom-ripple {
   width: 85px;
   height: 85px;
-  z-index: -1;
 
   @duration: 1.8s;
   @delay: 0.9s;
+
   .inner-ripple-1 {
     position: absolute;
     top: 0;
@@ -240,6 +310,7 @@ export default {
     background-image: radial-gradient(circle, transparent 10%, rgba(15, 148, 28, 0.2) 30%, rgba(15, 148, 28, 0.5) 60%);
     animation: rippleEffect @duration linear 0s infinite;
   }
+
   .inner-ripple-2 {
     position: absolute;
     top: 0;
@@ -262,4 +333,9 @@ export default {
     opacity: 0;
   }
 }
+
+.ripple-overlay,
+.circle-overlay {
+  pointer-events: none !important;
+}
 </style>

src/views/stationOperation/components/MapPane.vue

@@ -473,10 +473,11 @@ export default {
       source.clear() // 清理图层
       switch (active) {
         case 1: // 核设施查询面板
-          this.drawCircle()
+          this.emitDrawCircle(2)
           this.emitStationChange()
           break
         case 2: // 筛选面板
+          this.emitDrawCircle(1)
           this.emitFilter()
           break
       }
@@ -581,9 +582,8 @@ export default {
             }
 
             this.markerList = markerList
+            this.emitDrawCircle(2)
             this.emitStationChange()
-
-            this.drawCircle()
           } else {
             this.dataSource = []
             this.markerList = []
@@ -600,52 +600,8 @@ export default {
     },
 
     // 绘制圆圈
-    drawCircle() {
+    emitDrawCircle(markerType) {
-      const source = this.circleLayer.getSource()
+      this.$emit('drawCircle', { markerType, radius: this.radius })
-      const circleFeatures = []
-      this.stationList.forEach(stationItem => {
-        circleFeatures.push(this.getCircle(stationItem))
-      })
-      source.addFeatures(circleFeatures)
-    },
-
-    getCircle(stationInfo) {
-      const { lon, lat } = stationInfo
-
-      // 定义填充颜色
-      const fill = new Fill({
-        color: 'rgba(255, 0, 0, .4)' // 红色半透明填充
-      })
-
-      // 定义边框样式
-      const stroke = new Stroke({
-        color: 'rgba(255, 0, 0, .4)', // 红色半透明边框
-        width: 1 // 边框宽度
-      })
-
-      // 创建样式
-      const style = new Style({
-        fill: fill,
-        stroke: stroke
-      })
-
-      const circle = new Circle(fromLonLat([lon, lat]), this.getRadius())
-      const feature = new Feature({
-        geometry: circle,
-        style: style
-      })
-      feature.setStyle(style)
-      return feature
-    },
-
-    // 半径计算
-    getRadius() {
-      const metersPerUnit = this.map
-        .getView()
-        .getProjection()
-        .getMetersPerUnit()
-      const circleRadius = (this.radius * 1000) / metersPerUnit
-      return circleRadius
     },
 
     // 打开分析弹窗

src/views/stationOperation/index.vue

@@ -144,8 +144,14 @@
         ref="mapRef"
         token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
       >
-        <MapMarker :list="markerList" @markerClick="onMarkerClick" />
+        <MapMarker :list="markerList" :marker-type="markerType" :radius="circleRadius" @markerClick="onMarkerClick" />
-        <MapPane ref="mapPane" :treeData="treeData" @changeMarker="onChangeMarker" @filterMarker="onFilterMarker" />
+        <MapPane
+          ref="mapPane"
+          :treeData="treeData"
+          @changeMarker="onChangeMarker"
+          @filterMarker="onFilterMarker"
+          @drawCircle="onDrawCircle"
+        />
       </Map>
     </div>
   </div>
@@ -177,6 +183,8 @@ export default {
       dataList: [], // 左侧All Data 列表
       followedDataList: [], // 关注
       markerList: [], // 地图上标记点列表
+      markerType: 1, // 是否绘制地图上的圆
+      circleRadius: 0,
 
       searchPlacementVisible: false, // 搜索栏占位是否显示
 
@@ -355,6 +363,12 @@ export default {
       this.markerList = markerList
     },
 
+    // 是否绘制圆圈
+    onDrawCircle({ markerType, radius }) {
+      this.markerType = markerType
+      this.circleRadius = radius
+    },
+
     /**
      * 根据类型筛选地图上的marker列表
      */
@@ -413,7 +427,7 @@ export default {
       height: 30px;
       line-height: 30px;
       text-align: center;
-      color: #00E9FE;
+      color: #00e9fe;
       background-color: #021a1d;
     }
 
@@ -431,7 +445,7 @@ export default {
 
           &-active {
             .ant-collapse-arrow {
-              transform: translateY(-50%) rotate(-90deg)
+              transform: translateY(-50%) rotate(-90deg);
             }
           }
         }