feat: 添加基础功能示例

auto-imports.d.ts

@@ -114,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']>
@@ -193,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.11",
+    "gt-maputils": "^0.1.12",
     "less": "^4.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",

public/data/resourceData.json

@@ -4,7 +4,12 @@
         {
             "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"
+            "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切片）",

src/views/home/index.vue

@@ -157,7 +157,10 @@
           direction="vertical"
           theme="black"
         />
-        <div class="tool-part">
+        <div
+          class="tool-part"
+          @click="startDraw"
+        >
           <i class="iconfont icon-widget-huizhi" />
           <span>绘制范围</span>
         </div>
@@ -165,7 +168,10 @@
           direction="vertical"
           theme="black"
         />
-        <div class="tool-part">
+        <div
+          class="tool-part"
+          @click="identify"
+        >
           <i class="iconfont icon-widget-hand-point" />
           <span>点选</span>
         </div>
@@ -184,7 +190,10 @@
           direction="vertical"
           theme="black"
         />
-        <div class="tool-part">
+        <div
+          class="tool-part"
+          @click="startMeasure"
+        >
           <i class="iconfont icon-widget-celiang" />
           <span>测距</span>
         </div>
@@ -250,7 +259,7 @@
   </main>
 </template>
 <script setup>
-import { LayerUtils, MapUtils, ViewUtils } from 'gt-maputils'
+import { LayerUtils, MapUtils, ViewUtils, MeasureUtils, DrawUtils } from 'gt-maputils'
 import { getList } from '@/api/module/main'
 
 /**
@@ -393,6 +402,62 @@ function triggerLayer (val, fly = true) {
     }
   }
 }
+
+function startDraw () {
+  DrawUtils.clearDraw($map)
+  DrawUtils.startDraw($map, 'Polygon', {
+    callback: function (result) {
+      console.log(result.geoJSON)
+    }
+  })
+}
+
+function identify () {
+  DrawUtils.startDraw($map, 'CircleMarker', {
+    callback: function (result) {
+      DrawUtils.clearDraw($map)
+      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
+          promises.push(LayerUtils.getIdentifyFeatures(layer.url, identifyInfo))
+        }
+      }
+      Promise.all(promises).then((allResult) => {
+        layer.msg('识别完成')
+        console.log('属性识别结果', allResult)
+      })
+    }
+  })
+}
+
+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')
+}
 </script>
 <style scoped lang="scss">
 .header {