粤政图 wfs

src/components/Map/YztMap/index.vue

@@ -55,20 +55,20 @@ watch(
 );
 const mapList = reactive({
   satellite2: [
-    { layer: 'map', code: 'YZT1712111943104', zIndex: '-99', visible: true },
-    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+    { layer: 'map', layerType: 'WFS', code: 'YZT1712111943104', zIndex: '-99', visible: true },
+    { layer: 'annotation', layerType: 'WMTS', code: 'YZT1695608158269', zIndex: '-98', visible: true }
   ],
   satellite3: [
-    { layer: 'map', code: 'YZT1708679726700', zIndex: '-99', visible: true },
-    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+    { layer: 'map', layerType: 'WMTS', code: 'YZT1708679726700', zIndex: '-99', visible: true },
+    { layer: 'annotation', layerType: 'WMTS', code: 'YZT1695608158269', zIndex: '-98', visible: true }
   ],
   imageMap: [
-    { layer: 'map', code: 'YZT1640925052482', zIndex: '-99' },
-    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+    { layer: 'map', layerType: 'WMTS', code: 'YZT1640925052482', zIndex: '-99' },
+    { layer: 'annotation', layerType: 'WMTS', code: 'YZT1695608158269', zIndex: '-98', visible: true }
   ],
   imageMap2: [
-    { layer: 'map', code: 'gd', zIndex: '-99', visible: true },
-    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+    { layer: 'map', layerType: 'JSON', code: 'gd', zIndex: '-99', visible: true },
+    { layer: 'annotation', layerType: 'WMTS', code: 'YZT1695608158269', zIndex: '-98', visible: true }
   ]
 });
 // 监听地图类型变化

src/hooks/AMap/useAMap.ts

