定位高亮

wujingjing

2025-02-17 6a71c216a24a6623e4aa0b45d7c3240562c09c96

 src/model/map/OLMap.ts

@@ -18,16 +18,16 @@
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 { 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';
import { Logger } from '../logger/Logger';
import axios from 'axios';
import WKT from 'ol/format/WKT';
import { getCurrentPosition } from '/@/utils/brower';

export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
@@ -94,7 +94,7 @@

   activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
   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[]) {
@@ -152,10 +152,68 @@
         view: new View(view),
         interactions: olDefaults({ doubleClickZoom: false }),
      });

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

   gaodeApiKey = 'eea6302da02576fe3f3dd3ba1fbe0a04';

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

      return;
      const url = `https://restapi.amap.com/v5/ip/location?key=${this.gaodeApiKey}`;
      const response = await axios.get(url);
   }

   async gaodeAddressSearch(address) {
      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=fuzhou&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;
   }

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

   displaySearchResult(searchItem) {
      if (!searchItem?.WKT) return;
      const feature = this.readWKT(searchItem.WKT);
      this.highlightSearch(feature);
      const geometry = feature.getGeometry();
	
      const center = geometry.getCoordinates();
      this.map.getView().setCenter(center);
      this.map.getView().setZoom(16);
   }

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

   hightLightColor: '0000FFFF';
@@ -164,11 +222,10 @@
   getPointHighLightStyle(feature) {
      if (!feature) return null;
      let pSize = feature.get('psize') ?? 15;
      pSize += pSize * this.sizeRate;
      pSize += pSize * 2;

      const pcolor = this.hightLightColor;
      const pcolor = '0000FFFF';
      const pstyle = feature.get('pstyle');

      return this.getPointStyles({ color: pcolor, size: pSize, style: pstyle });
   }

@@ -512,17 +569,12 @@
            this.emit('featureChange', feature, layer);
         }
         if (feature) {
            console.log('🚀 ~ feature:', 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.displayFeatureInfo(feature);
         this.highlightSelect(feature);
         this.activeFeature.value = feature;
      });
   }
@@ -543,7 +595,6 @@
   }

   getAllLayerModels() {
      console.log('🚀 ~ this.layerInfo.value:', this.layerInfo.value);
      return this.layerInfo.value.reduce((preVal, curVal) => {
         if (curVal.children && curVal.children.length > 0) {
            return preVal.concat(curVal.children.map((item) => item.model));
@@ -573,10 +624,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,
            icon: layerData.icon,
            model: markRaw(layer),
            get isVisible() {
               return layer.getVisible();
@@ -689,6 +750,9 @@
         source: new VectorTileSource({
            format: new MVT(),
            url: url,
            // minZoom:5,
            // maxZoom:2
            // minZoom:12
         }),
         extent: vectorTileExtent,
         style: style,
@@ -696,10 +760,22 @@
      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,
@@ -740,6 +816,110 @@
            },
         });
      }
   }

   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) {
@@ -754,6 +934,32 @@
      }
   }

   private preSearchHighlightFeatures: Feature[] = [];
   highlightSearch(features) {
      if (!Array.isArray(features)) {
         features = [features];
      }
      // 创建高亮图层
      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 (features && features.length > 0) {
         this.searchHighlightLayer.getSource().addFeatures(features);
      }
      this.preSearchHighlightFeatures = features;
   }
   getWMTS = () => {
      const projection = getProjection('EPSG:3857');
      const projectionExtent = projection.getExtent();