wujingjing
2025-04-02 7866aa30bd13dab1fc0662e1baf6675d0dc1b282
src/model/map/OLMap.ts
@@ -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,6 +1396,32 @@
      }
   }
   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)) {
@@ -1408,6 +1438,18 @@
         });
         // 设置字体图标样式
         // 添加点击事件监听
         // 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({
@@ -1454,6 +1496,21 @@
      }
      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();