卷帘、点定位、面定位、查询

.eslintrc-auto-import.json

@@ -84,6 +84,7 @@
     "getNode": true,
     "getParents": true,
     "mitt": true,
-    "renameKeys": true
+    "renameKeys": true,
+    "layer": true
   }
 }

auto-imports.d.ts

@@ -27,6 +27,7 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const layer: typeof import('@layui/layer-vue')['layer']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
   const mapState: typeof import('pinia')['mapState']
@@ -113,6 +114,7 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly layer: UnwrapRef<typeof import('@layui/layer-vue')['layer']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
     readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
@@ -192,6 +194,7 @@ declare module '@vue/runtime-core' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly layer: UnwrapRef<typeof import('@layui/layer-vue')['layer']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
     readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>

package.json

@@ -16,7 +16,7 @@
     "core-js": "^3.6.5",
     "echarts": "^5.4.3",
     "gm-crypt": "^0.0.2",
-    "gt-maputils": "^0.1.9",
+    "gt-maputils": "^0.1.13",
     "less": "^4.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",

public/data/baseLayer.json

+{
+  "code": 200,
+  "data": [
+    {
+      "imgUrl": "/img/dt.png",
+      "label": "显示收藏点",
+      "isCheck": false,
+      "title": "地图"
+    },
+    {
+      "imgUrl": "/img/yx.png",
+      "label": "开启路网",
+      "isCheck": false,
+      "title": "影像"
+    }
+  ]
+}

public/data/resourceData.json

+{
+    "code": 200,
+    "data": [
+        {
+            "name": "江苏地图（超图动态）",
+            "type": "supermap_rest",
+            "url": "http://192.168.2.205:8090/iserver/services/map-JiangSuShengGeShi4490/rest/maps/%E6%B1%9F%E8%8B%8F%E7%9C%81%E5%90%84%E5%B8%824490",
+            "query": [
+                {
+                    "layerId": "江苏省各市4490@江苏省各市4490"
+                }
+            ]
+        },
+        {
+            "name": "江苏地图（Arcgis切片）",
+            "status": true,
+            "type": "arcgis_tile",
+            "url": "http://192.168.2.94:6080/arcgis/rest/services/XZQ/JSZQ_2018_2K/MapServer"
+        },
+        {
+            "name": "矢量底图（天地图）",
+            "type": "tdt",
+            "layerType": "vec",
+            "key": "7685d116336b3e919072164090de473e"
+        },
+        {
+            "name": "矢量底图注记（天地图）",
+            "type": "tdt",
+            "layerType": "vec",
+            "isLabel": true,
+            "key": "7685d116336b3e919072164090de473e"
+        },
+        {
+            "name": "2022年永久基本农田"
+        },
+        {
+            "name": "2021年永久基本农田"
+        },
+        {
+            "name": "2020年永久基本农田"
+        },
+        {
+            "name": "图斑地图（超图动态）",
+            "type": "supermap_rest",
+            "url": "http://192.168.5.47:8090/iserver/services/map-YJJBNT/rest/maps/CJDCQ@YJJBNT",
+            "query": [
+                {
+                    "layerId": "CJDCQ@YJJBNT"
+                }
+            ]
+        }
+    ]
+}

src/api/http.js

