feat(src/packages): 图表3d地图也支持下钻 修改地图注册方式为服务端接口请求

@@ -24,7 +24,8 @@ const selectOptions = reactive({
 const selectValues = reactive({
 const selectValues = reactive({
   provinceValue: 'china',
   provinceValue: 'china',
   cityValue: null,
   cityValue: null,
-  countyValue: null
+  countyValue: null,
+  levelStr: areaEnum.COUNTRY
 })
 })
 
 
 const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
 const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
@@ -49,13 +50,15 @@ onMounted(async () => {
 const onHandleSelectProvince = async (value: number | string) => {
 const onHandleSelectProvince = async (value: number | string) => {
   selectValues.cityValue = null
   selectValues.cityValue = null
   selectValues.countyValue = null
   selectValues.countyValue = null
-  if (value === 'china') return
+  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 any)
+  selectValues.levelStr = areaEnum.PROVINCE
 }
 }
 
 
 const onHandleSelectCity = async (value: number) => {
 const onHandleSelectCity = async (value: number) => {
   selectValues.countyValue = null
   selectValues.countyValue = null
   selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
   selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
+  selectValues.levelStr = areaEnum.CITY
 }
 }
 
 
 const onHandleSubmit = () => {
 const onHandleSubmit = () => {

@@ -7,9 +7,11 @@ import dataMaps from './data.json'
 
 
 //省市区枚举
 //省市区枚举
 export const enum areaEnum {
 export const enum areaEnum {
-  PROVINCE = 'PROVINCE',
-  CITY = 'CITY',
-  COUNTY = 'COUNTY'
+  PROVINCE = 'PROVINCE', //省份
+  CITY = 'CITY', //城市
+  COUNTY = 'COUNTY', //县
+  COUNTRY = 'COUNTRY', //国家
+  TOWN = 'TOWN' //镇
 }
 }
 
 
 export const includes = []
 export const includes = []
@@ -24,34 +26,28 @@ export const option = {
   mapRegion: {
   mapRegion: {
     adcode: 'china',
     adcode: 'china',
     showHainanIsLands: true,
     showHainanIsLands: true,
-    saveSelect: {}
+    saveSelect: {
+      levelStr: areaEnum.COUNTRY
+    }
   },
   },
   tooltip: {
   tooltip: {
     show: true
     show: true
   },
   },
   geo3D: {
   geo3D: {
+    show: false, // 隐藏该层，为true时会导致出现两个地图
     map: 'centerMap',
     map: 'centerMap',
     roam: true,
     roam: true,
     regionHeight: 0,
     regionHeight: 0,
-    label: {
-      show: true,
-      textStyle: {
-        fontSize: 14,
-        color: 'blue',
-        borderWidth: 0,
-        borderColor: '#000'
-      }
-    },
     emphasis: {
     emphasis: {
       label: {
       label: {
         show: true,
         show: true,
         textStyle: {
         textStyle: {
-          color: 'black',
-          fontSize: 32
+          color: '#000',
+          fontSize: 14
         }
         }
       },
       },
       itemStyle: {
       itemStyle: {
-        color: '#fd9c5a'
+        color: '#ff0'
       }
       }
     }
     }
   },
   },
@@ -63,8 +59,10 @@ export const option = {
       regionHeight: 3,
       regionHeight: 3,
       label: {
       label: {
         show: true,
         show: true,
-        color: 'yellow',
-        fontSize: 14
+        textStyle: {
+          color: '#fff',
+          fontSize: 14
+        }
       },
       },
       itemStyle: {
       itemStyle: {
         color: 'green',
         color: 'green',

@@ -2,7 +2,7 @@
   <!-- Echarts 全局设置 -->
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem name="地图" :expanded="true">
   <CollapseItem name="地图" :expanded="true">
-    <!-- <SettingItemBox name="开启下钻">
+    <SettingItemBox name="开启下钻">
       <SettingItem name="">
       <SettingItem name="">
         <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
         <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
       </SettingItem>
       </SettingItem>
@@ -34,7 +34,7 @@
           placeholder="请输入"
           placeholder="请输入"
         ></n-input-number>
         ></n-input-number>
       </SettingItem>
       </SettingItem>
-    </SettingItemBox> -->
+    </SettingItemBox>
     <SelectCity :optionData="optionData" :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
     <SelectCity :optionData="optionData" :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
     <SettingItemBox name="颜色">
     <SettingItemBox name="颜色">
       <SettingItem name="区域颜色">
       <SettingItem name="区域颜色">
@@ -69,11 +69,15 @@
         <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
         <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
       </SettingItem>
       </SettingItem>
       <SettingItem name="颜色">
       <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[0].label.textStyle.color"
+        ></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem name="大小">
       <SettingItem name="大小">
         <n-input-number
         <n-input-number
-          v-model:value="seriesList[0].label.fontSize"
+          v-model:value="seriesList[0].label.textStyle.fontSize"
           :min="0"
           :min="0"
           size="small"
           size="small"
           placeholder="请输入"
           placeholder="请输入"

@@ -4,12 +4,12 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { onMounted, ref, nextTick, PropType, toRefs, watch } from 'vue'
+import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue'
 import * as echarts from 'echarts'
 import * as echarts from 'echarts'
 import { registerMap } from 'echarts/core'
 import { registerMap } from 'echarts/core'
 import 'echarts-gl'
 import 'echarts-gl'
-import config from './config'
-import cityMap from '../OverrideMapBase/mapGeojson/china-main-city-map.json'
+import config, { areaEnum } from './config'
+import { getGeoJsonMap } from '@/api/external/common'
 
 
 type historyDataType = { name: string; code: string }
 type historyDataType = { name: string; code: string }
 
 
@@ -71,40 +71,76 @@ props.chartConfig.option = {
 }
 }
 
 
 //地图点击返回
 //地图点击返回
-const watchAdcode = () => {
+const watchAdcode = async () => {
   if (props.chartConfig.option.drillingIn) {
   if (props.chartConfig.option.drillingIn) {
-    const code = historyData.value.at(-2)?.code
-    props.chartConfig.option.mapRegion.adcode = code ? code : 'china'
-    historyData.value.pop()
+    saveLevelStr.level = saveLevelStr.parentInfo.level
+    await getGeojson(saveLevelStr.parentInfo.adcode)
+    props.chartConfig.option.geo3D.map =
+      saveLevelStr.parentInfo.adcode === 100000 ? 'china' : saveLevelStr.parentInfo.adcode
+    props.chartConfig.option.series.forEach((item: any) => {
+      if (item.type === 'map3D')
+        item.map = saveLevelStr.parentInfo.adcode === 100000 ? 'china' : saveLevelStr.parentInfo.adcode
+      item.data = props.chartConfig.option.dataset
+    })
+    handleSetOption(chartInstance.value, props.chartConfig.option)
   }
   }
 }
 }
 
 
+const regionMapParentArea = {
+  [areaEnum.PROVINCE]: areaEnum.COUNTRY, //省份的上一级 中国
+  [areaEnum.CITY]: areaEnum.PROVINCE, //城市的上一级 省份
+  [areaEnum.COUNTY]: areaEnum.CITY, //县或者区的上一级 城市
+  [areaEnum.TOWN]: areaEnum.COUNTY //镇的上一级 县或者区
+}
+
 //地图点击
 //地图点击
 const handleMap3DClick = async (params: any) => {
 const handleMap3DClick = async (params: any) => {
   if (props.chartConfig.option.drillingIn) {
   if (props.chartConfig.option.drillingIn) {
     const { name } = params
     const { name } = params
-    saveSelectValue.value = name
-    const findAdcode = (cityMap as any)[name]
-    if (!findAdcode) return
-    props.chartConfig.option.mapRegion.adcode = findAdcode
-    historyData.value.push({
-      name,
-      code: findAdcode
+    saveGeojson.value?.features.forEach((item: any) => {
+      if (item.properties.name === name) {
+        const level = item.properties.level.toUpperCase()
+        const adcode = item.properties.adcode
+        props.chartConfig.option.mapRegion.adcode = adcode
+        saveLevelStr.level = level
+        saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码
+        saveLevelStr.parentInfo.level = (regionMapParentArea as any)[level] //保存上一级的行政级别
+      }
     })
     })
   }
   }
 }
 }
 
 
+const saveGeojson: any = ref({}) // 保存geojson
+
+const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
+
+const saveLevelStr = reactive({
+  // 保存行政级别和上一级的adcode和level
+  level: '',
+  parentInfo: {
+    adcode: 0,
+    level: ''
+  }
+})
+
 //动态获取geojson文件进行注册地图
 //动态获取geojson文件进行注册地图
-const getGeojson = (regionId: string) => {
+const getGeojson = (regionId: any) => {
   try {
   try {
     return new Promise<boolean>(resolve => {
     return new Promise<boolean>(resolve => {
-      import(`../OverrideMapBase/mapGeojson/${regionId}.json`).then(data => {
-        registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
+      const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
+      getGeoJsonMap(
+        regionId === 'china' ? chinaDefaultRegionId.value : regionId,
+        !saveLevelStr.level ? levelStr : saveLevelStr.level
+      ).then(res => {
+        const { geoJson, name, code, level } = res.data
+        const geoJsonFile = JSON.parse(geoJson)
+        saveGeojson.value = geoJsonFile
+        registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
         resolve(true)
         resolve(true)
       })
       })
     })
     })
-  } catch (e) {
-    console.log(e)
+  } catch (error) {
+    console.error('注册地图出错', error)
   }
   }
 }
 }
 
 
@@ -126,8 +162,7 @@ const initMap = async () => {
     handleSetOption(chartInstance.value, props.chartConfig.option)
     handleSetOption(chartInstance.value, props.chartConfig.option)
   })
   })
   chartInstance.value.on('click', (e: any) => {
   chartInstance.value.on('click', (e: any) => {
-    console.log(`地图点击`, e)
-    // handleMap3DClick(e)
+    handleMap3DClick(e)
   })
   })
 }
 }
 
 
@@ -137,8 +172,8 @@ const handleSetOption = (instance: any, option: any) => {
   try {
   try {
     instance.clear()
     instance.clear()
     instance.setOption(option)
     instance.setOption(option)
-    // eslint-disable-next-line no-empty
-  } finally {
+  } catch (error) {
+    console.error('触发渲染出错', error)
   }
   }
 }
 }
 
 
@@ -161,7 +196,7 @@ watch(
       })
       })
       handleSetOption(chartInstance.value, props.chartConfig.option)
       handleSetOption(chartInstance.value, props.chartConfig.option)
     } catch (error) {
     } catch (error) {
-      console.log(error)
+      console.log('展示区域发生变化出错', error)
     }
     }
   },
   },
   {
   {

@@ -152,7 +152,7 @@ const getGeojson = async (regionId: any) => {
 }
 }
 
 
 //异步时先注册空的 保证初始化不报错
 //异步时先注册空的 保证初始化不报错
-registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
+registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
 
 
 // 进行更换初始化地图 如果为china 单独处理
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
 const registerMapInitAsync = async () => {