SERVE_URL

wujingjing

2025-04-14 1df71bdd7fc5b35be1447c9cc574bf610666f436

 src/model/map/OLMap.ts

@@ -1,12 +1,16 @@
import axios from 'axios';
import { defaultsDeep } from 'lodash-es';
import type { Feature, Overlay } from 'ol';
import { Map as OpenLayerMap, View } from 'ol';
import type { Overlay } from 'ol';
import { Feature, Map as OpenLayerMap, View } from 'ol';
import type { Extent } from 'ol/extent';
import { getTopLeft, getWidth } from 'ol/extent';
import { extend, getCenter, getTopLeft, getWidth } from 'ol/extent';
import type { FeatureLike } from 'ol/Feature';
import MVT from 'ol/format/MVT.js';
import WKT from 'ol/format/WKT';
import { Point } from 'ol/geom';
import type Geometry from 'ol/geom/Geometry';
import { defaults as olDefaults } from 'ol/interaction';
import { Draw, defaults as olDefaults } from 'ol/interaction';
import { createBox } from 'ol/interaction/Draw';
import type Layer from 'ol/layer/Layer';
import Tile from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
@@ -18,22 +22,29 @@
import VectorSource from 'ol/source/Vector';
import VectorTileSource from 'ol/source/VectorTile';
import WMTS from 'ol/source/WMTS';
import { Circle, Fill, Stroke, Style } from 'ol/style';
import { Circle, Fill, Stroke, Style, Text } from 'ol/style';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import type { ViewOptions } from 'ol/View';
import type { Ref, ShallowRef } from 'vue';
import { markRaw, ref } from 'vue';
import { Logger } from '../logger/Logger';
import { MarkerOverlay } from './overlay/marker';
import { getCurrentPosition } from '/@/utils/brower';
import { travelTree } from '/@/utils/util';
import { ElLoadingService } from 'element-plus';
import { switchMapTheme } from '/@/api/map';
import { formatDate } from '/@/utils/formatTime';

export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
   /** @description 默认地图 */
   Default = 0,
   Default = 'default',
   /** @description 影像地图 */
   Satellite = 1,
   Satellite = 'satellite',
   /** @description 矢量地图 */
   Vector = 2,
   Vector = 'standard',
   /** @description 影像路网 */
   SatelliteRoad = 3,
   SatelliteRoad = 'road_network',
}
export const enum OverlayType {
   Marker = 'marker',
@@ -59,7 +70,6 @@
};
type MapConfig = {
   sourceType: GaoDeSourceType;
   markerIsVisible: boolean;
};

