feat(src/packages): 优化3d地图代码和注释

@@ -111,7 +111,7 @@ export const getVideoUrl = (id: string) =>
   })
 
 //获取行政区域
-export const getGeoJsonMap = (code: number, level: string) =>
+export const getGeoJsonMap = (code: number | string, level: string) =>
   defHttp.get({
     url: `${Api.GEOJSONURL}${code}/${level}`
   })

@@ -14,6 +14,26 @@ export const enum areaEnum {
   TOWN = 'TOWN' //镇
 }
 
+//父级地区编码和级别接口
+export interface HistoryParentType {
+  adcode: string | number
+  level: string
+}
+
+//数据源接口
+export interface dataPointI {
+  name: string
+  value: number[]
+  adcode: number
+  height: number
+  itemStyle: {
+    color: string
+    opacity: number
+    borderWidth: number
+    borderColor: string
+  }
+}
+
 export const includes = []
 
 export const option = {

@@ -2,7 +2,7 @@
   <!-- 原生方式，没有使用vue-echarts -->
   <n-space vertical>
     <n-spin :show="show">
-      <div :style="`width:${w}px;height:${h}px;`" ref="map3DRef"></div>
+      <div id="map3DId" :style="`width:${w}px;height:${h}px;`"></div>
     </n-spin>
   </n-space>
 </template>
@@ -12,7 +12,7 @@ import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue
 import * as echarts from 'echarts'
 import { registerMap } from 'echarts/core'
 import 'echarts-gl'
-import config, { areaEnum } from './config'
+import config, { areaEnum, dataPointI, HistoryParentType } from './config'
 import { getGeoJsonMap } from '@/api/external/common'
 import dataMaps from './data.json'
 
@@ -29,8 +29,6 @@ const iconStr = ref(
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const map3DRef = ref()
-
 const show = ref(true)
 
 const chartInstance = ref()
@@ -47,7 +45,7 @@ const toolBoxOption = ref({
       iconStyle: {
         color: ''
       },
-      onclick: () => watchAdcode()
+      onclick: () => mapClickBack()
     }
   }
 })
@@ -60,44 +58,53 @@ watch(
     toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop
-  },
-  {
-    deep: true
   }
 )
 
+//追加右上角返回图标配置
 props.chartConfig.option = {
   ...props.chartConfig.option,
   ...{ toolbox: toolBoxOption.value }
 }
 
 //地图点击返回
