feat：按照GIS思想优化高德地图组件参数UI，并增加全新卫星图层、路网图层、实时交通图层的配置

src/packages/components/Charts/Maps/MapAmap/config.ts

@@ -16,8 +16,7 @@ export enum ThemeEnum {
   MACARON = 'macaron',
   BLUE = 'blue',
   DARKBLUE = 'darkblue',
-  WINE = 'wine',
-  WEIXIN = 'tileLayer'
+  WINE = 'wine'
 }
 
 export enum LangEnum {
@@ -31,6 +30,11 @@ export enum ViewModeEnum {
   STEREOSCOPIC = '3D'
 }
 
+export enum ShowHideEnum {
+  SHOW = true,
+  HIDE = false
+}
+
 export enum FeaturesEnum {
   BG = 'bg',
   POINT = 'point',
@@ -71,6 +75,25 @@ export const option = {
     },
     mapMarkerType: MarkerEnum.CIRCLE_MARKER,
     viewMode: ViewModeEnum.PLANE,
+    showLabel: ShowHideEnum.SHOW,
+    satelliteTileLayer: {
+      show: ShowHideEnum.HIDE,
+      zIndex: 1,
+      opacity: 1,
+      zooms: [3, 18]
+    },
+    roadNetTileLayer: {
+      show: ShowHideEnum.HIDE,
+      zIndex: 2,
+      opacity: 1,
+      zooms: [3, 18]
+    },
+    trafficTileLayer: {
+      show: ShowHideEnum.HIDE,
+      zIndex: 3,
+      opacity: 1,
+      zooms: [3, 18]
+    },
     lang: LangEnum.ZH_CN,
     features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
   }

src/packages/components/Charts/Maps/MapAmap/config.vue

@@ -22,13 +22,21 @@
         <n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="内容" :alone="true">
+    <setting-item-box name="显示要素" :alone="true">
       <n-checkbox-group v-model:value="optionData.mapOptions.features">
         <n-space item-style="display: flex;">
           <n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
         </n-space>
       </n-checkbox-group>
     </setting-item-box>
+    <setting-item-box name="文字标注" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="位置">
       <setting-item name="经度">
         <n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
@@ -76,11 +84,94 @@
       </setting-item>
     </setting-item-box>
   </collapse-item>
+  <collapse-item name="图层" :expanded="true">
+    <setting-item-box name="卫星图层">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="叠加顺序值">
+        <n-input-number
+          v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
+          :min="0"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="透明度">
+        <n-input-number
+          v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
+          :min="0"
+          :max="1"
+          step="0.1"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="缩放级别范围">
+        <n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="路网图层">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="叠加顺序值">
+        <n-input-number
+          v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
+          :min="0"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="透明度">
+        <n-input-number
+          v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
+          :min="0"
+          :max="1"
+          step="0.1"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="缩放级别范围">
+        <n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="实时交通">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="叠加顺序值">
+        <n-input-number
+          v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
+          :min="0"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="透明度">
+        <n-input-number
+          v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
+          :min="0"
+          :max="1"
+          step="0.1"
+          size="small"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="缩放级别范围">
+        <n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 defineProps({
@@ -134,10 +225,6 @@ const themeOptions = [
   {
     value: ThemeEnum.WINE,
     label: '酱籽'
-  },
-  {
-    value: ThemeEnum.WEIXIN,
-    label: '卫星'
   }
 ]
 
@@ -170,19 +257,19 @@ const viewModeOptions = [
 const featuresOptions = [
   {
     value: FeaturesEnum.BG,
-    label: '显示地图背景'
+    label: '区域面'
   },
   {
     value: FeaturesEnum.POINT,
-    label: '显示标识'
+    label: '标注'
   },
   {
     value: FeaturesEnum.ROAD,
-    label: '显示道路'
+    label: '道路'
   },
   {
     value: FeaturesEnum.BUILDING,
-    label: '显示建筑'
+    label: '建筑物'
   }
 ]
 

src/packages/components/Charts/Maps/MapAmap/index.vue

@@ -28,9 +28,13 @@ let {
   amapStyleKeyCustom,
   features,
   viewMode,
+  showLabel,
   pitch,
   skyColor,
-  marker
+  marker,
+  satelliteTileLayer,
+  roadNetTileLayer,
+  trafficTileLayer
 } = toRefs(props.chartConfig.option.mapOptions)
 
 let mapIns: any = null
@@ -42,7 +46,7 @@ const initMap = (newData: any) => {
   // 初始化
   AMapLoader.load({
     key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
-    version: '1.4.8', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
   })
     .then(AMap => {
@@ -56,17 +60,40 @@ const initMap = (newData: any) => {
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
         skyColor: skyColor.value,
         viewMode: viewMode.value, // 地图模式
+        showLabel: showLabel.value, // 是否显示地图文字标记
         willReadFrequently: true
       })
       dataHandle(props.chartConfig.option.dataset)
-      let satellite = new AMap.TileLayer.Satellite()
-      let roadNet = new AMap.TileLayer.RoadNet()
-      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
-        mapIns.add([satellite, roadNet])
-      } else {
-        mapIns.remove([satellite, roadNet])
-        mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
+
+      let satelliteLayer = new AMap.TileLayer.Satellite({
+        zIndex: satelliteTileLayer.value.zIndex,
+        opacity: satelliteTileLayer.value.opacity,
+        zooms: satelliteTileLayer.value.zooms
+      })
+      let roadNetLayer = new AMap.TileLayer.RoadNet({
+        zIndex: roadNetTileLayer.value.zIndex,
+        opacity: roadNetTileLayer.value.opacity,
+        zooms: roadNetTileLayer.value.zooms
+      })
+      let trafficLayer = new AMap.TileLayer.Traffic({
+        zIndex: trafficTileLayer.value.zIndex,
+        opacity: trafficTileLayer.value.opacity,
+        zooms: trafficTileLayer.value.zooms
+      })
+      mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
+      if (satelliteTileLayer.value.show) {
+        mapIns.add([satelliteLayer])
       }
+      if (roadNetTileLayer.value.show) {
+        mapIns.add([roadNetLayer])
+      }
+      if (trafficTileLayer.value.show) {
+        mapIns.add([trafficLayer])
+      }
+
+      mapIns.setMapStyle(
+        `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+      )
     })
     .catch(e => {})
 }