type OLEventType = 'blackClick' | 'featureChange' | 'featureHoverChange';
@@ -77,17 +87,23 @@
   map: OpenLayerMap;
   source: XYZ;
   private eventMap: Map<OLEventType, Function[]>;
   /** @description 排除未做的layer，后续全部做好，可以不做判断 */
   unsupportedLayers = [];

   /** @description 图层控制信息 */
   layerInfo = ref([] as any[]);

   /** @description 图层控制信息 */
   legendList = ref([] as any[]);

   drawStyles = ref([] as any[]);

   /** @description 主题信息 */
   themeInfo = ref([] as any[]);

   activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
   markerIsVisible: Ref<boolean> = ref(true);
   interactLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null;

   searchHighlightLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null;
   /** @description 当前激活状态 feature */
   activeFeature: ShallowRef<FeatureLike> = ref(null);
   private emit(eventName: OLEventType, ...args: any[]) {
@@ -120,13 +136,12 @@
   }

   constructor(options: OLMapOptions) {
      const { container, view, sourceType, markerIsVisible } = defaultsDeep(options, {
      const { container, view, sourceType } = 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',
@@ -146,11 +161,466 @@
         view: new View(view),
         interactions: olDefaults({ doubleClickZoom: false }),
      });

      this.activeSourceType.value = sourceType;
      this.markerIsVisible.value = markerIsVisible;
      this.applySourceType(this.activeSourceType.value);
      this.listenMapClick();
      this.addBasicControl();
      this.initEvent();
   }

   gaodeApiKey = 'eea6302da02576fe3f3dd3ba1fbe0a04';

   locationLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null;
   centerLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null;

   async locationCurrent() {
      const position = await getCurrentPosition();
      if (!position) return;
      const { latitude, longitude } = position;

      this.map.getView().setCenter(fromLonLat([longitude, latitude]));
      this.map.getView().setZoom(15);
      // 移除旧图层
      this.map.removeLayer(this.locationLayer);
      this.map.removeLayer(this.centerLayer);
      // 创建定位点图层
      this.locationLayer = new VectorLayer({
         source: new VectorSource({
            features: [
               new Feature({
                  geometry: new Point(fromLonLat([longitude, latitude])),
               }),
            ],
         }),
         style: new Style({
            // 外圆
            image: new Circle({
               radius: 20,
               fill: new Fill({
                  color: 'rgba(24, 144, 255, 0.1)',
               }),
               stroke: new Stroke({
                  color: 'rgba(24, 144, 255, 0.3)',
                  width: 2,
               }),
            }),
         }),
         minZoom: 12,
      });

      // 创建中心点图层
      this.centerLayer = new VectorLayer({
         source: new VectorSource({
            features: [
               new Feature({
                  geometry: new Point(fromLonLat([longitude, latitude])),
               }),
            ],
         }),
         style: new Style({
            // 内圆
            image: new Circle({
               radius: 6,
               fill: new Fill({
                  color: '#1890ff',
               }),
               stroke: new Stroke({
                  color: '#fff',
                  width: 2,
               }),
            }),
         }),
      });

      // 添加新图层
      this.map.addLayer(this.locationLayer);
      this.map.addLayer(this.centerLayer);
      return position;
   }

   async gaodeAddressSearch(address, city) {
      this.gaodeApiKey = 'eea6302da02576fe3f3dd3ba1fbe0a04';
      // const url = `https://restapi.amap.com/v3/assistant/inputtips?output=json&city=010&keywords=${address}=${this.gaodeApiKey}`;
      // 搜索 POI
      const url = `https://restapi.amap.com/v3/place/text?keywords=${address}&city=${city}&offset=20&page=1&key=${this.gaodeApiKey}&extensions=all `;
      // 搜索 POI 2.0
      // const url = `https://restapi.amap.com/v5/place/text?keywords=${address}&city=beijing&offset=20&page=1&key=${this.gaodeApiKey}&extensions=all

      const response = await axios.get(url);
      return response.data;
   }

   readWKT(wktStr) {
      const srid = wktStr.match(/SRID=(\d+);/)?.[1];
      const standardWktStr = wktStr.replace(/SRID=\d+;/, '');
      const feature = new WKT().readFeature(standardWktStr, {
         dataProjection: `EPSG:${srid}`,
      });
      return feature;
   }
   drawLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null;
   private isDrawStatus = false;

   removeDrawLayer() {
      if (!this.drawLayer) return;
      this.map.removeLayer(this.drawLayer);
      this.drawLayer = null;
   }

   drawPolygon() {
      if (this.isDrawStatus) return;
      this.isDrawStatus = true;
      return new Promise((resolve) => {
         // 创建绘制交互
         const draw = new Draw({
            type: 'Polygon',
         });

         // 添加绘制交互到地图
         this.map.addInteraction(draw);

         // 监听绘制完成事件
         draw.on('drawend', (event) => {
            const feature = event.feature;
            const geometry = feature.getGeometry();
            const extent = geometry.getExtent();
            this.drawLayer = new VectorLayer({
               source: new VectorSource({
                  features: [feature],
               }),
               style: new Style({
                  stroke: new Stroke({
                     color: '#1677ff',
                     width: 2,
                  }),
                  fill: new Fill({
                     color: 'rgba(22, 119, 255, 0.1)',
                  }),
               }),
            });

            // 添加多边形图层到地图
            this.map.addLayer(this.drawLayer);

            // 移除绘制交互
            this.map.removeInteraction(draw);
            setTimeout(() => {
               this.isDrawStatus = false;
            }, 300);

            // 返回范围
            resolve(extent);
         });
      });
   }
   drawRectangle() {
      if (this.isDrawStatus) return;
      this.isDrawStatus = true;
      return new Promise((resolve) => {
         // 创建绘制交互
         const draw = new Draw({
            type: 'Circle',
            geometryFunction: createBox(),
         });

         // 添加绘制交互到地图
         this.map.addInteraction(draw);

         // 监听绘制完成事件
         draw.on('drawend', (event) => {
            const feature = event.feature;
            const geometry = feature.getGeometry();
            const extent = geometry.getExtent();
            this.drawLayer = new VectorLayer({
               source: new VectorSource({
                  features: [feature],
               }),
               style: new Style({
                  stroke: new Stroke({
                     color: '#1677ff',
                     width: 2,
                  }),
                  fill: new Fill({
                     color: 'rgba(22, 119, 255, 0.1)',
                  }),
               }),
            });
            // 添加新的feature
            // this.drawLayer.getSource().addFeature(feature);

            // 添加矩形图层到地图
            this.map.addLayer(this.drawLayer);

            // 移除绘制交互
            this.map.removeInteraction(draw);
            setTimeout(() => {
               this.isDrawStatus = false;
            }, 300);

            // 返回范围
            resolve(extent);
         });
      });
   }

   clearObjectSearch() {
      this.highlightSearch([]);
   }

   displaySearchResult(searchItem) {
      if (!searchItem?.WKT) return;
      const feature = this.readWKT(searchItem.WKT);
      this.highlightSearch(feature);
      const geometry = feature.getGeometry();

      this.map.getView().fit(geometry.getExtent(), {
         // padding: [100, 100, 100, 100],
         maxZoom: 15,
      });

      return feature;
   }

   zoomToFeatures(features) {
      if (features.length === 0) return;
      // 获取所有 feature 的最小外接矩形
      const extent = features.reduce((acc, feature) => {
         const featureExtent = feature.getGeometry().getExtent();
         if (!acc) return featureExtent;
         return extend(acc, featureExtent);
      }, null);
      // 调整视图以适应最小外接矩形
      this.map.getView().fit(extent, {
         maxZoom: 15,
         padding: [50, 50, 50, 50], // 添加内边距使视图更美观
      });
   }

   updateSize() {
      this.map.updateSize();
   }

   initEvent() {
      const that = this;
      this.map.on('moveend', function (e) {
         const zoom = that.map.getView().getZoom(); //获取当前地图的缩放级别
         Logger.info('当前地图缩放级别为：' + zoom);
      });
      this.pointermove();
   }

   hightLightColor: '0000FFFF';
   sizeRate: 0;

   getPointHighLightStyle(feature) {
      if (!feature) return null;
      let pSize = feature.get('psize') ?? 15;
      pSize += pSize * 2;

      const pcolor = '0000FFFF';
      const pstyle = feature.get('pstyle');
      return this.getPointStyles({ color: pcolor, size: pSize, style: pstyle });
   }

   getLineHighLightStyle(feature) {
      if (!feature) return null;

      const lcolor = this.hightLightColor;
      let lsize = feature.get('lsize') ?? 15;
      lsize += lsize * this.sizeRate;
      const lstyle = feature.get('lstyle');
      return this.getLineStyles({ lsize: lsize, lcolor: lcolor, lstyle: lstyle });
   }

   getPolygonHighLightStyle(feature) {
      if (!feature) return null;

      const lcolor = this.hightLightColor;
      // return this.getPolygonStyles({ pcolor: lcolor, lstyle: 'default', lsize: 2 });
      return new Style({
         stroke: new Stroke({
            color: lcolor,
            width: 5,
         }),
         // fill: new Fill({
         //    color: lcolor,
         // }),
      });
   }

   // 保存点样式缓存
   pointStyeMap: Record<string, Style> = {};

   /**
    * 根据点的配置获取样式
    * @param config
    * @returns
    */
   getPointStyles(config: { size; color; style }) {
      const pSize = config.size;

      const pcolor = config.color;
      const pstyle = config.style;

      const pkey = `${pstyle}_${pSize}_${pcolor}`;

      if (!this.pointStyeMap[pkey]) {
         const drawStyle = this.drawStyles.value.find((item) => item.id === pstyle + '');
         const drawStyleType = drawStyle?.type;
         const config = drawStyle?.config;

         const drawStyleConfigType = drawStyle?.config?.type;
         if (drawStyleType === 'POINT') {
            if (drawStyleConfigType === 'circle') {
               this.pointStyeMap[pkey] = new Style({
                  image: new Circle({
                     radius: pSize,
                     fill: new Fill({ color: `#${pcolor}` }),
                  }),
               });
            } else if (drawStyleConfigType === 'font') {
               this.pointStyeMap[pkey] = new Style({
                  text: new Text({
                     font: `${pSize}px "ywifont"`,

                     text: config?.text ?? '',
                     fill: new Fill({ color: `#${pcolor}` }),
                  }),
               });
            } else {
               this.pointStyeMap[pkey] = new Style({
                  image: new Circle({
                     radius: pSize,
                     fill: new Fill({ color: `#${pcolor}` }),
                  }),
               });
            }
         } else {
            this.pointStyeMap[pkey] = new Style({
               image: new Circle({
                  radius: pSize,
                  fill: new Fill({ color: `#${pcolor}` }),
               }),
            });
         }
      }
      return this.pointStyeMap[pkey];
   }

   // 保存线样式缓存
   lineStyleMap: Record<string, Style> = {};

   /**
    * 根据线的配置获取样式
    * @param config
    */
   getLineStyles(config: { lsize; lcolor; lstyle; psize?; pcolor?; pstyle? }) {
      const lSize = config.lsize;
      if (!lSize) return null;
      const lColor = config.lcolor;
      const lstyle = config.lstyle;
      const styles = [];
      const lKey = `${lstyle}_${lSize}_${lColor}`;
      if (!this.lineStyleMap[lKey]) {
         const drawStyle = this.drawStyles.value.find((item) => item.id === lstyle + '');
         const drawStyleType = drawStyle?.type;
         const config = drawStyle?.config;
         this.lineStyleMap[lKey] = new Style({
            // image: new Circle({
            //    radius: lsize,
            //    fill: new Fill({ color: `#${color}` }),
            // }),
            stroke: new Stroke({
               color: `#${lColor}`,
               width: lSize,
            }),
         });
      }
      styles.push(this.lineStyleMap[lKey]);

      const hasPoint = Object.keys(config).some((key) => key === 'psize' && !!config[key]);
      if (hasPoint) {
         const psize = config.psize;
         const pcolor = config.pcolor;
         const pstyle = config.pstyle;
         const pointStyle = this.getPointStyles({ size: psize, color: pcolor, style: pstyle });
         styles.push(pointStyle);
      }
      return styles;
   }
   polygonStyleMap: Record<string, Style> = {};
   getPolygonStyles(config: { pcolor; lstyle; lsize; lcolor }) {
      const styles = [];
      const pColor = config.pcolor;
      const key = pColor;
      if (!this.polygonStyleMap[key]) {
         const polygonStyle = new Style({
            fill: new Fill({ color: `#${pColor}` }),
         });
         styles.push(polygonStyle);
      }

      const lineStyle = this.getLineStyles({
         lsize: config.lsize,
         lcolor: config.lcolor,
         lstyle: config.lstyle,
      });
      lineStyle && styles.push(...lineStyle);
      return styles;
   }

   private maxTextResolution = 1;
   getText(textContent, resolution) {
      let text = `${textContent}`;
      if (resolution > this.maxTextResolution) {
         text = '';
      }

      // else if (type == 'hide') {
      //    text = '';
      // } else if (type == 'shorten') {
      //    text = text.trunc(12);
      // } else if (type == 'wrap' && (!dom.placement || dom.placement.value != 'line')) {
      //    text = stringDivider(text, 16, '\n');
      // }

      return text;
   }

   createTextStyle(textContent, resolution) {
      return new Style({
         text: new Text({
            text: this.getText(textContent, resolution),
            font: '14px Arial',
            fill: new Fill({ color: '#000' }),
            stroke: new Stroke({ color: '#fff', width: 2 }),
            offsetX: 10, // 文字相对于几何中心的水平偏移
            offsetY: 20, // 文字相对于几何中心的垂直偏移
         }),
      });
   }

   // 保存标签样式缓存
   labelStyleMap: Record<string, Style> = {};

   /**
    * 根据标签的配置获取样式
    * @param config
    */
   getLabelStyles(config: { textContent; resolution }) {
      const textContent = config.textContent;
      if (!textContent) return null;
      const resolution = config.resolution;
      if (!textContent) return null;
      if (!this.labelStyleMap[textContent]) {
         this.labelStyleMap[textContent] = this.createTextStyle(textContent, resolution);
      }
      return this.labelStyleMap[textContent];
   }

   setDrawStyles(styles: any[]) {
      this.drawStyles.value = styles;
   }

   applySourceType(type: GaoDeSourceType = GaoDeSourceType.Vector) {
@@ -177,6 +647,22 @@
      this.adjustViewToOverlays(markers);
   }

   checkEquipIsShow() {
      for (const item of this.layerInfo.value) {
         if (item.id === 'equip') {
            return item.isVisible;
         }
      }
      return false;
   }

   getEquipOverlay() {
      for (const item of this.layerInfo.value) {
         if (item.type === 'equip') {
            return item;
         }
      }
   }
   createEleOverlay(dom: string | HTMLElement, position = [0, 0]) {
      const ele = typeof dom === 'string' ? (document.querySelector(dom) as HTMLElement) : dom;
      if (!ele) return;
@@ -187,7 +673,7 @@
         stopEvent: false,
         className: 'z-[999]',
      });
      eleOverlay.setVisible(this.markerIsVisible.value);
      eleOverlay.setVisible(this.checkEquipIsShow());

      return eleOverlay;
   }
