一些修改建议

gerson

2025-01-21 f3586ba56d0ed7c71d678fa5a3c2c2da8a51fc75

 src/model/map/OLMap.ts

@@ -1,7 +1,6 @@
import { defaultsDeep } from 'lodash-es';
import type { Overlay } from 'ol';
import { Map as OpenLayerMap, View } from 'ol';
import { ZoomSlider } from 'ol/control';
import type { Extent } from 'ol/extent';
import { getTopLeft, getWidth } from 'ol/extent';
import Tile from 'ol/layer/Tile';
@@ -31,10 +30,11 @@
export const MARKER_OVERLAY_CLASS_NAME = 'marker-overlay';

export const gaoDeSourceTypeMap = {
   [GaoDeSourceType.Default]: '默认地图',
   [GaoDeSourceType.Satellite]: '影像地图',
   [GaoDeSourceType.Vector]: '矢量地图',
   [GaoDeSourceType.SatelliteRoad]: '影像路网',
   // [GaoDeSourceType.Default]: '默认地图',
   [GaoDeSourceType.Vector]: '标准地图',

   [GaoDeSourceType.Satellite]: '卫星地图',
   [GaoDeSourceType.SatelliteRoad]: '路网地图',
};

export const getGaoDeSourceUrl = (type: GaoDeSourceType, lang: LangType = 'zh_cn') => {
@@ -46,19 +46,23 @@
   };
   return urlMap[type];
};
type MapConfig = {
   sourceType: GaoDeSourceType;
   markerIsVisible: boolean;
};

type OLEventType = 'blackClick';
type OLMapOptions = {
   container: HTMLDivElement;

   view?: ViewOptions;
};
} & MapConfig;
export class OLMap {
   map: OpenLayerMap;
   source: XYZ;
   private eventMap: Map<OLEventType, Function[]>;
   activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
   overlayIsVisible: Ref<boolean> = ref(true);
   markerIsVisible: Ref<boolean> = ref(true);
   private emit(eventName: OLEventType, ...args: any[]) {
      const handlers = this.eventMap?.get(eventName);
      if (handlers) {
@@ -89,11 +93,13 @@
   }

   constructor(options: OLMapOptions) {
      const { container, view } = defaultsDeep(options, {
      const { container, view, sourceType, markerIsVisible } = defaultsDeep(options, {
         view: {
            center: [13247019.404399557, 4721671.572580107],
            zoom: 8,
         },
         sourceType: GaoDeSourceType.Vector,
         markerIsVisible: true,
      } as OLMapOptions) as OLMapOptions;
      this.source = new XYZ({
         crossOrigin: 'anonymous',
@@ -112,14 +118,21 @@
         layers: [layer], // 添加图层
         view: new View(view),
      });
      this.setSourceUrl(this.activeSourceType.value);
      this.activeSourceType.value = sourceType;
      this.markerIsVisible.value = markerIsVisible;
      this.applySourceType(this.activeSourceType.value);
      this.listenMapClick();
      this.addBasicControl();
   }

   setSourceUrl(type: GaoDeSourceType = GaoDeSourceType.Vector) {
   applySourceType(type: GaoDeSourceType = GaoDeSourceType.Vector) {
      const url = getGaoDeSourceUrl(type);
      this.source.setUrl(url);
   }

   setSourceType(type: GaoDeSourceType = GaoDeSourceType.Vector) {
      this.activeSourceType.value = type;
      this.applySourceType(type);
   }
   addMarkerLayer(dataList: any[], options: any) {
      const { markerOpt } = options;
@@ -146,7 +159,7 @@
         stopEvent: false,
         className: 'z-[999]',
      });
      eleOverlay.setVisible(this.overlayIsVisible.value);
      eleOverlay.setVisible(this.markerIsVisible.value);

      return eleOverlay;
   }
@@ -183,6 +196,16 @@
      });

      return overlay;
   }

   adjustViewToMarkers() {
      const overlays = this.map.getOverlays().getArray();

      const filteredOverlays = overlays.filter((overlay) => {
         const type = overlay.get('type');
         return type === OverlayType.Marker;
      });
      this.adjustViewToOverlays(filteredOverlays);
   }

   adjustViewToOverlays(overlays: Overlay[]) {
@@ -232,12 +255,49 @@
            }
         }
      });
      this.overlayIsVisible.value = visible;
      this.markerIsVisible.value = visible;
   }

   getConfig(): MapConfig {
      return {
         sourceType: this.activeSourceType.value,
         markerIsVisible: this.markerIsVisible.value,
      };
   }

   setConfig(config: MapConfig) {
      this.activeSourceType.value = config.sourceType;
      this.markerIsVisible.value = config.markerIsVisible;
      this.applySourceType(this.activeSourceType.value);
      this.toggleMarkerOverlayVisible(this.markerIsVisible.value);
   }

   private addBasicControl() {
      this.map.addControl(new ZoomSlider());
      // this.map.addControl(new ZoomSlider());
      // this.map.addControl(new FullScreen());
      const container = this.map.getViewport();
      if (!container) return;
      const olZoom = container.querySelector('.ol-zoom') as HTMLElement;
      if (!olZoom) return;
      olZoom.style.display = 'none';
   }

   /**
    * 放大地图
    */
   zoomIn() {
      const view = this.map.getView();
      const zoom = view.getZoom();
      view.setZoom(zoom + 1);
   }

   /**
    * 缩小地图
    */
   zoomOut() {
      const view = this.map.getView();
      const zoom = view.getZoom();
      view.setZoom(zoom - 1);
   }

   getWMTS = () => {