整理绘制

gerson

2025-02-09 6e2557b3ae3e1b43bc01a5122f5fd4aa9b83d755

 src/model/map/OLMap.ts

@@ -24,6 +24,8 @@
import type { Ref, ShallowRef } from 'vue';
import { markRaw, ref } from 'vue';
import { MarkerOverlay } from './overlay/marker';
import { Text } from 'ol/style';

export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
   /** @description 默认地图 */
@@ -80,6 +82,8 @@

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

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

   /** @description 主题信息 */
   themeInfo = ref([] as any[]);
@@ -151,6 +155,150 @@
      this.applySourceType(this.activeSourceType.value);
      this.listenMapClick();
      this.addBasicControl();
   }

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

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

      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 }) {
      const lSize = config.lsize;
      if (!lSize) return null;
      const lColor = config.lcolor;
      const lstyle = config.lstyle;

      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,
            }),
         });
      }
      return [this.lineStyleMap[lKey]];
   }

   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) {
@@ -277,15 +425,15 @@
            this.emit('featureChange', feature, layer);
         }
         if(feature){
            console.log("🚀 ~ feature:", feature);
            console.log('🚀 ~ feature:', feature);
            const otype = feature.get('otype');
            console.log("🚀 ~ otype:", otype)
            console.log('🚀 ~ otype:', otype);
            const oname = feature.get('oname');
            console.log("🚀 ~ oname:", oname)
            console.log('🚀 ~ oname:', oname);
            const geometryType = feature.getGeometry().getType();
            console.log("🚀 ~ geometryType:", geometryType)
            console.log('🚀 ~ geometryType:', geometryType);
            const properties = feature.getProperties();
            console.log("🚀 ~ properties:", properties)
            console.log('🚀 ~ properties:', properties);
         }
         this.activeFeature.value = feature;
         // this.displayFeatureInfo(feature);