@@ -217,6 +703,7 @@
      overlay.set('type', OverlayType.Marker);
      // 添加点击事件
      markerImg.addEventListener('click', (event) => {
         if (this.isDrawStatus) return;
         if (markerOpt.icon.selectUrl) {
            markerImg.src = markerOpt.icon.selectUrl;
         }
@@ -226,18 +713,23 @@
      return overlay;
   }

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

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

   adjustViewToOverlays(overlays: Overlay[]) {
      if (overlays.length === 0) return;
   adjustViewToMarkers() {
      const overlays = this.getAllMarkerOverlays();
      this.adjustViewToOverlays(overlays);
   }

   getAllMarkerOverlaysExtent() {
      const overlays = this.getAllMarkerOverlays();
      const extent = this.getOverlaysExtent(overlays);
      return extent;
   }

   getOverlaysExtent(overlays: Overlay[]) {
      const extent = overlays.reduce<number[] | null>((ext, item) => {
         const coord = item.getPosition();

@@ -246,7 +738,12 @@
         }
         return [Math.min(ext[0], coord[0]), Math.min(ext[1], coord[1]), Math.max(ext[2], coord[0]), Math.max(ext[3], coord[1])];
      }, null);
      return extent;
   }

   adjustViewToOverlays(overlays: Overlay[]) {
      if (overlays.length === 0) return;
      const extent = this.getOverlaysExtent(overlays);
      if (extent) {
         this.fitExtend(extent);
      }
@@ -264,6 +761,7 @@
    */
   listenMapClick() {
      this.map.on('click', (event) => {
         if (this.isDrawStatus) return;
         // const features = this.map.getFeaturesAtPixel(event.pixel);
         const features = [];
         const layers: Layer<Source, LayerRenderer<any>>[] = [];
@@ -272,12 +770,27 @@
            layers.push(layer);
         });
         const feature = features[0];
         feature?.get('click')?.(event);

         const layer = layers[0];
         if (layer === this.drawLayer) return;
         this.labelOverlay?.setVisible(false);

         if (feature !== this.activeFeature.value) {
            this.emit('featureChange', feature, layer);
         }
         if (feature) {
            const otype = feature.get('otype');
            console.log('🚀 ~ otype:', otype);
            const oname = feature.get('oname');
            console.log('🚀 ~ oname:', oname);
            const geometryType = feature.getGeometry().getType();
            console.log('🚀 ~ geometryType:', geometryType);
            const properties = feature.getProperties();
            console.log('🚀 ~ properties:', properties);
         }
         this.highlightSelect(feature);
         this.activeFeature.value = feature;
         // this.displayFeatureInfo(feature);
      });
   }