-const watchAdcode = async () => {
-  if (props.chartConfig.option.drillingIn) {
-    //如果是从右边配置里设置的，比如点击四川省，然后点击返回
-    const savePopParent = saveHistoryParent.value.pop()
-    let saveAdcode: any = savePopParent?.adcode
-    saveLevelStr.level = savePopParent?.level as string
-    if (!savePopParent) {
-      saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
-      saveLevelStr.level = (regionMapParentArea as any)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
-    }
-    if (saveAdcode === 0) {
-      saveAdcode = 'china'
-      saveLevelStr.level = 'COUNTRY'
+const mapClickBack = async () => {
+  try {
+    if (props.chartConfig.option.drillingIn) {
+      //如果是从右边配置里设置的，比如点击四川省，然后点击返回
+      const savePopParent = saveHistoryParent.value.pop()
+      let saveAdcode = savePopParent?.adcode as string | number
+      saveLevelStr.level = savePopParent?.level
+      if (!savePopParent) {
+        saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
+        saveLevelStr.level = (regionMapParentArea as Recordable)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
+      }
+      if (saveAdcode === 0) {
+        saveAdcode = 'china'
+        saveLevelStr.level = 'COUNTRY'
+      }
+      await registerGeojson(saveAdcode)
+      const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
+      setMap3DPartOption(adcode)
+      handleSetOption(chartInstance.value, props.chartConfig.option)
+      handleDataPoint(adcode)
     }
-    await getGeojson(saveAdcode)
-    const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
-    props.chartConfig.option.geo3D.map = adcode
-    props.chartConfig.option.series.forEach((item: any) => {
-      if (item.type === 'map3D') item.map = adcode
-      item.data = props.chartConfig.option.dataset
-    })
-    handleSetOption(chartInstance.value, props.chartConfig.option)
-    handleDataPoint(adcode)
+  } catch (error) {
+    console.error('地图点击返回出错', error)
   }
 }
 
+//设置map3D部分属性
+const setMap3DPartOption = (adcode: number | string) => {
+  props.chartConfig.option.geo3D.map = adcode
+  props.chartConfig.option.series.forEach((item: Recordable) => {
+    if (item.type === 'map3D') {
+      item.map = adcode
+      item.data = props.chartConfig.option.dataset
+    }
+  })
+}
+
 const regionMapParentArea = {
   [areaEnum.PROVINCE]: areaEnum.COUNTRY, //省份的上一级 中国
   [areaEnum.CITY]: areaEnum.PROVINCE, //城市的上一级 省份
@@ -105,62 +112,63 @@ const regionMapParentArea = {
   [areaEnum.TOWN]: areaEnum.COUNTY //镇的上一级 县或者区
 }
 
-//地图点击
-const handleMap3DClick = async (params: any) => {
+//三维地图点击
+const handleMap3DClick = async (params: Recordable) => {
   if (props.chartConfig.option.drillingIn) {
     const { name } = params
-    saveGeojson.value?.features.forEach((item: any) => {
+    saveGeojson.value?.features.forEach((item: Recordable) => {
       if (item.properties.name === name) {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
+        //如果是区则终止，目前没有加区下面的geojson数据
         if (level === 'DISTRICT') return
-        if(String(adcode).startsWith('15') && level===areaEnum.CITY) return
+        //特殊处理15开头的geojson数据
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
         props.chartConfig.option.mapRegion.adcode = adcode
         saveLevelStr.level = level
         handleDataPoint(adcode)
         saveHistoryParent.value.push({
           adcode: item.properties.parent.adcode,
-          level: (regionMapParentArea as any)[level]
+          level: (regionMapParentArea as Recordable)[level]
         })
       }
     })
   }
 }
 
-const saveGeojson: any = ref({}) // 保存geojson
+// 保存geojson
+const saveGeojson: Recordable = ref({})
 
-const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
+//如果是china则adcode为100000
+const chinaDefaultRegionId = ref(100000)
 
-const saveLevelStr = reactive({
-   // 地区级别
-   level: ''
+// 保存地区级别
+const saveLevelStr = reactive<{ level: string | undefined }>({
+  level: ''
 })
 
-//父级地区编码和级别接口
-interface HistoryParentType {
-  adcode: number
-  level: string
-}
-
+// 保存上一级的adcode和行政级别
 const saveHistoryParent = ref<HistoryParentType[]>([])
 
 //动态注册地图
-const getGeojson = (regionId: any) => {
+const registerGeojson = (regionId: number | string) => {
   try {
     return new Promise<boolean>(resolve => {
-      const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
+      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)
-        if (!geoJsonFile) return
-        saveGeojson.value = geoJsonFile
-        const nameChina = name === '中国' ? 'china' : name
-        registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
-        show.value = false
-        resolve(true)
+        if (res.data) {
+          const { geoJson, name, code, level } = res.data
+          if (!geoJson) return
+          const geoJsonFile = JSON.parse(geoJson)
+          saveGeojson.value = geoJsonFile
+          const nameChina = name === '中国' ? 'china' : name
+          registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile, specialAreas: {} })
+          resolve(true)
+          show.value = false
+        }
       })
     })
   } catch (error) {
@@ -171,11 +179,13 @@ const getGeojson = (regionId: any) => {
   }
 }
 
+//注册出错则注册空的，不然在选择正确的adcode，则视图无法更新
+registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
 
-//传adcode 获取上级
+//获取上级adcode
 const getParentAdcode = (adcode: number) => {
   let adcodeNum = 100000
-  saveGeojson.value?.features.forEach((item: any) => {
+  saveGeojson.value?.features?.forEach((item: Recordable) => {
     if (item.properties.adcode === adcode) {
       adcodeNum = item.properties.parent.adcode
     }
@@ -193,59 +203,64 @@ watch(
   }
 )
 
-const initMap = async () => {
-  chartInstance.value = echarts.init(map3DRef.value)
-  await nextTick()
-  await getGeojson(props.chartConfig.option.mapRegion.adcode)
-  await nextTick().then(() => {
-    handleSetOption(chartInstance.value, props.chartConfig.option)
-  })
-  chartInstance.value.on('click', (e: any) => {
-    handleMap3DClick(e)
-  })
+//初始化3D地图
+const initMap3D = async () => {
+  try {
+    const dom = document.getElementById('map3DId') as HTMLElement
+    chartInstance.value = echarts.init(dom)
+    await nextTick()
+    await registerGeojson(props.chartConfig.option.mapRegion.adcode)
+    await nextTick().then(() => {
+      handleSetOption(chartInstance.value, props.chartConfig.option)
+    })
+    //三维地图点击
+    chartInstance.value.on('click', (e: Recordable) => {
+      handleMap3DClick(e)
+    })
+  } catch (error) {
+    console.error('[initMap3D]初始化3d地图出错', error)
+  }
 }
 
+onMounted(() => {
+  setTimeout(() => {
+    initMap3D()
+  }, 500)
+})
+
 // 手动触发渲染
-const handleSetOption = (instance: any, option: any) => {
-  if (!instance) return
+const handleSetOption = (instance: any, option: Recordable) => {
   try {
+    if (!instance) return
     instance.clear()
     instance.setOption(option)
   } catch (error) {
-    console.error('触发渲染出错', error)
+    console.error('手动触发渲染出错', error)
   }
 }
 
-onMounted(() => {
-  initMap()
-})
-
 //处理数据标点
-const handleDataPoint = (newData: any) => {
+const handleDataPoint = (newData: string | number) => {
   if (newData === 'china') {
+    //全国则显示所有标点
     props.chartConfig.option.dataset = dataMaps
   } else {
-    props.chartConfig.option.dataset = dataMaps.filter((item: any) => item.adcode === newData)
+    //显示对应区域标点
+    props.chartConfig.option.dataset = dataMaps.filter((item: dataPointI) => item.adcode === newData)
   }
 }
 
 //监听地图展示区域发生变化
 watch(
   () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async (newData: any) => {
+  async (newData: string | number) => {
     try {
-      await getGeojson(newData)
-      props.chartConfig.option.geo3D.map = newData
-      props.chartConfig.option.series.forEach((item: any) => {
-        if (item.type === 'map3D') {
-          item.map = newData
-          item.data = props.chartConfig.option.dataset
-        }
-      })
+      await registerGeojson(newData)
+      setMap3DPartOption(newData)
       handleSetOption(chartInstance.value, props.chartConfig.option)
       handleDataPoint(newData)
     } catch (error) {
-      console.log('展示区域发生变化出错', error)
+      console.log('监听地图展示区域发生变化', error)
     }
   },
   {
@@ -260,7 +275,7 @@ watch(
     try {
       handleSetOption(chartInstance.value, newData)
     } catch (error) {
-      console.log(error)
+      console.log('监听地图右侧配置项变化', error)
     }
   },
   {
@@ -273,14 +288,14 @@ watch(
   () => props.chartConfig.option.dataset,
   newData => {
     try {
-      props.chartConfig.option.series.forEach((item: any) => {
+      props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
           item.data = newData
         }
       })
       handleSetOption(chartInstance.value, props.chartConfig.option)
     } catch (error) {
-      console.log(error)
+      console.log('监听地图dataset配置项变化', error)
     }
   },
   {