WFS

@@ -6,3 +6,6 @@ pnpm i i2d --registry=http://core.pashanhoo.com:8932/repository/npm-public/
 pnpm install @turf/bbox
 ```
 
+
+//    "i2d": "link:D:/work/private/i2d",
+

@@ -11,7 +11,8 @@
     "@turf/bbox": "^7.0.0",
     "axios": "^1.7.2",
     "core-js": "^3.8.3",
-    "i2d": "^0.1.0",
+    "i2d": "0.3.23",
+    "leaflet": "^1.9.4",
     "vue": "^2.6.14",
     "vue-router": "3.5.1"
   },

@@ -12,6 +12,9 @@
         <td>
           <router-link to="/xzq-map">行政区定位</router-link>
         </td>
+        <td>
+          <router-link to="/wfs">wfs</router-link>
+        </td>
       </tr>
       </tbody>
     </table>

 <template>
   <div>
     <button @click="removeGraphicLayer">移出graphic图层</button>
+    <button @click="getCoord">点击地图拾取坐标</button>
+    <button @click="draw">绘制</button>
     <div id="map">
     </div>
   </div>
@@ -13,7 +15,6 @@ import 'i2d/dist/i2d.css'
 import L from "leaflet";
 import {bbox} from "@turf/bbox";
 
-
 export default {
   name: 'DkMap',
   data() {
@@ -55,6 +56,21 @@ export default {
     }
   },
   methods: {
+    draw() {
+      this.graphicLayer.startDraw({
+        type: "distanceMeasure",
+        style: {
+          width: 3,
+          color: "#000dfc"
+        }
+      })
+    },
+    getCoord() {
+      this.map.once(i2d.EventType.click, function (event) {
+        console.log(event);
+        alert(event.latlng)
+      })
+    },
     getArrayRandomOne(arr) {
       const n = Math.floor(Math.random() * arr.length)
       return arr[n]
@@ -68,15 +84,18 @@ export default {
       }
     },
     addMarker() {
+      // eslint-disable-next-line no-debugger
+      console.log(123123123)
+      console.log(i2d)
       let graphic = new i2d.Graphic.Marker({
         latlng: [32.3102954498753, 119.19403010080875],
         style: {
-          rotationAngle: 49,
-          image: "./sdt.png",
-          width: 32,
-          height: 44,
-          horizontalOrigin: i2d.HorizontalOrigin.CENTER,
-          verticalOrigin: i2d.VerticalOrigin.BOTTOM
+          // image: "./sdt.png",
+          width: 16,
+          height: 16,
+          pulse: true,
+          pulseColor: '#191a1b',
+          pulseShadowColor: '#191a1b'
         }
       })
       this.graphicLayer.addGraphic(graphic)
@@ -156,6 +175,11 @@ export default {
 
     // 创建矢量数据图层
     this.graphicLayer = new i2d.Layer.GraphicLayer()
+    this.graphicLayer.on(i2d.EventType.click, (e) => {
+      console.log(e)
+      // eslint-disable-next-line no-debugger
+      debugger
+    })
     this.map.addLayer(this.graphicLayer)
     this.addMarker()
   }

+<template>
+  <div>
+    <input v-model="zrzh">
+    <button @click="query">查询</button>
+    <div id="map">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as i2d from "i2d";
+import 'leaflet/dist/leaflet.css'
+import 'i2d/dist/i2d.css'
+import axios from "axios";
+import proj4 from 'proj4'
+
+export default {
+  name: 'DkMap',
+  data() {
+    return {
+      mapOptions: {
+        copyright: false,
+        basemaps: [
+          {
+            type: 'group',
+            name: '天地图电子',
+            layers: [
+              {
+                type: 'tdt',
+                layer: 'vec_d',
+                key: i2d.Token.tiandituArr,
+                crs: i2d.CRS.EPSG4490,
+              },
+              {
+                type: 'tdt',
+                layer: 'vec_z',
+                key: i2d.Token.tiandituArr,
+                crs: i2d.CRS.EPSG4490,
+              }
+            ],
+            show: true
+          }
+        ],
+        operationallayers: [{
+          name: "宗地",
+          type: "wms",
+          url: "http://www.hzbdcdj.com/geoserver/hzData/wms",
+          layers: "hzData:ZRZ",
+          // 是否启用地图交互(点击查询弹框)
+          interactive: true,
+          popup: "all",
+          show: true,
+          transparent: true,
+          format: "image/png",
+          zIndex: 3
+        }],
+        zoom: 15,
+        minZoom: 1,
+        maxZoom: 18,
+        // 纬度在前
+        center: [33.073665, 107.026747],
+        crs: i2d.CRS.EPSG4490
+      },
+      map: null,
+      graphicLayer: null,
+      zrzh: '610702001204GB00001F0001'
+    }
+  },
+  methods: {
+    query() {
+      this.graphicLayer.clearLayers()
+      const _self = this
+      const data = `<wfs:GetFeature service="WFS" version="1.0.0"
+                        outputFormat="application/json"
+                        xmlns:wfs="http://www.opengis.net/wfs"
+                        xmlns:ogc="http://www.opengis.net/ogc"
+                        xmlns:gml="http://www.opengis.net/gml">
+                          <wfs:Query typeName="hzData:ZRZ">
+                            <ogc:Filter>
+                              <ogc:PropertyIsEqualTo>
+                                <ogc:PropertyName>自然幢号</ogc:PropertyName>
+                                <ogc:Literal>${this.zrzh}</ogc:Literal>
+                              </ogc:PropertyIsEqualTo>
+                            </ogc:Filter>
+                          </wfs:Query>
+                        </wfs:GetFeature>`
+
+      const config = {
+        method: "post",
+        url: "https://www.hzbdcdj.com/geoserver/hzData/ows",
+        headers: {
+          "Content-Type": "application/xml"
+        },
+        data: data
+      }
+
+      axios(config)
+          .then(function (response) {
+            if (response.data.features.length > 0) {
+              _self.graphicLayer.loadGeoJSON(response.data, {
+                flyTo: true,
+                crs: "EPSG:4524"
+              })
+            } else {
+              alert("未查询到数据")
+            }
+          })
+          .catch(function (error) {
+            console.log(error)
+            alert("查询失败:" + error)
+          })
+    },
+  },
+  mounted() {
+
+    /**
+     * 定义4524坐标系
+     */
+    proj4.defs("EPSG:4524", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs")
+    console.log("proj4", proj4.defs["EPSG:4524"])
+
+    // 从数据库读取的地块信息
+    this.map = new i2d.Map('map', this.mapOptions)
+
+    // 创建矢量数据图层
+    this.graphicLayer = new i2d.Layer.GraphicLayer()
+
+    this.map.addLayer(this.graphicLayer)
+  }
+}
+</script>
+
+<style scoped>
+#map {
+  position: absolute;
+  margin: 0;
+  height: 60%;
+  width: 60%;
+}
+</style>

@@ -2,7 +2,8 @@ import Vue from 'vue'   //引入Vue
 import Router from 'vue-router'  //引入vue-router
 import HomeMap from '@/components/HomeMap'
 import DkMap from '@/components/DkMap'
-import XzqMap from '@/components/XzqMap.vue'  //引入根目录下的Hello.vue组件
+import XzqMap from '@/components/XzqMap.vue'
+import WFSQuery from '@/components/WFSQuery.vue'
 
 Vue.use(Router)  //Vue全局使用Router
 
@@ -22,6 +23,11 @@ export default new Router({
             path: '/xzq-map',
             name: 'DkMap',
             component: XzqMap
+        },
+        {
+            path: '/wfs',
+            name: 'WFS',
+            component: WFSQuery
         }
     ]
 })