feat: 新增高德地图

package.json

@@ -11,6 +11,8 @@
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src --fix"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@amap/amap-jsapi-types": "^0.0.8",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",

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

@@ -0,0 +1,23 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { MapAmapConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '',
+  amapKey: 'aa76ad84f92f661980f710cbe966b7f6',
+  amapStyleKey: 'normal',
+  amapStyleKeyCustom: '',
+  amapLon: 116.39,
+  amapLat: 40.91,
+  amapZindex: 10,
+  lang: 'zh_cn',
+  features: ['bg', 'point', 'road', 'building']
+}
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = MapAmapConfig.key
+  public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(MapAmapConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,138 @@
+<template>
+  <collapse-item name="基础配置">
+    <setting-item-box name="Key" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.amapKey" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="语言类型" :alone="true">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.lang" :options="langOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="主题样式" :alone="true">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.amapStyleKey" :options="themeOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="自定义地图样式ID" :alone="true">
+      <setting-item>
+        <n-input size="small" v-model:value="optionData.amapStyleKeyCustom" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="地图配置">
+    <n-checkbox-group v-model:value="optionData.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>
+  </collapse-item>
+  <collapse-item name="相机配置">
+    <setting-item-box name="经度" :alone="true">
+      <setting-item>
+        <n-input-number v-model:value="optionData.amapLon" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="纬度" :alone="true">
+      <setting-item>
+        <n-input-number v-model:value="optionData.amapLat" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="初始缩放" :alone="true">
+      <setting-item>
+        <n-input-number v-model:value="optionData.amapZindex" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+const langOptions = ref([
+  {
+    value: 'zh_cn',
+    label: '中文简体'
+  },
+  {
+    value: 'en',
+    label: '英文'
+  },
+  {
+    value: 'zh_en',
+    label: '中英文对照'
+  }
+])
+const featuresOptions = ref([
+  {
+    value: 'bg',
+    label: '显示地图背景'
+  },
+  {
+    value: 'point',
+    label: '显示标识'
+  },
+  {
+    value: 'road',
+    label: '显示道路'
+  },
+  {
+    value: 'building',
+    label: '显示建筑'
+  }
+])
+const themeOptions = ref([
+  {
+    value: 'normal',
+    label: '标准'
+  },
+  {
+    value: 'dark',
+    label: '幻影黑'
+  },
+  {
+    value: 'light',
+    label: '月光银'
+  },
+  {
+    value: 'whitesmoke',
+    label: '远山黛'
+  },
+  {
+    value: 'fresh',
+    label: '草色青'
+  },
+  {
+    value: 'grey',
+    label: '雅士灰'
+  },
+  {
+    value: 'graffiti',
+    label: '涂鸦'
+  },
+  {
+    value: 'macaron',
+    label: '马卡龙'
+  },
+  {
+    value: 'blue',
+    label: '靛青蓝'
+  },
+  {
+    value: 'darkblue',
+    label: '极夜蓝'
+  },
+  {
+    value: 'wine',
+    label: '酱籽'
+  }
+])
+</script>

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

@@ -0,0 +1,15 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import image from '@/assets/images/chart/charts/map_amap.png'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const MapAmapConfig: ConfigType = {
+  key: 'MapAmap',
+  chartKey: 'VMapAmap',
+  conKey: 'VCMapAmap',
+  title: '高德地图',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image
+}

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="box">
+    <div id="container" style="width: 100%; height: 100%; position: relative"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { CreateComponentType } from '@/packages/index.d'
+import { reactive, ref, shallowRef, PropType, toRefs, watch } from 'vue'
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+let { amapKey, amapStyleKey, amapLon, amapLat, amapZindex, lang, amapStyleKeyCustom, features } = toRefs(
+  props.chartConfig.option
+)
+
+let map = shallowRef(null)
+
+const ininMap = () => {
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '1.4.4', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
+  })
+    .then(AMap => {
+      map = new AMap.Map('container', {
+        resizeEnable: true,
+        zoom: amapZindex.value, // 地图显示的缩放级别
+        center: [amapLon.value, amapLat.value],
+        mapStyle: `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`, //自定义地图的显示样式
+        lang: lang.value,
+        features: features.value
+      })
+    })
+    .catch(e => {})
+}
+
+watch(
+  () => props.chartConfig.option,
+  newData => {
+    ininMap()
+  },
+  { immediate: true, deep: true }
+)
+</script>

src/packages/components/Charts/Maps/index.ts

@@ -1,3 +1,4 @@
 import { MapBaseConfig } from './MapBase/index'
+import { MapAmapConfig } from './MapAmap/index'
 
-export default [ MapBaseConfig ]
+export default [MapBaseConfig, MapAmapConfig]