@@ -285,24 +798,236 @@
      this.themeInfo.value = themeInfo;
   }

   getAllLayers() {
      const allLayers = this.layerInfo.value.reduce((preVal, curVal) => {
         if (curVal.children && curVal.children.length > 0) {
            return preVal.concat(curVal.children.map((item) => item));
         } else {
            return preVal;
         }
      }, []);
      return allLayers;
   }

   zoomToLayers() {
      let extent = this.getAllMarkerOverlaysExtent();
      const layers = this.getAllLayerModels();
      if (layers.length > 0) {
         // 获取所有图层的范围
         extent = layers.reduce((extent, layer) => {
            const layerExtent = layer.getExtent();

            if (!extent) {
               return layerExtent;
            }

            // 合并范围
            return extend(extent, layerExtent);
         }, extent);
      }

      // 聚焦到合并后的范围
      this.map.getView().fit(extent, {
         padding: [50, 50, 50, 50],
         maxZoom: 15,
      });
   }

   getAllLayerModels() {
      return this.layerInfo.value.reduce((preVal, curVal) => {
         if (curVal.children && curVal.children.length > 0) {
            return preVal.concat(curVal.children.map((item) => item.model));
         } else {
            return preVal;
         }
      }, []);
   }

   setLayerVisible(layerId: string, visible: boolean) {
      const layer = this.getAllLayers().find((item) => item.id === layerId);
      if (layer) {
         layer.isVisible = visible;
      }
   }

   setThemeById(themeId: string) {
      let group;
      let theme;
      travelTree(this.themeInfo.value, (item, index, array, parent) => {
         if (item.type === 'theme' && item.id === themeId) {
            group = parent;
            theme = item;
            return true;
         }
      });
      if (group) {
         group.activeTheme = themeId;
         this.handleThemeChange(themeId, group);
      }
   }

   async changeTheme(ids: string) {
      const loadingInstance = ElLoadingService({
         text: '加载主题中...',
         target: '.layout-parent',
      });
      const res = await switchMapTheme({
         theme_id: ids,
         time: formatDate(new Date()),
      }).finally(() => {
         loadingInstance.close();
      });

      // 加入主题之后的样式函数
      const themeLayerStyleFunc = (feature, resolution) => {
         const otype = feature.get('otype');
         const oname = feature.get('oname');
         // oname 映射样式
         const onameStyleMap = res?.[`O_${otype}`] ?? {};
         const themeStyles = res?.styles ?? [];
         const styleIndex = onameStyleMap[oname]?.style_id;
         const themeStyle = styleIndex == null ? null : themeStyles[styleIndex];
         // if(themeStyle){
         // }
         const shape = feature.getGeometry().getType();
         const styles = [];
         switch (shape) {
            case 'Point':
               const pSize = themeStyle?.PSIZE ?? feature.get('psize');

               const pcolor = themeStyle?.PCOLOR ?? feature.get('pcolor');

               const pStyle = themeStyle?.PSTYLE ?? feature.get('pstyle');

               const pointStyle = this.getPointStyles({
                  size: pSize,
                  color: pcolor,
                  style: pStyle,
               });
               pointStyle && styles.push(pointStyle);
               break;
            case 'LineString':
               const lSize = themeStyle?.LSIZE ?? feature.get('lsize');
               const lColor = themeStyle?.LCOLOR ?? feature.get('lcolor');
               const lStyle = themeStyle?.LSTYLE ?? feature.get('lstyle');

               const pSize1 = themeStyle?.PSIZE ?? feature.get('psize');
               const pcolor1 = themeStyle?.PCOLOR ?? feature.get('pcolor');
               const pStyle1 = themeStyle?.PSTYLE ?? feature.get('pstyle');

               const lineStyle = this.getLineStyles({
                  lsize: lSize,
                  lcolor: lColor,
                  lstyle: lStyle,
                  psize: pSize1,
                  pcolor: pcolor1,
                  pstyle: pStyle1,
               });
               lineStyle && styles.push(...lineStyle);

               break;
            case 'Polygon':
               const pColor = themeStyle?.PCOLOR ?? feature.get('pcolor');
               const lSize1 = themeStyle?.LSIZE ?? feature.get('lsize');
               const lColor1 = themeStyle?.LCOLOR ?? feature.get('lcolor');
               const lstyle1 = themeStyle?.LSTYLE ?? feature.get('lstyle');
               const polygonStyle = this.getPolygonStyles({
                  pcolor: pColor,
                  lsize: lSize1,
                  lcolor: lColor1,
                  lstyle: lstyle1,
               });
               polygonStyle && styles.push(...polygonStyle);

               break;
            default:
               break;
         }

         // switch (otype) {
         //    case 'WDM_JUNCTIONS':
         //       const textStyle = createTextStyle(feature, resolution);
         //       styles.push(textStyle);

         //    case 'WDM_PIPES':
         //       break;
         // }
         //#region ====================== 添加标注 ======================
         const tString = themeStyle?.TSTRING ?? feature.get('tstring');
         const tStringStyle = this.getLabelStyles({
            textContent: tString,
            resolution,
         });
         tStringStyle && styles.push(tStringStyle);
         //#endregion

         return styles;
      };
      const allLayers = this.getAllLayers();
      for (const item of allLayers) {
         if (this.unsupportedLayers.includes(item.id)) {
            continue;
         }
         item.model.setStyle(themeLayerStyleFunc);
      }
      return res?.legends ?? [];
   }

   async handleThemeChange(val?, themeGroup?) {
      const allIds = [];
      for (const item of this.themeInfo.value) {
         if (item.activeTheme) {
            allIds.push(item.activeTheme);
         }
      }
      const ids = allIds.join(',');

      if (!ids) {
         const allLayers = this.getAllLayerModels();
         for (const item of allLayers) {
            const originStyle = item.get('originStyle');
            originStyle && item.setStyle(originStyle);
         }
         return;
      }
      const legends = await this.changeTheme(ids);
      this.legendList.value = this.parseLegends(legends);
   }

   parseLegends(legends) {
      const result = legends.map((item) => {
         const isEqual = item.operate === '=';
         const result = {
            ...item,
            legend: item.legend.map((legendItem, index, array) => {
               const preItem = array[index - 1];
               let label = '';
               if (isEqual) {
                  label = legendItem.value;
               } else if (preItem) {
                  label = `>${preItem.value}且${item.operate}${legendItem.value}`;
               } else {
                  label = `${item.operate}${legendItem.value}`;
               }
               return {
                  ...legendItem,
                  label: label,
               };
            }),
         };

         result.legend.push({
            style: item.default,
            value: '',
            label: result.legend.length == 0 ? '默认' : `>${item.legend[item.legend.length - 1].value}`,
         });
         return result;
      });
      return result;
   }

   /** @description 记录所有图层 */
   setAllLayers(layerModels: Layer[], layers: any[], layerGroup: any[]) {
      // this.layerInfo.value = layerModels.map((layer, index) => {
      //    const layerData = layers[index];

      //    return {
      //       id: layerData.id,
      //       title: layerData.title,
      //       model: markRaw(layer),
      //       get isVisible() {
      //          return layer.getVisible();
      //       },
      //       set isVisible(val) {
      //          layer.setVisible(val);
      //       },
      //    };
      // });
      console.log('🚀 ~ layerGroup:', layerGroup);
      this.layerInfo.value = layerGroup.reduce((preVal, curVal) => {
         const group = curVal.group;
         const groupId = `group-${group}`;
@@ -321,9 +1046,20 @@
         }
         const layer = layerModels[foundIndex];
         const layerData = layers[foundIndex];
         //#region ====================== 设置缩放级别 ======================
         if (layerData?.max_ratio !== null) {
            layer.setMaxZoom(layerData.max_ratio);
         }

         if (layerData?.min_ratio !== null) {
            layer.setMinZoom(layerData.min_ratio);
         }
         //#endregion

         const data = {
            id: layerData.id,
            title: layerData.title,
            icon: layerData.icon,
            model: markRaw(layer),
            get isVisible() {
               return layer.getVisible();
@@ -336,7 +1072,21 @@
         mapGroupItem.children.push(data);
         return preVal;
      }, []);
      console.log('🚀 ~ this.layerInfo.value:', this.layerInfo.value);
      const that = this;
      this.layerInfo.value.push({
         id: 'equip',
         title: '监测设备',
         children: [],
         _isVisible: true,
         get isVisible() {
            return this._isVisible;
         },
         set isVisible(val) {
            this._isVisible = val;
            that.toggleMarkerOverlayVisible(val);
         },
         type: 'equip',
      });
   }

   /**
@@ -365,21 +1115,17 @@
            }
         }
      });
      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() {
@@ -395,19 +1141,59 @@
   /**
    * 放大地图
    */
   zoomIn() {
   zoomIn(offsetLevel = 1) {
      const view = this.map.getView();
      const zoom = view.getZoom();
      view.setZoom(zoom + 1);
      view.setZoom(zoom + offsetLevel);
   }

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

   /**
    * 地图左移
    */
   panLeft(offset = 1000) {
      const view = this.map.getView();
      const center = view.getCenter();
      if (!center) return;
      view.setCenter([center[0] - offset, center[1]]);
   }

   /**
    * 地图右移
    */
   panRight(offset = 1000) {
      const view = this.map.getView();
      const center = view.getCenter();
      if (!center) return;
      view.setCenter([center[0] + offset, center[1]]);
   }

   /**
    * 地图上移
    */
   panUp(offset = 1000) {
      const view = this.map.getView();
      const center = view.getCenter();
      if (!center) return;
      view.setCenter([center[0], center[1] + offset]);
   }

   /**
    * 地图下移
    */
   panDown(offset = 1000) {
      const view = this.map.getView();
      const center = view.getCenter();
      if (!center) return;
      view.setCenter([center[0], center[1] - offset]);
   }

   private tileUrlFunction(url) {
@@ -426,6 +1212,9 @@
         source: new VectorTileSource({
            format: new MVT(),
            url: url,
            // minZoom:5,
            // maxZoom:2
            // minZoom:12
         }),
         extent: vectorTileExtent,
         style: style,
@@ -433,14 +1222,33 @@
      this.map.addLayer(vectorTileLayer);
      return vectorTileLayer;
   }

   // highlightFeature = null;
   displayFeatureInfo(feature) {
   highlightFeature(feature) {
      const highlightStyle = {
         // Point: new Style({
         //    // image: new Circle({
         //    //    radius: 5,
         //    //    fill: new Fill({ color: `blue` }),
         //    // }),
         //    image: new Circle({
         //       radius: 13,
         //       stroke: new Stroke({
         //          color: `blue`,
         //          width: 3,
         //       }),
         //    }),
         // }),
         // Point:this.getPointHighLightStyle.call(this,feature),
         Point: new Style({
            // image: new Circle({
            //    radius: 5,
            //    fill: new Fill({ color: `blue` }),
            // }),
            image: new Circle({
               radius: 5,
               fill: new Fill({ color: `blue` }),
               radius: 13,
               stroke: new Stroke({
                  color: `blue`,
                  width: 3,
               }),
            }),
         }),
         LineString: new Style({
@@ -448,6 +1256,15 @@
               color: `blue`,
               width: 5,
            }),
         }),
         Polygon: new Style({
            stroke: new Stroke({
               color: `blue`,
               width: 5,
            }),
            // fill: new Fill({
            //    color: `rgba(0, 0, 255, 0.1)`,
            // }),
         }),
      };
      // 创建高亮图层
@@ -461,10 +1278,115 @@
            },
         });
      }
   }

   private searchHighlightStyle = {
      // Point: new Style({
      //    // image: new Circle({
      //    //    radius: 5,
      //    //    fill: new Fill({ color: `blue` }),
      //    // }),
      //    image: new Circle({
      //       radius: 13,
      //       stroke: new Stroke({
      //          color: `blue`,
      //          width: 3,
      //       }),
      //    }),
      // }),
      // Point:this.getPointHighLightStyle.call(this,feature),
      Point: new Style({
         // image: new Circle({
         //    radius: 5,
         //    fill: new Fill({ color: `blue` }),
         // }),
         image: new Circle({
            radius: 13,
            stroke: new Stroke({
               color: `yellow`,
               width: 3,
            }),
         }),
      }),
      LineString: new Style({
         stroke: new Stroke({
            color: `yellow`,
            width: 5,
         }),
      }),
      Polygon: new Style({
         stroke: new Stroke({
            color: `yellow`,
            width: 5,
         }),
         // fill: new Fill({
         //    color: `rgba(0, 0, 255, 0.1)`,
         // }),
      }),
   };

   private selectHighlightStyle = {
      // Point: new Style({
      //    // image: new Circle({
      //    //    radius: 5,
      //    //    fill: new Fill({ color: `blue` }),
      //    // }),
      //    image: new Circle({
      //       radius: 13,
      //       stroke: new Stroke({
      //          color: `blue`,
      //          width: 3,
      //       }),
      //    }),
      // }),
      // Point:this.getPointHighLightStyle.call(this,feature),
      Point: new Style({
         // image: new Circle({
         //    radius: 5,
         //    fill: new Fill({ color: `blue` }),
         // }),
         image: new Circle({
            radius: 13,
            stroke: new Stroke({
               color: `blue`,
               width: 3,
            }),
         }),
      }),
      LineString: new Style({
         stroke: new Stroke({
            color: `blue`,
            width: 5,
         }),
      }),
      Polygon: new Style({
         stroke: new Stroke({
            color: `blue`,
            width: 5,
         }),
         // fill: new Fill({
         //    color: `rgba(0, 0, 255, 0.1)`,
         // }),
      }),
   };

   highlightSelect(feature) {
      // 创建高亮图层
      if (!this.interactLayer) {
         this.interactLayer = new VectorLayer({
            source: new VectorSource(),
            map: this.map,
            style: (feature) => {
               const type = feature.getGeometry().getType();
               return this.selectHighlightStyle[type];
            },
         });
      }

      // 设置高亮要素
      if (feature !== this.activeFeature.value) {
         if (this.activeFeature.value) {
            console.log('remove feature:', this.activeFeature.value);
            this.interactLayer.getSource().removeFeature(this.activeFeature.value as any);
         }
         if (feature) {
@@ -474,6 +1396,121 @@
      }
   }

   private labelOverlay: MarkerOverlay = null;
   private initLabelOverlay() {
      if (this.labelOverlay) return;
      // 创建一个 div 元素用于显示标签
      const labelElement = document.createElement('div');
      labelElement.className = 'ol-label-overlay';
      labelElement.style.position = 'relative';
      labelElement.style.background = 'rgba(0,0,0,0.6)';
      labelElement.style.borderRadius = '4px';
      labelElement.style.color = '#fff';
      labelElement.style.padding = '4px 8px';
      labelElement.style.whiteSpace = 'nowrap';
      labelElement.style.fontSize = '12px';
      labelElement.style.transform = 'translate(-50%, -100%)';
      labelElement.style.marginBottom = '8px';

      // 创建 overlay
      this.labelOverlay = new MarkerOverlay({
         element: labelElement,
         offset: [0, 0],
         positioning: 'bottom-center',
      });

      // 添加到地图
      this.map.addOverlay(this.labelOverlay);
   }
   private preSearchHighlightFeatures: Feature[] = [];
   highlightSearch(features) {
      if (!Array.isArray(features)) {
         features = [features];
      }

      const positionFeatures = features.map((feature, index, array) => {
         const geometry = feature.getGeometry();
         const center = geometry.getExtent ? getCenter(geometry.getExtent()) : geometry.getCoordinates();

         // 创建一个新的Feature用于显示字体图标
         const iconFeature = new Feature({
            geometry: new Point(center),
         });

         // 设置字体图标样式
         // 添加点击事件监听
         // iconFeature.set('click', (event) => {
         //    // 初始化 labelOverlay
         //    this.initLabelOverlay();
         //    // 获取点击位置的坐标
         //    const coordinate = event.coordinate;
         //    // 设置 labelOverlay 的内容和位置
         //    const element = this.labelOverlay.getElement();
         //    element.innerHTML = `第${index + 1}个位置`;
         //    this.labelOverlay.setPosition(coordinate);
         // });

         iconFeature.setStyle([
            new Style({
               text: new Text({
                  text: '\ue642', // 使用字体图标的unicode编码
                  font: '24px "ywifont"', // 设置字体大小和字体名称
                  fill: new Fill({
                     color: '#1677ff',
                  }),
                  offsetY: -20, // 调整图标位置
               }),
            }),
            new Style({
               text: new Text({
                  text: array.length === 1 ? '' : index + 1, // 添加数字
                  font: '14px Arial', // 设置数字字体
                  fill: new Fill({
                     color: '#ffffff', // 数字颜色设为白色
                  }),
                  offsetY: -20, // 与图标保持相同的偏移
               }),
            }),
         ]);

         return iconFeature;
      });
      // 创建高亮图层
      if (!this.searchHighlightLayer) {
         this.searchHighlightLayer = new VectorLayer({
            source: new VectorSource(),
            map: this.map,
            style: (feature) => {
               const type = feature.getGeometry().getType();
               return this.searchHighlightStyle[type];
            },
         });
      }
      if (this.preSearchHighlightFeatures && this.preSearchHighlightFeatures.length > 0) {
         this.searchHighlightLayer.getSource().removeFeatures(this.preSearchHighlightFeatures);
      }

      // 设置高亮要素
      if (positionFeatures && positionFeatures.length > 0) {
         this.searchHighlightLayer.getSource().addFeatures(positionFeatures);
      }
      this.preSearchHighlightFeatures = positionFeatures;
   }

   pointermove() {
      this.map.on('pointermove', (e) => {
         if (this.map.hasFeatureAtPixel(e.pixel)) {
            this.map.getViewport().style.cursor = 'pointer';
         } else {
            this.map.getViewport().style.cursor = 'inherit';
         }
      });
   }

   clearMarker() {
      this.clearObjectSearch();
   }

   getWMTS = () => {
      const projection = getProjection('EPSG:3857');
      const projectionExtent = projection.getExtent();