feat: 服务加载

.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']

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.11",
     "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"
+        },
+        {
+            "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年永久基本农田"
+        }
+    ]
+}

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/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,7 +11,10 @@
   </header>
   <main class="main">
     <!-- 地图 -->
-    <div class="map-container" />
+    <div
+      ref="mapContainer"
+      class="map-container"
+    />
 
     <!-- 资源目录最小化 -->
     <div
@@ -45,16 +48,15 @@
         />
         <div class="list-box">
           <div
-            v-for="(item) in resourceData"
+            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"
+              @change="triggerLayer(item)"
             />
           </div>
         </div>
@@ -171,7 +173,10 @@
           direction="vertical"
           theme="black"
         />
-        <div class="tool-part">
+        <div
+          class="tool-part"
+          @click="returnHome"
+        >
           <i class="iconfont icon-widget-map-full" />
           <span>全幅</span>
         </div>
@@ -190,7 +195,7 @@
     <div class="input-box">
       <lay-cascader
         v-model="regionData"
-        :options="cascaderOptions"
+        :options="state.cascaderOptions"
         :only-last-level="true"
         allow-clear
         placeholder="请选择行政区"
@@ -216,11 +221,11 @@
     >
       <ul class="list-box">
         <li
-          v-for="(item, index) in mapTypeData"
+          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
@@ -245,10 +250,17 @@
   </main>
 </template>
 <script setup>
-import { reactive, ref, toRefs } 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 } from 'gt-maputils'
+import { getList } from '@/api/module/main'
+
+/**
+ * @type {Ref<HTMLDivElement>}
+ */
+const mapContainer = ref()
+/**
+ * @type {import('leaflet').Map}
+ */
+let $map
 // 工具栏是否展开
 const toolIsFold = ref(false)
 // 资源目录是否展开
@@ -304,21 +316,8 @@ const replaceFields = {
  */
 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: []
 })
 
 // 村庄搜索
@@ -327,26 +326,73 @@ 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(() => {
+  initMap()
+  getData()
+})
+
+function getData () {
+// 获取资源目录列表
+  getList('resourceData').then((res) => {
+    state.resourceData = res.data
+    initLayer()
+  })
+  // 获取省市区
+  getList('china').then((res) => {
+    state.cascaderOptions = res.data
+  })
+  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]
+    ],
+    minZoom: 8
+  })
+}
+
+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)
+    }
+  }
+}
+
+function triggerLayer (val, fly = true) {
+  if (val.status) {
+    const { status, _layer, name, ...options } = val
+    val._layer = markRaw(LayerUtils.addLayer($map, options))
+    if (fly) {
+      ViewUtils.setViewByLayer($map, val._layer)
+    }
+  } else {
+    if (val._layer) {
+      LayerUtils.removeLayer($map, val._layer)
+      delete val._layer
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 .header {
@@ -389,8 +435,8 @@ const toSelectDt = function (index) {
 
   .map-container {
     height: 100%;
-    background: url("@/assets/img/mapbg.png") no-repeat;
-    background-size: 100% 100%;
+    width: 100%;
+    z-index: 0;
   }
 }