@@ -248,7 +248,7 @@ export function useAMap(options) {
       const data = obj[key];
       if (clickMarker) {
         const extData = clickMarker.getExtData();
-        if (data.id === extData.id) {
+        if (data.id === extData.id && data.dataType === extData.dataType) {
           hideInfoFlag = false;
           data.isHover = true;
         }
@@ -329,6 +329,7 @@ export function useAMap(options) {
         plotLayers['points2'].addOverlay(marker);
         addPoints.push(data);
         if (data.isHover) {
+          clickMarker = marker;
           options.onMarkerClick(data);
         }
       }

src/utils/olMap/olMap.ts

@@ -95,7 +95,6 @@ export class olMap {
   private traceFeature;
   // 自定义绘制结束调用方法
   private drawEndMethod;
-  private selectedFeature;
   private drawing;
   private path;
   private anyLine;
@@ -160,10 +159,9 @@ export class olMap {
       const feature = event.selected[0]; // 获取被选中的要素集合
       const extData = feature.get('extData');
       if (!!feature) {
-        this.clickMarker = feature;
-        if (this.selectedFeature) {
-          const selectData = this.selectedFeature.get('extData');
-          this.selectedFeature.setStyle(
+        if (this.clickMarker) {
+          const selectData = this.clickMarker.get('extData');
+          this.clickMarker.setStyle(
             new Style({
               image: new Icon({
                 src: selectData.image,
@@ -177,8 +175,8 @@ export class olMap {
         }
         if (['1', '2'].includes(extData.type)) {
           // 多点位 单点
-          if (this.selectedFeature !== feature) {
-            this.selectedFeature = feature;
+          if (this.clickMarker !== feature) {
+            this.clickMarker = feature;
             feature.setStyle(
               new Style({
                 image: new Icon({
@@ -194,7 +192,7 @@ export class olMap {
           }
         } else if (extData.type === '3') {
           // 聚合要素
-          this.select.getFeatures().clear();
+          // this.select.getFeatures().clear();
           const currentZoom = this.map.getView().getZoom();
           this.map.getView().setZoom(currentZoom + 1);
           this.map.getView().setCenter([Number(extData.longitude), Number(extData.latitude)]);
@@ -207,8 +205,8 @@ export class olMap {
     // 添加新的图层
     if (Array.isArray(options.id)) {
       for (const layer of options.id) {
-        if (layer.code === 'gd') {
-          await this.initJsonLayer(layer);
+        if (layer.layerType === 'JSON') {
+          await this.createJsonLayer(layer);
         } else {
           await this.formatXml(layer);
         }
@@ -256,28 +254,40 @@ export class olMap {
   }
   formatXml(options) {
     const xml = new WMTSCapabilities();
-    return this.getCapabilities(options.code).then((res) => {
-      const geoJson = xml.read(res.data);
-      const data = geoJson.Contents.Layer[0];
-      const layerParam = {
-        layerName: data.Abstract,
-        styleName: data.Identifier,
-        tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
-        format: data.Format[0]
-      };
-      this.createWmsLayer(options, layerParam);
+    return this.getCapabilities(options.code, options.layerType).then((res) => {
+      if (options.layerType === 'WMTS') {
+        const geoJson = xml.read(res.data);
+        const data = geoJson.Contents.Layer[0];
+        const layerParam = {
+          layerName: data.Abstract,
+          styleName: data.Identifier,
+          tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
+          format: data.Format[0]
+        };
+        this.createWmtsLayer(options, layerParam);
+      } else if (options.layerType === 'WFS') {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(res.data, 'text/xml');
+        const featureType = xmlDoc.getElementsByTagName('FeatureType')[0];
+        const layerParam = {
+          layerName: featureType.getElementsByTagName('Title')[0].textContent,
+          typeName: featureType.getElementsByTagName('Name')[0].textContent,
+          srsName: featureType.getElementsByTagName('SRS')[0].textContent
+        };
+        this.createWfsLayer(options, layerParam);
+      }
     });
   }
 
   // 请求接口获取地图信息
-  getCapabilities(code) {
-    return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities', {
+  getCapabilities(code, service) {
+    return axios.get(commonUrl + code + '?SERVICE=' + service + '&REQUEST=GetCapabilities', {
       headers: globalHeaders()
     });
   }
 
-  // 请求地图图片加载图层
-  createWmsLayer(options, layerParam) {
+  // 请求WMTS地图图片加载图层
+  createWmtsLayer(options, layerParam) {
     const source = new WMTS({
       url: commonUrl + options.code,
       crossOrigin: 'Anonymous',
@@ -326,23 +336,45 @@ export class olMap {
     layer.set('id', options.code);
     this.map.addLayer(layer);
   }
+  //
+  createWfsLayer(options, layerParam) {
+    const source = new VectorSource({
+      format: new GeoJSON(),
+      url: `${commonUrl}${options.code}?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&typeName=流域:GEO_BAS_POLYGON&outputFormat=application/json& srsName=EPSG:4490`
+    });
+
+    const vectorLayer = new VectorLayer({
+      source: source,
+      style: new Style({
+        fill: new Fill({
+          color: 'rgba(255, 255, 255, 0.6)'
+        }),
+        stroke: new Stroke({
+          color: '#319FD3',
+          width: 1
+        })
+      })
+    });
 
+    this.map.addLayer(vectorLayer);
+  }
   // 加载json图层
-  initJsonLayer(layer) {
+  createJsonLayer(layer) {
     return new Promise((resolve, reject) => {
       const geojsonParser = new GeoJSON();
-      console.log(this.map.getView().getProjection())
+      console.log(this.map.getView().getProjection());
       const features = geojsonParser.readFeatures(gdJson, {
         dataProjection: 'EPSG:4326',
         featureProjection: this.map.getView().getProjection()
       });
       const jsonLayer = new VectorLayer({
-        source: new VectorSource({features}),
-        style: new Style({ // 必须设置样式才能显示
+        source: new VectorSource({ features }),
+        style: new Style({
+          // 必须设置样式才能显示
           fill: new Fill({ color: '#ffffff' }),
           stroke: new Stroke({ color: 'rgba(0,0,0, 1)', width: 1 })
         }),
-        zIndex: -100
+        zIndex: layer.zIndex ? layer.zIndex : -99
       });
       this.map.addLayer(jsonLayer);
       resolve({});
@@ -778,7 +810,7 @@ export class olMap {
       const name = key === 'search' ? 'search' : 'point';
       if (this.clickMarker) {
         const extData = this.clickMarker.get('extData');
-        if (data.id === extData.id) {
+        if (data.id === extData.id && data.dataType === extData.dataType) {
           hideInfoFlag = false;
           data.isHover = true;
         }
@@ -858,12 +890,13 @@ export class olMap {
             })
           );
           this.plotLayers[name].getSource().addFeature(feature);
+          if (data.isHover) {
+            this.clickMarker = feature;
+            this.options.onMarkerClick(data);
+          }
         };
         img.src = data.image; // 设置图片的 URL，触发加载
         this.markers.push(data);
-        if (data.isHover) {
-          this.options.onMarkerClick(data);
-        }
       }
     });
     if (hideInfoFlag) {
@@ -931,22 +964,20 @@ export class olMap {
   hideInfo(flag?: boolean) {
     this.map.removeOverlay(this.infoWindow);
     this.infoWindow = null;
-    if (!!flag && this.select) {
-      this.select.getFeatures().clear();
-      if (this.selectedFeature) {
-        const selectData = this.selectedFeature.get('extData');
-        this.selectedFeature.setStyle(
-          new Style({
-            image: new Icon({
-              src: selectData.image,
-              scale: selectData.scale,
-              anchor: [0.5, 0.5],
-              anchorXUnits: 'fraction',
-              anchorYUnits: 'fraction'
-            })
+    if (!!flag && this.clickMarker) {
+      const selectData = this.clickMarker.get('extData');
+      this.clickMarker.setStyle(
+        new Style({
+          image: new Icon({
+            src: selectData.image,
+            scale: selectData.scale,
+            anchor: [0.5, 0.5],
+            anchorXUnits: 'fraction',
+            anchorYUnits: 'fraction'
           })
-        );
-      }
+        })
+      );
+      this.clickMarker = null;
     }
   }
   /**