高亮问题

wujingjing

2025-02-10 e792d4d46e406da8d0a4ae8ad97db34a95f1c66a

 src/model/map/OLMap.ts

@@ -25,6 +25,9 @@
import { markRaw, ref } from 'vue';
import { MarkerOverlay } from './overlay/marker';
import { Text } from 'ol/style';
import { Select } from 'ol/interaction';
import { click } from 'ol/events/condition';
import { Polygon } from 'ol/geom';

export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
@@ -155,6 +158,46 @@
      this.addBasicControl();
   }

   hightLightColor: '0000FFFF';
   sizeRate: 0;

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

      const pcolor = this.hightLightColor;
      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> = {};

@@ -164,7 +207,7 @@
    * @returns
    */
   getPointStyles(config: { size; color; style }) {
      const pSize = config.size ?? 15;
      const pSize = config.size;

      const pcolor = config.color;
      const pstyle = config.style;
@@ -189,6 +232,7 @@
               this.pointStyeMap[pkey] = new Style({
                  text: new Text({
                     font: `${pSize}px "ywifont"`,

                     text: config?.text ?? '',
                     fill: new Fill({ color: `#${pcolor}` }),
                  }),
@@ -352,7 +396,6 @@
      this.adjustViewToOverlays(markers);
   }


   checkEquipIsShow() {
      for (const item of this.layerInfo.value) {
         if (item.id === 'equip') {
@@ -367,7 +410,6 @@
         if (item.type === 'equip') {
            return item;
         }
			
      }
   }
   createEleOverlay(dom: string | HTMLElement, position = [0, 0]) {
@@ -480,8 +522,8 @@
            const properties = feature.getProperties();
            console.log('🚀 ~ properties:', properties);
         }
         this.displayFeatureInfo(feature);
         this.activeFeature.value = feature;
         // this.displayFeatureInfo(feature);
      });
   }

@@ -491,7 +533,7 @@

   getAllLayers() {
      const allLayers = this.layerInfo.value.reduce((preVal, curVal) => {
         if (preVal.children && preVal.children.length > 0) {
         if (curVal.children && curVal.children.length > 0) {
            return preVal.concat(curVal.children.map((item) => item));
         } else {
            return preVal;
@@ -501,8 +543,9 @@
   }

   getAllLayerModels() {
      console.log('🚀 ~ this.layerInfo.value:', this.layerInfo.value);
      return this.layerInfo.value.reduce((preVal, curVal) => {
         if (preVal.children && preVal.children.length > 0) {
         if (curVal.children && curVal.children.length > 0) {
            return preVal.concat(curVal.children.map((item) => item.model));
         } else {
            return preVal;
@@ -512,21 +555,6 @@

   /** @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);
      //       },
      //    };
      // });
      this.layerInfo.value = layerGroup.reduce((preVal, curVal) => {
         const group = curVal.group;
         const groupId = `group-${group}`;
@@ -570,7 +598,6 @@
            return this._isVisible;
         },
         set isVisible(val) {
            console.log("🚀 ~ val:", val)
            this._isVisible = val;
            that.toggleMarkerOverlayVisible(val);
         },
@@ -673,9 +700,16 @@
   displayFeatureInfo(feature) {
      const highlightStyle = {
         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({
@@ -683,6 +717,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)`,
            // }),
         }),
      };
      // 创建高亮图层
@@ -700,6 +743,7 @@
      // 设置高亮要素
      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) {