优化marker图层切换

web/src/views/HandDevice/Home/components/constants/map.constants.ts

@@ -50,7 +50,7 @@ export const MAP_DEFAULTS = {
   center: [116.3912757, 39.906217] as [number, number],
   zoom: 10,
   maxZoom: 18,
-  minZoom: 0,
+  minZoom: 3,
   enableCluster: true,
   clusterDistance: 1
 }

web/src/views/HandDevice/Home/components/services/marker.service.ts

@@ -15,6 +15,8 @@ import { ANIMATION_CONFIG } from '../constants/map.constants'
 export class MarkerService {
   private map: Map | null = null
   markerLayer: VectorLayer<VectorSource | Cluster> | null = null
+  // 当前图层模式（single或cluster聚合）
+  private currentLayerMode: 'single' | 'cluster' | '' = ''
   private vectorSource: VectorSource
 
   constructor(map: Map) {
@@ -32,12 +34,11 @@ export class MarkerService {
    */
   createMarkerLayer(props: MapProps) {
     // console.log('createMarkerLayer')
-    if (this.markerLayer) {
-      // this.map?.removeLayer(this.markerLayer)
-      this.updateData(props)
-    } else {
-      this.createMarkerLayerFromProps(props)
-    }
+
+    // this.map?.removeLayer(this.markerLayer)
+    this.updateData(props)
+
+    this.createMarkerLayerFromProps(props)
   }
   /**
    * 更新标记数据
@@ -54,26 +55,14 @@ export class MarkerService {
       feature.setStyle(createMarkerStyle(marker))
       this.vectorSource.addFeature(feature)
     })
-
-    // this.createMarkerLayerFromProps(props)
-  }
-  updateLayer(props: MapProps): void {
-    if (this.markerLayer) {
-      this.map?.removeLayer(this.markerLayer)
-    }
-    this.createMarkerLayerFromProps(props)
-  }
-  /**
-   * 获取标记图层
-   */
-  getMarkerLayer(): VectorLayer<VectorSource | Cluster> | null {
-    return this.markerLayer
   }
 
   /**
    * 从props创建markerLayer（内部方法）
+   *
    */
-  private createMarkerLayerFromProps(props: MapProps): VectorLayer<VectorSource | Cluster> {
+  // : VectorLayer<VectorSource | Cluster>
+  private createMarkerLayerFromProps(props: MapProps) {
     this.updateData(props)
 
     // 检查是否应该强制使用单个marker模式
@@ -84,17 +73,19 @@ export class MarkerService {
       // return currentZoom && currentZoom >= props.forceSingleMark
       return currentZoom && currentZoom >= ANIMATION_CONFIG.clusterThreshold
     }
-    // console.log('createMarkerLayerFromProps shouldForceSingleMark', shouldForceSingleMark())
-    // 如果启用聚合且不强制使用单个marker模式
-    // console.log('shouldForceSingleMark()', shouldForceSingleMark())
 
+    let newLayer: VectorLayer<VectorSource | Cluster> | null = null
+    // 如果启用聚合且不强制使用单个marker模式
     if (props.enableCluster && !shouldForceSingleMark()) {
+      if (this.currentLayerMode === 'cluster') return
+      this.currentLayerMode = 'cluster'
+
       const clusterSource = new Cluster({
         source: this.vectorSource,
         distance: Math.max(props.clusterDistance || 10, 10)
       })
 
-      this.markerLayer = new VectorLayer({
+      newLayer = new VectorLayer({
         source: clusterSource,
         zIndex: 1,
         style: (feature) => {
@@ -117,9 +108,12 @@ export class MarkerService {
         }
       })
     } else {
+      if (this.currentLayerMode === 'single') return
+      this.currentLayerMode = 'single'
+
       // console.log('基础marker')
 
-      this.markerLayer = new VectorLayer({
+      newLayer = new VectorLayer({
         source: this.vectorSource,
         zIndex: 1,
         renderOrder: (a, b) => {
@@ -130,9 +124,19 @@ export class MarkerService {
         }
       })
     }
+
+    if (this.markerLayer) {
+      const isVisible = this.markerLayer?.getVisible() || false
+      newLayer.setVisible(isVisible)
+      this.map?.removeLayer(this.markerLayer)
+    }
+
+    this.markerLayer = newLayer
     this.map?.addLayer(this.markerLayer)
 
-    return this.markerLayer
+    // 获取所有图层
+    const layers = this.map?.getLayers().getArray() || []
+    console.log('this.currentLayerMode', this.currentLayerMode, layers)
   }
 
   /**