diff --git a/web/src/views/HandDevice/Home/components/constants/map.constants.ts b/web/src/views/HandDevice/Home/components/constants/map.constants.ts index a216dc6..9ee71ae 100644 --- a/web/src/views/HandDevice/Home/components/constants/map.constants.ts +++ b/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 } diff --git a/web/src/views/HandDevice/Home/components/services/marker.service.ts b/web/src/views/HandDevice/Home/components/services/marker.service.ts index 1308346..0d5ec71 100644 --- a/web/src/views/HandDevice/Home/components/services/marker.service.ts +++ b/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 | 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 | null { - return this.markerLayer } /** * 从props创建markerLayer(内部方法) + * */ - private createMarkerLayerFromProps(props: MapProps): VectorLayer { + // : VectorLayer + 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 | 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) } /**