Merge branch 'fix/3D-map-select-sacle' into 'main_dev'

perf(src/views/chart): 优化三维地图右侧区块配置项，并且修复兼容之前旧地图

See merge request yunteng/thingskit-view!185

 <script lang="ts" setup name="SelectCity">
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, nextTick } from 'vue'
 import { getAreaList } from '@/api/external/common/index'
 import { areaEnum } from '../config'
 
@@ -25,7 +25,8 @@ const selectValues = reactive({
   provinceValue: 'china',
   cityValue: null,
   countyValue: null,
-  levelStr: areaEnum.COUNTRY
+  levelStr: areaEnum.COUNTRY,
+  areaName: ''
 })
 
 const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
@@ -34,36 +35,40 @@ const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
     parentId
   })
   if (!resp) return []
-  return resp.map((item: any) => ({ label: item.name, value: item.code }))
+  return resp.map((item: Recordable) => ({ label: item.name, value: item.code }))
 }
 
 onMounted(async () => {
   selectOptions.provinceOptions = await getAreaLists()
-  ;(selectOptions.provinceOptions as never as any).unshift({
+  ;(selectOptions.provinceOptions as never as Recordable[]).unshift({
     label: '中国',
     value: 'china'
   })
-  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'])
+  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'], {})
   for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
 })
 
-const onHandleSelectProvince = async (value: number | string) => {
+const onHandleSelectProvince = async (value: number | string, options: Recordable) => {
   selectValues.cityValue = null
   selectValues.countyValue = null
   if (value === 'china') return (selectValues.levelStr = areaEnum.COUNTRY)
-  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
+  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as number)
   selectValues.levelStr = areaEnum.PROVINCE
+  selectValues.areaName = options.label
 }
 
-const onHandleSelectCity = async (value: number) => {
+const onHandleSelectCity = async (value: number, options: Recordable) => {
   selectValues.countyValue = null
   selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
   selectValues.levelStr = areaEnum.CITY
+  selectValues.areaName = options.label
 }
 
-const onHandleSubmit = () => {
+const onHandleSubmit = async () => {
+  await nextTick()
   emits('submit', selectValues)
 }
+
 const resetValue = () => {
   selectValues.provinceValue = 'china'
   selectValues.cityValue = null
@@ -72,6 +77,7 @@ const resetValue = () => {
   selectOptions.cityOptions = []
   selectOptions.countryOptions = []
 }
+
 defineExpose({
   resetValue
 })

@@ -20,6 +20,7 @@ export interface regionInfo {
   cityValue: string | null
   countyValue: string | null
   levelStr: areaEnum
+  areaName: string
 }
 
 type itemOption = {
@@ -36,6 +37,7 @@ export interface regionOption {
 export interface historyParentType {
   adcode: number
   level: string
+  areaName: string
 }
 
 export interface backMapLevel {
@@ -50,6 +52,7 @@ export interface levelFunc {
 //数据源接口
 export interface dataPointI {
   name: string
+  city_name: string
   value: number[]
   adcode: number
   height: number
@@ -69,6 +72,70 @@ export const regionMapParentArea = {
   TOWN: areaEnum.COUNTY //镇的上一级 县或者区
 }
 
+// 缩放配置文件
+export const setScale = (adcode: string | number) => {
+  switch (adcode) {
+    case 'china':
+      return { distance: 100, zoom: 1, alpha: 45 }
+    case '110000':
+      return { distance: 150, zoom: 0.8, alpha: 45 }
+    case '120000':
+      return { distance: 190, zoom: 0.8, alpha: 45 }
+    case '130000':
+      return { distance: 165, zoom: 0.8, alpha: 45 }
+    case '140000':
+      return { distance: 216, zoom: 0.8, alpha: 45 }
+    case '150000':
+      return { distance: 130, zoom: 0.8, alpha: 45 }
+    case '210000':
+      return { distance: 130, zoom: 0.8, alpha: 45 }
+    case '310000':
+      return { distance: 135, zoom: 0.8, alpha: 45 }
+    case '320000':
+      return { distance: 145, zoom: 0.8, alpha: 45 }
+    case '330000':
+      return { distance: 135, zoom: 0.8, alpha: 45 }
+    case '340000':
+      return { distance: 170, zoom: 0.8, alpha: 45 }
+    case '350000':
+      return { distance: 150, zoom: 0.8, alpha: 45 }
+    case '360000':
+      return { distance: 190, zoom: 0.8, alpha: 45 }
+    case '370000':
+      return { distance: 135, zoom: 0.8, alpha: 45 }
+    case '420000':
+      return { distance: 145, zoom: 0.8, alpha: 45 }
+    case '430000':
+      return { distance: 165, zoom: 0.8, alpha: 45 }
+    case '440000':
+      return { distance: 165, zoom: 0.8, alpha: 45 }
+    case '500000':
+      return { distance: 145, zoom: 0.8, alpha: 45 }
+    case '520000':
+      return { distance: 135, zoom: 0.8, alpha: 45 }
+    case '530000':
+      return { distance: 145, zoom: 0.8, alpha: 45 }
+    case '540000':
+      return { distance: 140, zoom: 0.8, alpha: 45 }
+    case '610000':
+      return { distance: 210, zoom: 0.8, alpha: 45 }
+    case '620000':
+      return { distance: 135, zoom: 0.8, alpha: 45 }
+    case '640000':
+      return { distance: 195, zoom: 0.8, alpha: 45 }
+    case '650000':
+      return { distance: 135, zoom: 0.8, alpha: 45 }
+    case '710000':
+      return { distance: 135, zoom: 0.8, alpha: 45 }
+    case '810000':
+      return { distance: 145, zoom: 0.8, alpha: 45 }
+    case '820000':
+      return { distance: 240, zoom: 0.8, alpha: 45 }
+    default:
+      return { distance: 125, zoom: 1, alpha: 45 }
+  }
+}
+
 export const includes = []
 
 // 特殊处理安徽省的下钻
@@ -105,11 +172,13 @@ export const option = {
   mapRegion: {
     adcode: 'china',
     showHainanIsLands: true,
+    areaName: '',
     saveSelect: {
       levelStr: areaEnum.COUNTRY,
       cityValue: null,
       countyValue: null,
-      provinceValue: 'china'
+      provinceValue: 'china',
+      areaName: ''
     }
   },
   tooltip: {
@@ -118,30 +187,30 @@ export const option = {
   //三维地图有两种，一种是geo3D，另一种是map3D,但是如果使用geo3D，地图点击获取不到点击区域name
   geo3D: {
     show: false, // 隐藏该层，为true时会导致出现两个地图
-    map: 'centerMap',
+    map: '',
     roam: true
   },
   series: [
     {
       type: 'map3D',
-      map: 'centerMap',
-      name: 'centerMap',
-      regionHeight: 3,
+      map: '',
+      name: '',
+      regionHeight: 0,
       label: {
         show: true,
         formatter: function (params: Recordable) {
           return params.data.name ? params.data.name : ' '
         },
         textStyle: {
-          color: '#fff',
+          color: '#ffffffff',
           fontSize: 14
         }
       },
       itemStyle: {
-        color: '#4482B1FF', //背景颜色
+        color: '#3c7effff', //背景颜色
         opacity: 1,
         borderWidth: 0.8,
-        borderColor: '#4482B1FF'
+        borderColor: '#51d6a9FF'
       },
       emphasis: {
         // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
@@ -149,12 +218,12 @@ export const option = {
           // label高亮时的配置
           show: true,
           textStyle: {
-            color: 'green',
+            color: '#57c3c2ff',
             fontSize: 14
           }
         },
         itemStyle: {
-          color: 'red'
+          color: '#1ba784ff'
         }
       },
       data: [],
@@ -163,28 +232,19 @@ export const option = {
       }
     },
     {
-      name: 'scatter3D',
-      type: 'scatter3D',
-      coordinateSystem: 'geo3D',
-      symbol: 'circle',
-      symbolSize: 20,
-      animation: true,
-      data: []
-    },
-    {
       name: 'bar3D',
       type: 'bar3D',
       coordinateSystem: 'geo3D',
       // 倒角尺寸
       bevelSize: 0,
-      minHeight: 12,
+      minHeight: 5,
       shading: 'lambert',
       barSize: 1,
       itemStyle: {
         color: '#4482B1FF'
       },
       data: []
-    },
+    }
   ]
 }
 

@@ -43,7 +43,7 @@
     />
     <div style="height: 30px"></div>
     <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
-    <SettingItemBox name="区块配置">
+    <SettingItemBox name="地图配置">
       <SettingItem name="区域颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
@@ -126,24 +126,10 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="散点配置">
-      <SettingItem name="大小">
-        <n-input-number
-          v-model:value="seriesList[1].symbolSize"
-          :min="0"
-          :step="1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="形状">
-        <n-select :options="symbolOption" v-model:value="seriesList[1].symbol"></n-select>
-      </SettingItem>
-    </SettingItemBox>
     <SettingItemBox name="柱状配置">
       <SettingItem name="最小高度">
         <n-input-number
-          v-model:value="seriesList[2].minHeight"
+          v-model:value="seriesList[1].minHeight"
           :min="0"
           :step="1"
           size="small"
@@ -152,7 +138,7 @@
       </SettingItem>
       <SettingItem name="大小">
         <n-input-number
-          v-model:value="seriesList[2].barSize"
+          v-model:value="seriesList[1].barSize"
           :min="0"
           :step="1"
           size="small"
@@ -161,7 +147,7 @@
       </SettingItem>
       <SettingItem name="倒角尺寸">
         <n-input-number
-          v-model:value="seriesList[2].bevelSize"
+          v-model:value="seriesList[1].bevelSize"
           :min="0"
           :max="1"
           :step="0.1"
@@ -170,15 +156,22 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="区块配置">
+  </CollapseItem>
+  <CollapseItem name="地区配置" :expanded="true">
+    <SettingItemBox name="地区配置" :alone="true">
       <template v-for="(item, map3DIndex) in optionData.dataset.map3D" :key="map3DIndex">
-        <setting-item name="地区名称">
-          <n-input v-model:value="item.name"> </n-input>
+        <setting-item name="省份名称">
+          <n-select
+            @change="(v:number,o:Recordable,w:Recordable,s1:number)=> onHandleSelectProvince(v,o,item, map3DIndex)"
+            placeholder="请选择省份"
+            v-model:value="item.name"
+            :options="item.provinceOptions"
+          />
         </setting-item>
-        <setting-item name="地区代码">
-          <n-input v-model:value="item.adcode"> </n-input>
+        <setting-item name="城市名称">
+          <n-select placeholder="请选择城市" v-model:value="item.city_name" :options="item.cityOptions" />
         </setting-item>
-        <setting-item name="离地高度">
+        <setting-item name="区块厚度">
           <n-input-number v-model:value="item.height"> </n-input-number>
         </setting-item>
         <setting-item name="区块颜色">
@@ -187,71 +180,27 @@
         <setting-item name="区块透明度">
           <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
         </setting-item>
+        <setting-item></setting-item>
         <setting-item>
           <n-button size="small" @click="optionData.dataset.map3D.splice(map3DIndex, 1)"> - </n-button>
         </setting-item>
       </template>
-      <n-button
-        style="float: right"
-        size="small"
-        @click="optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
-      >
-        +
-      </n-button>
+      <div class="h-space"></div>
+      <n-button size="small" @click="handleAddRegion"> + </n-button>
     </SettingItemBox>
-    <SettingItemBox name="散点配置">
-      <template v-for="(item, scatterIndex) in optionData.dataset.scatter3D" :key="scatterIndex">
-        <setting-item name="地区名称">
-          <n-input v-model:value="item.name"> </n-input>
-        </setting-item>
-        <setting-item name="地区代码">
-          <n-input v-model:value="item.adcode"> </n-input>
-        </setting-item>
-        <setting-item name="离地高度">
-          <n-input-number v-model:value="item.height"> </n-input-number>
-        </setting-item>
+  </CollapseItem>
+  <CollapseItem name="柱状配置" :expanded="true">
+    <SettingItemBox name="柱状配置" :alone="true">
+      <template v-for="(item, barIndex) in optionData.dataset.bar3D" :key="barIndex">
         <setting-item name="经度">
           <n-input-number v-model:value="item.value[0]"> </n-input-number>
         </setting-item>
         <setting-item name="纬度">
           <n-input-number v-model:value="item.value[1]"> </n-input-number>
         </setting-item>
-        <setting-item name="散点颜色">
-          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
-        </setting-item>
-        <setting-item name="散点透明度">
-          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
-        </setting-item>
-        <setting-item> </setting-item>
-        <setting-item>
-          <n-button size="small" @click="optionData.dataset.scatter3D.splice(scatterIndex, 1)"> - </n-button>
-        </setting-item>
-      </template>
-      <n-button
-        style="float: right"
-        size="small"
-        @click="optionData.dataset.scatter3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
-      >
-        +
-      </n-button>
-    </SettingItemBox>
-    <SettingItemBox name="柱状配置">
-      <template v-for="(item, barIndex) in optionData.dataset.bar3D" :key="barIndex">
-        <setting-item name="地区名称">
-          <n-input v-model:value="item.name"> </n-input>
-        </setting-item>
-        <setting-item name="地区代码">
-          <n-input v-model:value="item.adcode"> </n-input>
-        </setting-item>
         <setting-item name="离地高度">
           <n-input-number v-model:value="item.height"> </n-input-number>
         </setting-item>
-        <setting-item name="经度">
-          <n-input-number v-model:value="item.value[0]"> </n-input-number>
-        </setting-item>
-        <setting-item name="纬度">
-          <n-input-number v-model:value="item.value[1]"> </n-input-number>
-        </setting-item>
         <setting-item name="柱状颜色">
           <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
         </setting-item>
@@ -262,6 +211,7 @@
           <n-button size="small" @click="optionData.dataset.bar3D.splice(barIndex, 1)"> - </n-button>
         </setting-item>
       </template>
+      <div class="h-space"></div>
       <n-button
         style="float: right"
         size="small"
@@ -274,13 +224,15 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
+import { PropType, computed, ref, onMounted } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import SelectCity from './components/SelectCity.vue'
 import { regionInfo } from './config'
 import { cloneDeep } from 'lodash'
+import { getAreaList } from '@/api/external/common/index'
+import { areaEnum } from '../../../Decorates/Mores/Weather/config'
 
 const props = defineProps({
   optionData: {
@@ -293,67 +245,83 @@ const seriesList = computed(() => {
   return props.optionData.series
 })
 
+const datasetMap3DList = computed(() => {
+  return props.optionData.dataset['map3D']
+})
+
 const STATIC_SCATTER_CONFIG = {
-  name: '',
+  name: null,
+  adcode: 510000,
+  city_name:null,
   value: [0, 0, 0],
-  adcode: 0,
-  height: 0,
+  height: 2,
   itemStyle: {
-    color: '',
+    color: '#4482B1FF',
     opacity: 1
   }
 }
 
-const symbolOption = ref([
-  {
-    label: 'circle',
-    value: 'circle'
-  },
-  {
-    label: 'rect',
-    value: 'rect'
-  },
-  {
-    label: 'roundRect',
-    value: 'roundRect'
-  },
-  {
-    label: 'triangle',
-    value: 'triangle'
-  },
-  {
-    label: 'diamond',
-    value: 'diamond'
-  },
-  {
-    label: 'pin',
-    value: 'pin'
-  },
-  {
-    label: 'arrow',
-    value: 'arrow'
-  },
-  {
-    label: 'none',
-    value: 'none'
-  }
-])
-
 const SelectCityRef = ref<InstanceType<typeof SelectCity>>()
 
+const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
+  const resp = await getAreaList({
+    level,
+    parentId
+  })
+  if (!resp) return []
+  return resp.map((item: Recordable) => ({ label: item.name, value: item.name, adcode: item.code }))
+}
+
+onMounted(async () => {
+  datasetMap3DList.value.forEach(async (item: Recordable) => {
+    item.provinceOptions = await getAreaLists()
+    item.cityOptions = await getAreaLists(areaEnum.CITY, !item.adcode ? mapRegionCache.value.adcode : item.adcode)
+    item.adcode =  !item.adcode ? mapRegionCache.value.adcode : item.adcode
+  })
+})
+
+const onHandleSelectProvince = async (value: number, option: Recordable, item: Recordable, mapIndex: number) => {
+  const findIndex = datasetMap3DList.value.findIndex((findItem: Recordable) => findItem.name === item.name)
+  datasetMap3DList.value[findIndex].city_name = null
+  datasetMap3DList.value[findIndex].adcode = option.adcode
+  datasetMap3DList.value[findIndex].cityOptions = await getAreaLists(areaEnum.CITY, option.adcode)
+}
+
+const handleAddRegion = () => {
+  props.optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))
+  datasetMap3DList.value.forEach(async (item: Recordable) => {
+    item.provinceOptions = await getAreaLists()
+  })
+}
+
+const mapRegionCache = computed(() => {
+  return props.optionData.mapRegion
+})
+
 const onHandleSelectValues = (values: regionInfo) => {
-  const { cityValue, countyValue, provinceValue } = values
-  props.optionData.mapRegion.saveSelect = values
-  props.optionData.mapRegion.adcode = countyValue
+  const { cityValue, countyValue, provinceValue, areaName } = values
+  mapRegionCache.value.areaName = areaName
+  mapRegionCache.value.saveSelect = values
+  mapRegionCache.value.adcode = countyValue
     ? countyValue
     : cityValue
     ? cityValue
     : provinceValue === 'china'
     ? 'china'
     : provinceValue
+  props.optionData.mapRegion = mapRegionCache.value
 }
 
 const handleChangeDrillingIn = () => {
   SelectCityRef.value?.resetValue()
+  props.optionData.mapRegion.adcode = 'china'
+  props.optionData.mapRegion.areaName = ''
+  props.optionData.mapRegion.saveSelect.areaName = ''
 }
 </script>
+
+<style scoped>
+.h-space {
+  height: 10px;
+}
+</style>

@@ -2,37 +2,9 @@
   "map3D": [
     {
       "name": "四川省",
-      "height": 5,
-      "adcode": "510000",
-      "itemStyle": {
-        "color": "#4482B1FF",
-        "opacity": 1,
-        "borderWidth": 0.4,
-        "borderColor": "#5F9EA0"
-      }
-    },
-    {
-      "name": "山西省",
-      "height": 6,
-      "adcode": "140000",
-      "itemStyle": {
-        "color": "#4482B1FF",
-        "opacity": 1,
-        "borderWidth": 0.4,
-        "borderColor": "#5F9EA0"
-      }
-    }
-  ],
-  "scatter3D": [
-    {
-      "name": "广东省",
-      "value": [
-        113.2592945,
-        23.1301964,
-        20000
-      ],
-      "adcode": "440000",
-      "height": 5,
+      "adcode": 510000,
+      "city_name": "成都市",
+      "height": 2,
       "itemStyle": {
         "color": "#4482B1FF",
         "opacity": 1,
@@ -43,14 +15,12 @@
   ],
   "bar3D": [
     {
-      "name": "安徽省",
       "value": [
         117.283042,
         31.86119,
         20000
       ],
-      "adcode": "340000",
-      "height": 5,
+      "height": 2,
       "itemStyle": {
         "color": "#4482B1FF",
         "opacity": 1,
@@ -59,4 +29,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}

@@ -20,10 +20,12 @@ import config, {
   backMapLevel,
   levelFunc,
   regionMapParentArea,
-  specialTreatmentAnhui
+  specialTreatmentAnhui,
+  setScale
 } from './config'
 import { getGeoJsonMap } from '@/api/external/common'
 import { ThreeMapEnum } from '@/enums/external/mapEnum'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   chartConfig: {
@@ -115,13 +117,14 @@ props.chartConfig.option = {
 
 //地图点击返回
 const handleBack = async () => {
+  stopWatch()
   if (drillingIn.value) {
     //如果是从右边配置里设置的，比如点击四川省，然后点击返回
     const savePopParent = saveHistoryParent.value.pop()
     let saveAdcode = savePopParent?.adcode as string | number
     saveLevelStr.level = savePopParent?.level as string
     if (!savePopParent) {
-      saveAdcode = getParentAdcode(mapRegion.value.adcode)
+      saveAdcode = getParentAdcode(mapRegion.value.adcode).adcodeNum
       saveLevelStr.level = (regionMapParentArea as Recordable)[mapRegion.value.saveSelect.levelStr]
     }
     if (saveAdcode === 0) {
@@ -132,6 +135,7 @@ const handleBack = async () => {
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
     saveClickRegion.value.level = saveLevelStr.level
     if (exist) {
+      mapRegion.value.areaName = getParentAdcode(mapRegion.value.adcode).areaName
       //fix 解决点击下钻返回后页面为空问题
       mapRegion.value.adcode = adcode
     }
@@ -142,20 +146,24 @@ const handleBack = async () => {
 const handleMap3DClick = async (params: Recordable) => {
   if (drillingIn.value) {
     const { name } = params
-    saveGeojson.value?.features.forEach((item: Recordable) => {
+    const geoJson = JSON.parse(saveGeojson.value?.geoJson)
+    geoJson?.features.forEach((item: Recordable) => {
       if (item.properties.name === name) {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
+        const areaName = item.properties.name
         if (level === 'DISTRICT') return //下钻暂且不支持地区
         if (String(adcode).startsWith('15') && level === areaEnum.CITY) return //特殊处理地区码15开头的
         mapRegion.value.adcode = adcode
+        mapRegion.value.areaName = areaName
         saveClickRegion.value.level = level
         saveLevelStr.level = level
         saveHistoryParent.value.push({
           adcode: specialTreatmentAnhui.includes(item.properties.name)
             ? JSON.parse(item.properties.parent)?.adcode
             : item.properties.parent.adcode,
-          level: (regionMapParentArea as Recordable)[level]
+          level: (regionMapParentArea as Recordable)[level],
+          areaName: saveGeojson.value.name
         })
       }
     })
@@ -182,18 +190,22 @@ const getGeojson = (regionId: number | string) => {
         regionId === 'china' ? chinaDefaultRegionId.value : regionId,
         !saveLevelStr.level ? levelStr : saveLevelStr.level //没有则获取右侧配置的行政级别
       ).then(res => {
-        const { geoJson, name, code, level } = res.data
+        saveGeojson.value = res.data //保存一份服务端返回的数据
+        const { geoJson, name, level, code } = res.data
         const geoJsonFile = JSON.parse(geoJson)
         if (!geoJsonFile) return
-        saveGeojson.value = geoJsonFile //保存一份服务端返回的geojson
         const nameChina = name === '中国' ? 'china' : name //为中国的话，registerMap第一个必须是china，否则显示不出来
         /**
          * 主要注意的点，registerMap中的第一个参数需要和series中的map匹配，否则渲染不出地图，
          * 比如map: '北京市' echarts.registerMap('北京市', beijingGeoJSON);
          */
-        registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile, specialAreas: {} }) //注册geoJSON
+        registerMap(level === areaEnum.COUNTRY ? nameChina : !mapRegion.value.areaName ? code : name, {
+          geoJSON: geoJsonFile,
+          specialAreas: {}
+        }) //注册geoJSON
         resolve(true)
         show.value = false
+        changeOption.value = true
       })
     })
   } catch (error) {
@@ -210,12 +222,15 @@ registerMap(mapRegion.value.adcode, { geoJSON: {} as any, specialAreas: {} })
 //传adcode 获取上级
 const getParentAdcode = (adcode: number) => {
   let adcodeNum = 100000
-  saveGeojson.value?.features.forEach((item: Recordable) => {
+  let areaName = ''
+  const geoJson = JSON.parse(saveGeojson.value?.geoJson)
+  geoJson.features.forEach((item: Recordable) => {
     if (item.properties.adcode === adcode) {
       adcodeNum = item.properties.parent.adcode
+      areaName = saveGeojson.value.name
     }
   })
-  return adcodeNum
+  return { adcodeNum, areaName }
 }
 
 // 初始化三维地图
@@ -224,7 +239,7 @@ const initMap3D = async () => {
   await nextTick()
   await getGeojson(mapRegion.value.adcode)
   await nextTick().then(() => {
-    handleRegisterMapNameAndData(mapRegion.value.adcode, dataset.value)
+    handleRegisterMapNameAndData(mapRegion.value.adcode, dataset.value, 'china')
   })
   chartInstance.value?.on('click', (e: Recordable) => {
     if (!e) return
@@ -235,16 +250,13 @@ const initMap3D = async () => {
 onMounted(() => initMap3D())
 
 // 动态注册 series中的map必须和registerMap的第一个参数匹配，否则渲染不出
-const handleRegisterMapNameAndData = (adcode: string | number, data: Recordable) => {
-  geo3D.value.map = adcode // coordinateSystem使用了geo3D,不能删除这一行
+const handleRegisterMapNameAndData = (adcode: string | number, data: Recordable, areaName: string) => {
+  geo3D.value.map = !areaName ? adcode : areaName // coordinateSystem使用了geo3D,不能删除这一行
   series.value.forEach((item: Recordable) => {
     if (item.type === ThreeMapEnum.MAP3D) {
-      item.map = adcode
+      item.map = !areaName ? adcode : areaName
       item.data = data[ThreeMapEnum.MAP3D]
     }
-    if (item.type === ThreeMapEnum.SCATTER3D) {
-      item.data = data[ThreeMapEnum.SCATTER3D]
-    }
     if (item.type === ThreeMapEnum.BAR3D) {
       item.data = data[ThreeMapEnum.BAR3D]
     }
@@ -274,18 +286,27 @@ watch(
 )
 
 //处理数据标点
-const handleDataPoint = (newData: string | number) => {
+const handleDataPoint = (newData: string | number, areaName: string) => {
   if (newData === 'china') {
     // 全国则展示所有的标点
-    handleRegisterMapNameAndData(newData, dataset.value)
+    handleRegisterMapNameAndData(newData, dataset.value, 'china')
   } else {
     // 展示对应区域的标点
     series.value.forEach((item: Recordable) => {
       if (item.type === ThreeMapEnum.MAP3D) {
-        item.data = [] //置空，否则鼠标移上去点击不了，不知道原因！
-      }
-      if (item.type === ThreeMapEnum.SCATTER3D) {
-        item.data = dataset.value[ThreeMapEnum.SCATTER3D].filter((dataItem: dataPointI) => dataItem.adcode === newData)
+        item.map = !areaName ? newData : areaName
+        item.data = dataset.value[ThreeMapEnum.MAP3D].filter((dataItem: dataPointI) => {
+          if (String(dataItem.adcode) === String(!areaName ? newData : areaName)) {
+            return dataItem
+          } else if (dataItem.name === String(!areaName ? newData : areaName)) {
+            return dataItem
+          }
+        })
+        const cloneDeepData = cloneDeep(item.data)
+        cloneDeepData.forEach((item: dataPointI) => {
+          item.name = item.city_name
+        })
+        item.data = cloneDeepData.filter((item: Recordable) => item.name !== null) || []
       }
       if (item.type === ThreeMapEnum.BAR3D) {
         item.data = dataset.value[ThreeMapEnum.BAR3D].filter((dataItem: dataPointI) => dataItem.adcode === newData)
@@ -293,22 +314,56 @@ const handleDataPoint = (newData: string | number) => {
     })
   }
 }
+const changeOption = ref(false)
 
 // 监听地图展示区域发生变化
 watch(
   () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async (newData: string | number) => {
+  async (newData: number | string) => {
     try {
       await getGeojson(newData)
-      handleRegisterMapNameAndData(newData, dataset.value)
-      handleDataPoint(newData)
-      handleSetOption(chartInstance.value!, props.chartConfig.option)
+      const { distance, zoom, alpha } = setScale(String(newData))
+      const option = props.chartConfig.option
+      // 修复缩放
+      const { series } = option || {}
+      series?.forEach((item: Recordable) => {
+        if (item.type === 'map3D') {
+          item.viewControl = {
+            ...item?.viewControl,
+            distance,
+            zoom,
+            alpha
+          }
+        }
+      })
+      handleRegisterMapNameAndData(newData, dataset.value, mapRegion.value.areaName)
+      handleDataPoint(newData, mapRegion.value.areaName)
+      changeOption.value = true
+      handleSetOption(chartInstance.value!, { ...option, series })
     } catch (error) {
       console.error('展示区域发生变化出错，出错原因->', error)
     }
   },
   {
-    immediate: true
+    immediate: true,
+    deep: true
+  }
+)
+
+// 实时监听地图右侧配置项变化
+const stopWatch = watch(
+  props.chartConfig.option,
+  async newData => {
+    try {
+      if (changeOption.value) {
+        // handleSetOption(chartInstance.value!, newData)
+      }
+    } catch (error) {
+      console.error('监听地图右侧配置项变化，出错原因->', error)
+    }
+  },
+  {
+    deep: true
   }
 )
 </script>