@@ -36,7 +36,6 @@ class Http {
     /* 响应拦截 */
     this.service.interceptors.response.use(
       (response) => {
-        console.log(response)
         switch (response.data.code) {
           case 200:
             return response.data

src/api/module/main.js

@@ -6,9 +6,9 @@ import Http from '../http'
  */
 export const getJsonCode = function (code) {
   // 使用 Http.get 方法请求指定路径的 JSON 数据
-  return Http.get(`/src/data/${code}.json`)
+  return Http.get(`/data/${code}.json`)
 }
 
 export const getList = function (url) {
-  return Http.get(`/src/data/${url}.json`)
+  return Http.get(`/data/${url}.json`)
 }

src/assets/img/location.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -898 -382 )">
+    <path d="M 20.52103137109375 24  L 18.01577085546875 16.421060671875  L 15.995399500390624 16.421060671875  L 18.01577085546875 22  L 3.0044115910156255 22  L 4.86315324140625 16.421060671875  L 3.0044115910156255 16.421060671875  L 0.4789473623046875 24  L 20.52103137109375 24  Z M 10.520193068202575 0  C 10.513458489386316 0  10.50672391316096 0  10.499989355078124 2.54765625E-05  C 6.0032335732220306 2.548950667287023E-05  2.3578927618597434 3.6759994169308277  2.357892749023437 8.210543062500001  C 2.357892749023437 12.743645203125002  10.499989378320313 20.8421086171875  10.499989355078124 20.8421086171875  C 10.499989331835936 20.8421086171875  18.66228969746094 12.73345846875  18.66228969746094 8.210543062500001  C 18.66228969749945 3.675974144738699  15.016948868211946 0  10.520193068202575 0  Z M 14.257880105273436 7.5789648046875  C 14.257880092437132 9.671831100942725  12.575415098864559 11.3684344453125  10.499989355078124 11.3684344453125  C 8.424563602215056 11.3684344453125  6.742098604882813 9.671831086658141  6.742098604882813 7.578964781250001  C 6.742098604882813 5.486098475841861  8.424563602215056 3.7894951171875  10.499989355078124 3.7894951171875  C 12.575415107941199 3.7894951171875  14.257880105273436 5.486098475841861  14.257880105273436 7.578964781250001  Z " fill-rule="nonzero" fill="#d9001b" stroke="none" transform="matrix(1 0 0 1 898 382 )" />
+  </g>
+</svg>
\ No newline at end of file

src/data/resourceData.json

-{
-    "code": 200,
-    "data": [
-        {
-            "name": "2024年永久基本农田",
-            "status": true,
-            "id": "000"
-        },
-        {
-            "name": "2023年永久基本农田",
-            "status": false,
-            "id": "001"
-        },
-        {
-            "name": "基础地理（天地图）",
-            "status": true,
-            "id": "002"
-        },
-        {
-            "name": "2023年遥感影像（天地图）",
-            "status": true,
-            "id": "003"
-        },
-        {
-            "name": "2022年永久基本农田",
-            "status": true,
-            "id": "004"
-        },
-        {
-            "name": "2021年永久基本农田",
-            "status": true,
-            "id": "005"
-        },
-        {
-            "name": "2020年永久基本农田",
-            "status": false,
-            "id": "006"
-        }
-    ]
-}
\ No newline at end of file

src/views/home/index.vue

@@ -11,8 +11,8 @@
   </header>
   <main class="main">
     <!-- 地图 -->
-    <div class="map-container"
-         ref="testMap" />
+    <div ref="mapContainer"
+         class="map-container" />
 
     <!-- 资源目录最小化 -->
     <div v-show="resourceIsFold"
@@ -37,14 +37,13 @@
         <lay-input suffix-icon="layui-icon-search"
                    size="sm" />
         <div class="list-box">
-          <div v-for="(item) in resourceData"
+          <div v-for="(item) in state.resourceData"
                :key="item.id"
                class="list-item">
             <lay-checkbox v-model="item.status"
-                          :name="item.id"
                           skin="primary"
-                          value=""
-                          :label="item.name" />
+                          :label="item.name"
+                          @change="triggerLayer(item)" />
           </div>
         </div>
       </div>
@@ -130,36 +129,45 @@
         <lay-line direction="vertical"
                   theme="black" />
         <div class="tool-part"
-             @click="DrawUtils.startDraw(map, 'Polygon')">
+             @click="startDraw">
           <i class="iconfont icon-widget-huizhi" />
           <span>绘制范围</span>
         </div>
         <lay-line direction="vertical"
                   theme="black" />
-        <div class="tool-part">
+        <div class="tool-part"
+             @click="identify">
           <i class="iconfont icon-widget-hand-point" />
           <span>点选</span>
         </div>
         <lay-line direction="vertical"
                   theme="black" />
-        <div class="tool-part">
+        <div class="tool-part"
+             @click="returnHome">
           <i class="iconfont icon-widget-map-full" />
           <span>全幅</span>
         </div>
         <lay-line direction="vertical"
                   theme="black" />
         <div class="tool-part"
-             @click="MeasureUtils.startMeasure(map, 'length')">
+             @click="startMeasure">
           <i class="iconfont icon-widget-celiang" />
           <span>测距</span>
         </div>
+        <lay-line direction="vertical"
+                  theme="black" />
+        <div class="tool-part"
+             @click="switchSwipe">
+          <i class="iconfont icon-widget-juanlian-" />
+          <span>卷帘</span>
+        </div>
       </div>
     </div>
 
     <!-- 行政区村庄等输入框下拉框 -->
     <div class="input-box">
       <lay-cascader v-model="regionData"
-                    :options="cascaderOptions"
+                    :options="state.cascaderOptions"
                     :only-last-level="true"
                     allow-clear
                     placeholder="请选择行政区"
@@ -179,11 +187,11 @@
          @mouseenter="mapTypeIsExpand = true"
          @mouseleave="mapTypeIsExpand = false">
       <ul class="list-box">
-        <li v-for="(item, index) in mapTypeData"
+        <li v-for="(item, index) in state.mapTypeData"
             :key="index"
             class="list-item"
-            :class="selectIndex == index ? 'active' : ''"
-            :style="mapTypeIsExpand ? `right:${(mapTypeData.length - index - 1) * 96}px` : `right:${(mapTypeData.length - index - 1) * 10}px`"
+            :class="selectIndex === index ? 'active' : ''"
+            :style="mapTypeIsExpand ? `right:${(state.mapTypeData.length - index - 1) * 96}px` : `right:${(state.mapTypeData.length - index - 1) * 10}px`"
             @click="toSelectDt(index)">
           <img :src="item.imgUrl"
                alt="">
@@ -203,6 +211,7 @@
 
     <!-- 点定位 -->
     <div class="draggable-panel point"
+         style="width:28vw"
          v-show="showPointPanel">
       <div class="panel-title"><span>定位点查询</span>
         <div class="fold-btn"
@@ -222,40 +231,55 @@
           <div class="content"
                style="display: block;">
             <div class="row"> <span>经度：</span><input type="text"
+                     id="xdu"
                      placeholder="度"><span>°</span><input type="text"
+                     id="xfen"
                      placeholder="分"><span>′</span><input type="text"
+                     id="xmiao"
                      placeholder="秒"><span>″</span></div>
             <div class="row"> <span>纬度：</span>
               <input type="text"
+                     id="ydu"
                      placeholder="度"><span>°</span><input type="text"
+                     id="yfen"
                      placeholder="分"><span>′</span><input type="text"
+                     id="ymiao"
                      placeholder="秒"><span>″</span>
             </div>
 
           </div>
           <div class="content">
             <div class="row"> <span>x坐标：</span><input type="text"
-                     placeholder="x"><span>米</span></div>
+                     id="x"
+                     placeholder="x"><span></span></div>
             <div class="row"> <span>y坐标：</span><input type="text"
-                     placeholder="y"><span>米</span></div>
+                     id="y"
+                     placeholder="y"><span></span></div>
+
+            <div class="text"
+                 style="margin-left:10px;color:#e62121">注意：仅支持经纬度查询！</div>
           </div>
         </div>
         <div class="buffer"><span>缓冲区范围</span>
           <div class="slider">
-            <LaySlider></LaySlider>
+            <lay-slider v-model="sliderValue">
+            </lay-slider>
           </div>
-          <span>米</span>
+          <span>{{sliderValue}} 米</span>
         </div>
         <div class="bottomBtn">
-          <lay-button><i class="iconfont icon-widget-location1" />定位</lay-button>
+          <lay-button @click="locateToPoint"><i class="iconfont icon-widget-location1" />定位</lay-button>
           <lay-button type="normal"
-                      class="btn-right">确定</lay-button>
-          <lay-button class="btn-right">取消</lay-button>
+                      class="btn-right"
+                      @click="commit('point')">确定</lay-button>
+          <lay-button class="btn-right"
+                      @click="cancel('point')">取消</lay-button>
         </div>
       </div>
     </div>
     <!-- 面定位 -->
     <div class="draggable-panel polygon"
+         style="width:28vw"
          v-show="showPolygonPanel">
       <div class="panel-title"><span>定位面查询</span>
         <div class="fold-btn"
@@ -279,16 +303,18 @@
         <div class="text"
              style="margin-left:10px;color:#e62121">注意：云查询面积不得大于4500亩，仅支持经纬度查询！</div>
         <div class="bottomBtn">
-          <lay-button><i class="iconfont icon-widget-location1" />定位</lay-button>
+          <lay-button @click="locateTo"><i class="iconfont icon-widget-location1" />定位</lay-button>
           <lay-button type="normal"
                       class="btn-right"
-                      @click="addGeoJson">确定</lay-button>
-          <lay-button class="btn-right">取消</lay-button>
+                      @click="commit('polygon')">确定</lay-button>
+          <lay-button class="btn-right"
+                      @click="cancel('polygon')">取消</lay-button>
         </div>
       </div>
     </div>
     <!-- 查询 -->
     <div class="draggable-panel query"
+         style="left:80%"
          v-show="showQueryPanel">
       <div class="panel-title"><span>永久基本农田信息</span>
         <div class="fold-btn"
@@ -298,22 +324,25 @@
         </div>
       </div>
       <div class="panel-content">
-        <div class="name"><span>座落单位名称：</span><span>辽宁省铁岭市西丰县林昌村</span></div>
-        <div class="count"><span>图斑个数：</span><span>5</span></div>
+        <div class="name"><span>座落单位名称：</span><span>{{zldwmc}}</span></div>
+        <div class="count"><span>图斑个数：</span><span>{{tbCount}}</span></div>
       </div>
     </div>
   </main>
 </template>
 <script setup>
-import {
-  MapUtils, Config, ViewUtils, LayerUtils, GeojsonUtils, DrawUtils, MeasureUtils, GeometryUtils
-} from 'gt-maputils'
-import { divIcon, marker } from 'leaflet'
-
-import { reactive, ref, toRefs, onMounted } from 'vue'
-import { getList } from '../../api/module/main'
-const imgUrl1 = new URL('../../assets/img/dt.png', import.meta.url).href
-const imgUrl2 = new URL('../../assets/img/yx.png', import.meta.url).href
+import { LayerUtils, MapUtils, ViewUtils, MeasureUtils, DrawUtils, GeojsonUtils, SwipeUtils, GeometryUtils } from 'gt-maputils'
+import { getList } from '@/api/module/main'
+import * as turf from '@turf/turf';
+import { icon, divIcon, marker } from "leaflet";
+/**
+ * @type {Ref<HTMLDivElement>}
+ */
+const mapContainer = ref()
+/**
+ * @type {import('leaflet').Map}
+ */
+let $map
 // 工具栏是否展开
 const toolIsFold = ref(false)
 // 资源目录是否展开
@@ -328,6 +357,13 @@ const showPointPanel = ref(false)
 const showPolygonPanel = ref(false)
 // 查询显示
 const showQueryPanel = ref(false)
+// 行政区字段
+const xzqField = ref("zldwmc");
+const zldwmc = ref("")
+//图斑数量
+const tbCount = ref(0)
+const sliderValue = ref(0)
+
 
 const openLw = ref(false)
 // 选择行政区
@@ -367,19 +403,6 @@ const replaceFields = {
  * @property {cascaders[]} areaList - 子级
  */
 
-/**
- * @type {Ref<HTMLDivElement>}
- */
-const testMap = ref()
-/**
- * @type {Map}
- */
-let map
-/**
- * @type {LayerWithId}
- */
-let layer
-
 
 
 /**
@@ -392,23 +415,12 @@ let layer
 
 const supermapServiceUrl = 'http://192.168.2.205:8090/iserver/services/map-DLTB2019-2/rest/maps/dltb2019%40dltb'
 
+
+
 const state = reactive({
   resourceData: [],
-  cascaderOptions: []
-})
-const {
-  resourceData,
-  cascaderOptions
-} = toRefs(state)
-// 获取资源目录列表
-getList('resourceData').then((res) => {
-  console.log(res)
-  state.resourceData = res.data
-})
-// 获取省市区
-getList('china').then((res) => {
-  console.log(res)
-  state.cascaderOptions = res.data
+  cascaderOptions: [],
+  mapTypeData: []
 })
 
 // 村庄搜索
@@ -417,52 +429,54 @@ const villageSearch = function (val) {
 }
 // 地图类型
 const mapTypeIsExpand = ref(false)
-const mapTypeData = reactive([
-  {
-    imgUrl: imgUrl1,
-    label: '显示收藏点',
-    isCheck: false,
-    title: '地图'
-  },
-  {
-    imgUrl: imgUrl2,
-    label: '开启路网',
-    isCheck: false,
-    title: '影像'
-  }
-])
 // 地图默认选中第二个
 const selectIndex = ref(1)
 const toSelectDt = function (index) {
   selectIndex.value = index
 }
 
-
 onMounted(() => {
-  map = MapUtils.createBaseMap(testMap.value, {
-    crs: {
-      wkid: 4490
-    }
-  })
-  ViewUtils.setHome(map, {
-    bounds: [
-      [118.46, 31.92],
-      [118.47, 32.03]
-    ],
-    minZoom: 8
-  })
-  addLayer()
+  initMap()
+  getData()
+
   draggable('.point')
   draggable('.polygon')
+  draggable('.query')
   changeTab(0)
   addRow()
   addRow()
   addRow()
 })
-function addLayer () {
-  layer = LayerUtils.addLayer(map, {
-    type: 'supermap_rest',
-    url: supermapServiceUrl
+
+function getData () {
+  // 获取资源目录列表
+  getList('resourceData').then((res) => {
+    state.resourceData = res.data
+    initLayer()
+  })
+  // 获取省市区
+  getList('china').then((res) => {
+    state.cascaderOptions = res.data
+    console.log(state.cascaderOptions)
+  })
+  getList('baseLayer').then(res => {
+    state.mapTypeData = res.data
+  })
+}
+
+function initMap () {
+  $map = MapUtils.createBaseMap(mapContainer.value, {
+    crs: {
+      wkid: 4490
+    }
+  })
+  ViewUtils.setHome($map, {
+    bounds: [
+      [115.56057557471091, 29.882667954127648],
+      [122.7346505072892, 35.900324837872425]
+    ],
+    zoom: 8,
+    minZoom: 0
   })
 }
 function draggable (key) {
@@ -498,6 +512,7 @@ function draggable (key) {
     active = false;
   });
 }
+let activeTab = 0;
 function changeTab (index) {
   let i, tabcontent, tablinks;
   tabcontent = document.getElementsByClassName("content");
@@ -510,6 +525,7 @@ function changeTab (index) {
   }
   document.getElementsByClassName("content")[index].style.display = "block";
   tablinks[index].className += " active";
+  activeTab = index;
 }
 let pointCount = 0;
 function addRow () {
@@ -521,13 +537,49 @@ function addRow () {
   newRow.style = "margin:5px;";
   newRow.innerHTML = `<span class="label" style="margin-right: 20px;">坐标点` + pointCount + `</span><span>X:</span>
   <input type="text" style="border: none;outline: none;padding: 8px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
-  border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" name="x`+ pointCount +
+  border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" id="x`+ pointCount +
     `"><span>Y:</span><input type="text"  style="border: none;outline: none;padding: 8px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
-  border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" name="y`+ pointCount + `">`;
+  border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" id="y`+ pointCount + `">`;
   table.appendChild(newRow);
 }
-function addGeoJson () {
-  let data = {
+function getPoints (type) {
+  if (type == "geometry") {
+    let firstPoint = null;;
+    let geometry = {
+      "parts": [],
+      "style": null,
+      "prjCoordSys": null,
+      "id": 0,
+      "type": "REGION",
+      "partTopo": null,
+      "points": []
+    }
+    for (let i = 1; i < pointCount + 1; i++) {
+      let x = document.getElementById("x" + i).value;
+      let y = document.getElementById("y" + i).value;
+      if (x != "" && y != "") {
+        if (firstPoint == null) { firstPoint = { x: Number(x), y: Number(y) }; }
+        geometry.points.push({ x: Number(x), y: Number(y) })
+      }
+    }
+    if (firstPoint.x && firstPoint.y) {
+      geometry.points.push(firstPoint);
+      geometry.parts.push(pointCount + 1);
+    }
+    return geometry;
+  } else {
+    let firstPoint = [];
+    let points = []
+    for (let i = 1; i < pointCount + 1; i++) {
+      let x = document.getElementById("x" + i).value;
+      let y = document.getElementById("y" + i).value;
+      if (x != "" && y != "") {
+        if (firstPoint.length < 2) { firstPoint = [x, y] }
+        points.push([x, y])
+      }
+    }
+
+    let polygon = {
       "type": "FeatureCollection",
       "features": [
         {
@@ -537,492 +589,301 @@ function addGeoJson () {
           },
           "geometry": {
             "type": "MultiPolygon",
-          "coordinates": [
-            [
-              [
-                [
-                  118.897299,
-                  32.02599
-                ],
-                [
-                  118.893303,
-                  32.026212
-                ],
-                [
-                  118.895235,
-                  32.028178
-                ],
-                [
-                  118.894384,
-                  32.032069
-                ],
-                [
-                  118.892003,
-                  32.034575
-                ],
-                [
-                  118.885522,
-                  32.034631
-                ],
-                [
-                  118.883062,
-                  32.035544
-                ],
-                [
-                  118.885012,
-                  32.036735
-                ],
-                [
-                  118.885706,
-                  32.039075
-                ],
-                [
-                  118.882035,
-                  32.041
-                ],
-                [
-                  118.882474,
-                  32.042578
-                ],
-                [
-                  118.878943,
-                  32.041401
-                ],
-                [
-                  118.877634,
-                  32.045555
-                ],
-                [
-                  118.879646,
-                  32.046496
-                ],
-                [
-                  118.877766,
-                  32.048919
-                ],
-                [
-                  118.87954,
-                  32.049736
-                ],
-                [
-                  118.881587,
-                  32.047881
-                ],
-                [
-                  118.887313,
-                  32.05076
-                ],
-                [
-                  118.888262,
-                  32.054747
-                ],
-                [
-                  118.888244,
-                  32.058637
-                ],
-                [
-                  118.885969,
-                  32.06099
-                ],
-                [
-                  118.88806,
-                  32.060962
-                ],
-                [
-                  118.884915,
-                  32.067108
-                ],
-                [
-                  118.882658,
-                  32.067648
-                ],
-                [
-                  118.881499,
-                  32.06935
-                ],
-                [
-                  118.875904,
-                  32.072395
-                ],
-                [
-                  118.877002,
-                  32.075343
-                ],
-                [
-                  118.880225,
-                  32.072617
-                ],
-                [
-                  118.883879,
-                  32.070762
-                ],
-                [
-                  118.881604,
-                  32.074167
-                ],
-                [
-                  118.8851,
-                  32.075523
-                ],
-                [
-                  118.884959,
-                  32.078319
-                ],
-                [
-                  118.888051,
-                  32.076644
-                ],
-                [
-                  118.888657,
-                  32.074707
-                ],
-                [
-                  118.892961,
-                  32.07461
-                ],
-                [
-                  118.894173,
-                  32.077862
-                ],
-                [
-                  118.893066,
-                  32.078554
-                ],
-                [
-                  118.897177,
-                  32.081045
-                ],
-                [
-                  118.89766,
-                  32.082457
-                ],
-                [
-                  118.900918,
-                  32.082429
-                ],
-                [
-                  118.90834,
-                  32.086512
-                ],
-                [
-                  118.907883,
-                  32.088103
-                ],
-                [
-                  118.904054,
-                  32.090663
-                ],
-                [
-                  118.900637,
-                  32.095326
-                ],
-                [
-                  118.897124,
-                  32.094565
-                ],
-                [
-                  118.891538,
-                  32.098066
-                ],
-                [
-                  118.889834,
-                  32.098315
-                ],
-                [
-                  118.887006,
-                  32.101802
-                ],
-                [
-                  118.883589,
-                  32.103642
-                ],
-                [
-                  118.878197,
-                  32.103255
-                ],
-                [
-                  118.877547,
-                  32.100847
-                ],
-                [
-                  118.874323,
-                  32.09974
-                ],
-                [
-                  118.871741,
-                  32.101013
-                ],
-                [
-                  118.868685,
-                  32.099671
-                ],
-                [
-                  118.867437,
-                  32.100709
-                ],
-                [
-                  118.863854,
-                  32.100169
-                ],
-                [
-                  118.859963,
-                  32.098343
-                ],
-                [
-                  118.858619,
-                  32.096627
-                ],
-                [
-                  118.854316,
-                  32.09772
-                ],
-                [
-                  118.849037,
-                  32.096973
-                ],
-                [
-                  118.847851,
-                  32.097554
-                ],
-                [
-                  118.84281,
-                  32.09707
-                ],
-                [
-                  118.841765,
-                  32.099035
-                ],
-                [
-                  118.844698,
-                  32.098869
-                ],
-                [
-                  118.843029,
-                  32.101885
-                ],
-                [
-                  118.834466,
-                  32.093998
-                ],
-                [
-                  118.833491,
-                  32.095063
-                ],
-                [
-                  118.840307,
-                  32.101041
-                ],
-                [
-                  118.839569,
-                  32.103296
-                ],
-                [
-                  118.842318,
-                  32.105275
-                ],
-                [
-                  118.841677,
-                  32.106036
-                ],
-                [
-                  118.834431,
-                  32.104279
-                ],
-                [
-                  118.831392,
-                  32.105275
-                ],
-                [
-                  118.826438,
-                  32.104901
-                ],
-                [
-                  118.82628,
-                  32.103601
-                ],
-                [
-                  118.819149,
-                  32.10367
-                ],
-                [
-                  118.818033,
-                  32.095672
-                ],
-                [
-                  118.811674,
-                  32.095575
-                ],
-                [
-                  118.809127,
-                  32.09617
-                ],
-                [
-                  118.806606,
-                  32.098066
-                ],
-                [
-                  118.802461,
-                  32.097042
-                ],
-                [
-                  118.799773,
-                  32.095133
-                ],
-                [
-                  118.799115,
-                  32.093237
-                ],
-                [
-                  118.796831,
-                  32.091839
-                ],
-                [
-                  118.797788,
-                  32.089113
-                ],
-                [
-                  118.793476,
-                  32.088408
-                ],
-                [
-                  118.784096,
-                  32.092268
-                ],
-                [
-                  118.784104,
-                  32.041761
-                ],
-                [
-                  118.827167,
-                  32.038729
-                ],
-                [
-                  118.826676,
-                  32.034174
-                ],
-                [
-                  118.828292,
-                  32.0338
-                ],
-                [
-                  118.830066,
-                  32.039034
-                ],
-                [
-                  118.831655,
-                  32.039809
-                ],
-                [
-                  118.838067,
-                  32.040058
-                ],
-                [
-                  118.836934,
-                  32.035752
-                ],
-                [
-                  118.839745,
-                  32.034921
-                ],
-                [
-                  118.838076,
-                  32.029757
-                ],
-                [
-                  118.843126,
-                  32.028801
-                ],
-                [
-                  118.844171,
-                  32.027804
-                ],
-                [
-                  118.844285,
-                  32.022445
-                ],
-                [
-                  118.845981,
-                  32.022043
-                ],
-                [
-                  118.846472,
-                  32.020008
-                ],
-                [
-                  118.850275,
-                  32.018845
-                ],
-                [
-                  118.853367,
-                  32.020132
-                ],
-                [
-                  118.85327,
-                  32.023636
-                ],
-                [
-                  118.857416,
-                  32.021573
-                ],
-                [
-                  118.862536,
-                  32.023567
-                ],
-                [
-                  118.864838,
-                  32.021143
-                ],
-                [
-                  118.875105,
-                  32.024204
-                ],
-                [
-                  118.876572,
-                  32.021116
-                ],
-                [
-                  118.876273,
-                  32.017446
-                ],
-                [
-                  118.880638,
-                  32.014842
-                ],
-                [
-                  118.884959,
-                  32.018914
-                ],
-                [
-                  118.895051,
-                  32.022847
-                ],
-                [
-                  118.897299,
-                  32.02599
-                ]
-              ]
-            ]
-          ]
+            "coordinates": [[]]
           }
         },
       ]
     }
-  GeojsonUtils.addGeojsonLayer(map, data, {
+    if (firstPoint.length > 0) {
+      points.push(firstPoint);
+      polygon["features"][0]["geometry"]["coordinates"][0].push(points);
+    }
+    return polygon;
+  }
+  return null;
+}
+function getPoint () {
+  let x = document.getElementById("x").value;
+  let y = document.getElementById("y").value;
+  if (activeTab == 0) {
+    let xdu = Number(document.getElementById("xdu").value);
+    let xfen = Number(document.getElementById("xfen").value);
+    let xmiao = Number(document.getElementById("xmiao").value);
+    let ydu = Number(document.getElementById("ydu").value);
+    let yfen = Number(document.getElementById("yfen").value);
+    let ymiao = Number(document.getElementById("ymiao").value);
+    x = xdu + xfen / 60 + xmiao / 3600;
+    y = ydu + yfen / 60 + ymiao / 3600;
+  }
+  if (x == 0 && y == 0) { return null; }
+  let point = turf.point([Number(x), Number(y)]);
+  // let point = {
+  //   "type": "FeatureCollection",
+  //   "features": [
+  //     {
+  //       "type": "Feature",
+  //       "properties": {
+  //         "name": "定位点",
+  //       },
+  //       "geometry": {
+  //         "type": "Point",
+  //         "coordinates": []
+  //       }
+  //     },
+  //   ]
+  // }
+  // if (x != "" && y != "") {
+  //   point["features"][0]["geometry"]["coordinates"] = [x, y];
+  // }
+  console.log(point);
+  return point;
+}
+let polygon = null;
+function locateTo () {
+  polygon = getPoints();
+  if (polygonLayer) { GeojsonUtils.removeGeojsonLayer($map, polygonLayer); }
+  polygonLayer = addGeoJson(polygon);
+  ViewUtils.setViewByGeoJSON($map, polygon);
+}
+let point = null;
+function locateToPoint () {
+  point = getPoint();
+  if (point == null) { layer.msg("请输入点坐标"); return; }
+  if (pointLayer) { GeojsonUtils.removeGeojsonLayer($map, pointLayer); }
+  pointLayer = addGeoJson(point, "point");
+  ViewUtils.setViewByGeoJSON($map, point);
+}
+let polygonLayer = null;
+let pointLayer = null;
+let bufferLayer = null;
+let buffered = null;
+let tbUrl = "http://192.168.5.47:8090/iserver/services/map-YJJBNT/rest/maps/CJDCQ@YJJBNT";
+async function commit (type) {
+  if (type == "point") {
+    point = getPoint();
+    if (point == null) { layer.msg("请输入点坐标"); return; }
+    if (sliderValue.value < 1) { layer.msg("请设置缓冲区值"); return; }
+    if (pointLayer) { GeojsonUtils.removeGeojsonLayer($map, pointLayer); }
+    pointLayer = addGeoJson(point, "point");
+    buffered = turf.buffer(point, sliderValue.value, { units: 'meters' });
+    if (bufferLayer) { GeojsonUtils.removeGeojsonLayer($map, bufferLayer); }
+    bufferLayer = addGeoJson(buffered);
+    ViewUtils.setViewByGeoJSON($map, buffered);
+
+    // showPointPanel.value = false;
+  }
+  else if (type == "polygon") {
+    polygon = getPoints();
+    if (polygonLayer) { GeojsonUtils.removeGeojsonLayer($map, polygonLayer); }
+    polygonLayer = addGeoJson(polygon);
+    ViewUtils.setViewByGeoJSON($map, polygon);
+    let geometry = getPoints("geometry");
+    spatialQuery(tbUrl, geometry).then(data => { console.log(tbCount, data) });
+    showQueryPanel.value = true;
+    // showPolygonPanel.value = false;
+  }
+}
+function cancel (type) {
+  if (type == "point") {
+    if (pointLayer) {
+      GeojsonUtils.removeGeojsonLayer($map, pointLayer);
+      pointMarkerList.forEach(item => {
+        item.remove();
+      })
+      pointMarkerList = []
+    }
+    if (bufferLayer) {
+      GeojsonUtils.removeGeojsonLayer($map, bufferLayer);
+    }
+    showPointPanel.value = false;
+  }
+  if (type == "polygon") {
+    if (polygonLayer) {
+      GeojsonUtils.removeGeojsonLayer($map, polygonLayer);
+    }
+    showPolygonPanel.value = false;
+  }
+}
+let pointMarkerList = [];
+function addGeoJson (data, type) {
+  console.log(data);
+  let geolayer = null;
+  if (type == "point") {
+    geolayer = GeojsonUtils.addGeojsonLayer($map, data, {
+      pointToLayer: (feature, latlng) => {
+        let pointMarker = marker(latlng, {
+          icon: icon({
+            iconUrl: new URL("/src/assets/img/location.svg", import.meta.url).href,
+            iconSize: [24, 32],
+          }),
+        });
+        pointMarkerList.push(pointMarker)
+        return pointMarker;
+      },
+    });
+  }
+  geolayer = GeojsonUtils.addGeojsonLayer($map, data, {
     style: {
       polygon: {
         color: 'yellow',
         weight: 5,
-        fillOpacity: 0.5,
+        fillOpacity: 0.2,
         fillColor: '#ff0000'
       }
     }
   })
-  let newData = {
-    type: 'FeatureCollection',
-    features: data.features.map((item) => {
-      return { ...GeometryUtils.getCenter(item), properties: item.properties }
+  return geolayer;
+}
+
+function returnHome () {
+  ViewUtils.returnHome($map)
+}
+
+function initLayer () {
+  for (let i = state.resourceData.length - 1; i >= 0; i--) {
+    if (state.resourceData[i].status) {
+      triggerLayer(state.resourceData[i], false)
+    }
+  }
+}
+let leftLayers = [];
+let rightLayers = [];
+function triggerLayer (val, fly = true) {
+  if (val.status) {
+    const { status, _layer, name, ...options } = val
+    val._layer = markRaw(LayerUtils.addLayer($map, options))
+    leftLayers.push(val._layer);
+    if (fly) {
+      ViewUtils.setViewByLayer($map, val._layer)
+    }
+  } else {
+    if (val._layer) {
+      LayerUtils.removeLayer($map, val._layer)
+      delete val._layer
+    }
+  }
+}
+
+function startDraw () {
+  DrawUtils.clearDraw($map)
+  DrawUtils.startDraw($map, 'Polygon', {
+    callback: function (result) {
+      console.log(result.geoJSON);
+    }
+  })
+}
+
+let identifyResults = []
+function identify () {
+  if (identifyResults.length) {
+    for (const layer of identifyResults) {
+      $map.removeLayer(layer)
+    }
+    identifyResults = []
+  }
+  DrawUtils.startDraw($map, 'CircleMarker', {
+    callback: function (result) {
+      DrawUtils.stopDraw($map)
+      $map.removeLayer(result.layer)
+      const queryLayers = _getIdentifyLayers()
+      if (!queryLayers.length) {
+        layer.msg('无可查询图层')
+        return
+      }
+      const promises = []
+      for (const layer of queryLayers) {
+        const { query, ...other } = layer
+        for (const queryInfo of query) {
+          const identifyInfo = {
+            ...other,
+            ...queryInfo
+          }
+          identifyInfo.geometry = result.geoJSON
+          console.log(identifyInfo.geometry)
+          promises.push(LayerUtils.getIdentifyFeatures(layer.url, identifyInfo))
+        }
+      }
+      Promise.all(promises).then((allResult) => {
+        layer.msg('识别完成')
+        for (const result of allResult) {
+          identifyResults.push(GeojsonUtils.addGeojsonLayer($map, result))
+        }
+        console.log('属性识别结果', allResult)
+        if (!allResult || allResult.length < 1) {
+          layer.msg('识别结果为空')
+          return;
+        }
+        allResult.forEach(features => {
+          features.features.forEach(feature => {
+            zldwmc.value = feature.properties[xzqField.value];
+            tbCount.value = 1;
+          });
+        })
+        showQueryPanel.value = true;
+      })
+    }
+  })
+}
+
+function _getIdentifyLayers () {
+  const layers = LayerUtils.getLayerList($map)
+  const queryLayers = []
+  for (const layer of layers) {
+    const tmp = state.resourceData.find(resource => {
+      return resource._layer === layer
     })
+    if (tmp && tmp.query) {
+      queryLayers.push(tmp)
     }
+  }
+  return queryLayers
+}
+
+function startMeasure () {
+  MeasureUtils.startMeasure($map, 'length')
+}
+let openSwipe = false;
+let swipe = null
+function switchSwipe () {
+  openSwipe = !openSwipe;
+  if (openSwipe) {
+    swipe = SwipeUtils.startSwipe($map, leftLayers, rightLayers)
+  } else {
+    SwipeUtils.stopSwipe(swipe)
+  }
+}
+let zldwmcs = []
+async function spatialQuery (url, geometry) {
+  let json = {
+    "queryMode": "SpatialQuery",
+    "geometry": geometry,
+    "bounds": {
+      "leftBottom": { "x": 0, "y": 0 }, "rightTop": { "x": 100, "y": 100 }
+    }, "distance": 1, "queryParameters": {
+      "queryParams": [{ "attributeFilter": "SMID %26gt; 0", "name": "JBNTBHTB@YJJBNT" }],
+      "startRecord": 0, "expectCount": 1000, "networkType": "LINE", "queryOption": "ATTRIBUTEANDGEOMETRY"
+    },
+    "keywords": "", "spatialQueryMode": "INTERSECT"
+  }
+  fetch(url + "/queryResults.json?returnPostAction=true&getMethodForm=true&returnContent=true", {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(json)
+  })
+    .then(response => response.json())
+    .then(data => {
+      tbCount.value = data.totalCount;
+      data.recordsets[0].features.forEach(feature => {
+        feature.fieldNames.forEach((field, index) => {
+          if (field == "ZLDWMC" && zldwmcs.indexOf(feature.fieldValues[index]) == -1) { zldwmcs.push(feature.fieldValues[index]); }
+        })
+      })
+      zldwmc.value = zldwmcs.join(",");
+      return data;
+    })
+    .catch(error => console.error('Error:', error));
 }
 </script>
 <style scoped lang="scss">
@@ -1065,8 +926,8 @@ function addGeoJson () {
 
   .map-container {
     height: 100%;
-    background: url("@/assets/img/mapbg.png") no-repeat;
-    background-size: 100% 100%;
+    width: 100%;
+    z-index: 0;
   }
 }
 
@@ -1459,7 +1320,6 @@ function addGeoJson () {
   }
 }
 .draggable-panel {
-  width: 29vw;
   // height: 10vh;
   background: white;
   position: absolute;
@@ -1510,7 +1370,7 @@ function addGeoJson () {
         margin: 0px 10px;
       }
       .layui-slider {
-        width: calc(80% - 20px);
+        width: calc(80% - 40px);
         .layui-slider-bar {
           background: var(--global-normal-color) !important;
         }