feat: 高德地图新增属性

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

@@ -12,6 +12,9 @@ export const option = {
   amapLon: 116.39,
   amapLat: 40.91,
   amapZindex: 10,
+  viewMode: '2D',
+  pitch: 60,
+  skyColor: '#53A9DE',
   lang: 'zh_cn',
   features: ['bg', 'point', 'road', 'building']
 }

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

@@ -44,6 +44,29 @@
         <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>
 
@@ -71,6 +94,16 @@ const langOptions = ref([
     label: '中英文对照'
   }
 ])
+const viewModeOptions = ref([
+  {
+    value: '2D',
+    label: '2D'
+  },
+  {
+    value: '3D',
+    label: '3D'
+  }
+])
 const featuresOptions = ref([
   {
     value: 'bg',

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

@@ -14,16 +14,26 @@ const props = defineProps({
     required: true
   }
 })
-let { amapKey, amapStyleKey, amapLon, amapLat, amapZindex, lang, amapStyleKeyCustom, features } = toRefs(
+let {
-  props.chartConfig.option
+  amapKey,
-)
+  amapStyleKey,
+  amapLon,
+  amapLat,
+  amapZindex,
+  lang,
+  amapStyleKeyCustom,
+  features,
+  viewMode,
+  pitch,
+  skyColor
+} = 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
+    version: '1.4.8', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
   })
     .then(AMap => {
@@ -33,7 +43,10 @@ const ininMap = () => {
         center: [amapLon.value, amapLat.value],
         mapStyle: `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`, //自定义地图的显示样式
         lang: lang.value,
-        features: features.value
+        features: features.value,
+        pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
+        skyColor: skyColor.value,
+        viewMode: viewMode.value, // 地图模式
       })
     })
     .catch(e => {})