fix(src/packages): 3D地图，中国下钻到四川省，再下钻到成都市，成都市点击返回没有回显，再点击返回回显为全国地图

fengwotao
1 parent d18fe193
Showing 1 changed file with 74 additions and 100 deletions
src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
--- a/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
View file @99e3910
+++ b/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
View file @99e3910
@@ -2,7 +2,7 @@
   <!-- 原生方式，没有使用vue-echarts -->
   <n-space vertical>
     <n-spin :show="show">
-      <div id="map3DId" :style="`width:${w}px;height:${h}px;`"></div>
+      <div :style="`width:${w}px;height:${h}px;`" ref="map3DRef"></div>
     </n-spin>
   </n-space>
 </template>
@@ -29,6 +29,8 @@ const iconStr = ref(
 const { w, h } = toRefs(props.chartConfig.attr)
+const map3DRef = ref()
+
 const show = ref(true)
 const chartInstance = ref()
@@ -45,7 +47,7 @@ const toolBoxOption = ref({
       iconStyle: {
         color: ''
       },
-      onclick: () => mapClickBack()
+      onclick: () => watchAdcode()
     }
   }
 })
@@ -58,51 +60,40 @@ 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 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)
+const watchAdcode = async () => {
+  stopWatch()
+  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]
     }
-  } 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
+    if (saveAdcode === 0) {
+      saveAdcode = 'china'
+      saveLevelStr.level = 'COUNTRY'
     }
-  })
+    const exist = await getGeojson(saveAdcode)
+    const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
+    if (exist) {
+      //fix解决点击下钻返回后页面为空问题
+      props.chartConfig.option.mapRegion.adcode = adcode
+    }
+  }
 }
 const regionMapParentArea = {
@@ -112,7 +103,7 @@ const regionMapParentArea = {
   [areaEnum.TOWN]: areaEnum.COUNTY //镇的上一级 县或者区
 }
-//三维地图点击
+//地图点击
 const handleMap3DClick = async (params: Recordable) => {
   if (props.chartConfig.option.drillingIn) {
     const { name } = params
@@ -120,55 +111,48 @@ const handleMap3DClick = async (params: Recordable) => {
       if (item.properties.name === name) {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
-        //如果是区则终止，目前没有加区下面的geojson数据
         if (level === 'DISTRICT') 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 Recordable)[level]
         })
-        handleDataPoint(adcode)
       }
     })
   }
 }
-// 保存geojson
-const saveGeojson: Recordable = ref({})
+const saveGeojson: Recordable = ref({}) // 保存geojson
-//如果是china则adcode为100000
-const chinaDefaultRegionId = ref(100000)
+const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 // 保存地区级别
 const saveLevelStr = reactive<{ level: string | undefined }>({
   level: ''
 })
-// 保存上一级的adcode和行政级别
 const saveHistoryParent = ref<HistoryParentType[]>([])
 //动态注册地图
-const registerGeojson = (regionId: number | string) => {
+const getGeojson = (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 => {
-        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
-        }
+        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)
       })
     })
   } catch (error) {
@@ -179,13 +163,10 @@ const registerGeojson = (regionId: number | string) => {
   }
 }
-//注册出错则注册空的，不然在选择正确的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: Recordable) => {
+  saveGeojson.value?.features.forEach((item: Recordable) => {
     if (item.properties.adcode === adcode) {
       adcodeNum = item.properties.parent.adcode
     }
@@ -203,50 +184,39 @@ watch(
   }
 )
-//初始化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)
-  }
+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: Recordable) => {
+    handleMap3DClick(e)
+  })
 }
-onMounted(() => {
-  setTimeout(() => {
-    initMap3D()
-  }, 500)
-})
-
 // 手动触发渲染
 const handleSetOption = (instance: any, option: Recordable) => {
+  if (!instance) return
   try {
-    if (!instance) return
     instance.clear()
     instance.setOption(option)
   } catch (error) {
-    console.error('手动触发渲染出错', error)
+    console.error('触发渲染出错', error)
   }
 }
+onMounted(() => {
+  initMap()
+})
+
 //处理数据标点
 const handleDataPoint = (newData: string | number) => {
   if (newData === 'china') {
-    //全国则显示所有标点
-    props.chartConfig.option.series[1].data=dataMaps
+    props.chartConfig.option.dataset = dataMaps
   } else {
-    //显示对应区域标点
-     props.chartConfig.option.series[1].data = dataMaps.filter((item: dataPointI) => item.adcode === newData)
+    props.chartConfig.option.dataset = dataMaps.filter((item: dataPointI) => item.adcode === newData)
   }
 }
@@ -255,12 +225,18 @@ watch(
   () => `${props.chartConfig.option.mapRegion.adcode}`,
   async (newData: string | number) => {
     try {
-      await registerGeojson(newData)
-      setMap3DPartOption(newData)
+      await getGeojson(newData)
+      props.chartConfig.option.geo3D.map = newData
+      props.chartConfig.option.series.forEach((item: Recordable) => {
+        if (item.type === 'map3D') {
+          item.map = newData
+          item.data = props.chartConfig.option.dataset
+        }
+      })
       handleSetOption(chartInstance.value, props.chartConfig.option)
       handleDataPoint(newData)
     } catch (error) {
-      console.log('监听地图展示区域发生变化', error)
+      console.log('展示区域发生变化出错', error)
     }
   },
   {
@@ -269,13 +245,13 @@ watch(
 )
 // 监听地图右侧配置项变化
-watch(
+const stopWatch = watch(
   props.chartConfig.option,
   async newData => {
     try {
       handleSetOption(chartInstance.value, newData)
     } catch (error) {
-      console.log('监听地图右侧配置项变化', error)
+      console.log(error)
     }
   },
   {
@@ -290,18 +266,16 @@ watch(
     try {
       props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
-          item.adcode = props.chartConfig.option.mapRegion.adcode
           item.data = newData
         }
       })
       handleSetOption(chartInstance.value, props.chartConfig.option)
     } catch (error) {
-      console.log('监听地图dataset配置项变化', error)
+      console.log(error)
     }
   },
   {
-    deep: true,
-    immediate: true
+    deep: true
   }
 )
 </script>