修改意见

wujingjing

2025-04-02 7866aa30bd13dab1fc0662e1baf6675d0dc1b282

 src/model/map/OLMap.ts

@@ -3,7 +3,7 @@
import type { Overlay } from 'ol';
import { Feature, Map as OpenLayerMap, View } from 'ol';
import type { Extent } from 'ol/extent';
import { extend, 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';
@@ -407,6 +407,7 @@
         const zoom = that.map.getView().getZoom(); //获取当前地图的缩放级别
         Logger.info('当前地图缩放级别为：' + zoom);
      });
      this.pointermove();
   }

   hightLightColor: '0000FFFF';
@@ -769,8 +770,11 @@
            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);
@@ -1392,11 +1396,85 @@
      }
   }

   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({
@@ -1413,11 +1491,26 @@
      }

      // 设置高亮要素
      if (features && features.length > 0) {
         this.searchHighlightLayer.getSource().addFeatures(features);
      if (positionFeatures && positionFeatures.length > 0) {
         this.searchHighlightLayer.getSource().addFeatures(positionFeatures);
      }
      this.preSearchHighlightFeatures = features;
      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();