!87 feat：新增高德地图

Merge pull request !87 from jiangcheng/dev

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,27 @@
+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'
+import dataJson from './data.json'
+
+export const option = {
+  dataset: dataJson,
+  amapKey: 'aa76ad84f92f661980f710cbe966b7f6',
+  amapStyleKey: 'normal',
+  amapStyleKeyCustom: '',
+  amapLon: 116.397428,
+  amapLat: 39.90923,
+  amapZindex: 10,
+  viewMode: '2D',
+  pitch: 60,
+  skyColor: '#53A9DE',
+  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,171 @@
+<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>
+    <setting-item-box name="展示模式" :alone="true">
+      <setting-item>
+        <n-radio-group v-model:value="optionData.viewMode" name="radiogroup">
+          <n-space>
+            <n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
+              {{ song.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+      </setting-item>
+    </setting-item-box>
+    <template v-if="optionData.viewMode === '3D'">
+      <setting-item-box name="天空色" :alone="true">
+        <setting-item>
+          <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.skyColor"></n-color-picker>
+        </setting-item>
+      </setting-item-box>
+      <setting-item-box name="俯仰角" :alone="true">
+        <setting-item>
+          <n-input-number v-model:value="optionData.pitch" :min="0" :max="83" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </template>
+  </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 viewModeOptions = ref([
+  {
+    value: '2D',
+    label: '2D'
+  },
+  {
+    value: '3D',
+    label: '3D'
+  }
+])
+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/data.json

@@ -0,0 +1,17 @@
+{
+  "points": [
+    {
+      "icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
+      "position": [116.300467, 39.907761],
+      "title": "我是一个文本"
+    },
+    {
+      "icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png",
+      "position": [116.368904, 39.913423]
+    },
+    {
+      "icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png",
+      "position": [116.305467, 39.807761]
+    }
+  ]
+}

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,77 @@
+<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,
+  viewMode,
+  pitch,
+  skyColor
+} = toRefs(props.chartConfig.option)
+
+let map = shallowRef(null)
+let markers = ref([])
+
+const ininMap = () => {
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '1.4.8', // 指定要加载的 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,
+        pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
+        skyColor: skyColor.value,
+        viewMode: viewMode.value // 地图模式
+      })
+      markers?.value.forEach((marker: any) => {
+        // 创建点实例
+        if (!/\d/.test(marker.icon || marker.position)) {
+          return
+        }
+        var marker = new AMap.Marker({
+          icon: marker?.icon,
+          position: [marker.position[0], marker.position[1]],
+          title: marker?.title,
+          offset: new AMap.Pixel(-13, -30)
+        })
+        marker.setMap(map)
+      })
+    })
+    .catch(e => {})
+}
+
+watch(
+  () => props.chartConfig.option,
+  newData => {
+    markers.value = newData.dataset.points
+    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]