Commit 566fa236aa6b28bcdeb9f007556622e3e388e42c

Authored by fengwotao
1 parent 8afd899c

fix(src/packages): 图表下的地图 3d地图修改成和普通地图一样的

@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 { 2 {
3 "name": "四川省", 3 "name": "四川省",
4 "value": [104.10068024609373, 30.580525329665175, 20000], 4 "value": [104.10068024609373, 30.580525329665175, 20000],
  5 + "adcode": 510000,
5 "height": 5, 6 "height": 5,
6 "itemStyle": { 7 "itemStyle": {
7 "color": "pink", 8 "color": "pink",
@@ -13,6 +14,7 @@ @@ -13,6 +14,7 @@
13 { 14 {
14 "name": "湖南省", 15 "name": "湖南省",
15 "value": [111.73068512890623, 27.86754509366569, 20000], 16 "value": [111.73068512890623, 27.86754509366569, 20000],
  17 + "adcode": 430000,
16 "height": 4, 18 "height": 4,
17 "itemStyle": { 19 "itemStyle": {
18 "color": "blue", 20 "color": "blue",
@@ -24,6 +26,7 @@ @@ -24,6 +26,7 @@
24 { 26 {
25 "name": "吉林省", 27 "name": "吉林省",
26 "value": [126.45236481640623, 43.7943407914815, 20000], 28 "value": [126.45236481640623, 43.7943407914815, 20000],
  29 + "adcode": 220000,
27 "height": 5, 30 "height": 5,
28 "itemStyle": { 31 "itemStyle": {
29 "color": "yellow", 32 "color": "yellow",
@@ -35,6 +38,7 @@ @@ -35,6 +38,7 @@
35 { 38 {
36 "name": "山东省", 39 "name": "山东省",
37 "value": [118.67404450390623, 36.16387465872037, 20000], 40 "value": [118.67404450390623, 36.16387465872037, 20000],
  41 + "adcode": 370000,
38 "height": 6, 42 "height": 6,
39 "itemStyle": { 43 "itemStyle": {
40 "color": "orange", 44 "color": "orange",
@@ -14,6 +14,7 @@ import { registerMap } from 'echarts/core' @@ -14,6 +14,7 @@ import { registerMap } from 'echarts/core'
14 import 'echarts-gl' 14 import 'echarts-gl'
15 import config, { areaEnum } from './config' 15 import config, { areaEnum } from './config'
16 import { getGeoJsonMap } from '@/api/external/common' 16 import { getGeoJsonMap } from '@/api/external/common'
  17 +import dataMaps from './data.json'
17 18
18 const props = defineProps({ 19 const props = defineProps({
19 chartConfig: { 20 chartConfig: {
@@ -73,16 +74,22 @@ props.chartConfig.option = { @@ -73,16 +74,22 @@ props.chartConfig.option = {
73 //地图点击返回 74 //地图点击返回
74 const watchAdcode = async () => { 75 const watchAdcode = async () => {
75 if (props.chartConfig.option.drillingIn) { 76 if (props.chartConfig.option.drillingIn) {
  77 + let saveAdcode: any = saveLevelStr.parentInfo.adcode
76 saveLevelStr.level = saveLevelStr.parentInfo.level 78 saveLevelStr.level = saveLevelStr.parentInfo.level
77 - await getGeojson(saveLevelStr.parentInfo.adcode)  
78 - props.chartConfig.option.geo3D.map =  
79 - saveLevelStr.parentInfo.adcode === 100000 ? 'china' : saveLevelStr.parentInfo.adcode 79 + if (saveAdcode === 0) {
  80 + //
  81 + saveAdcode = 'china'
  82 + saveLevelStr.level = 'COUNTRY'
  83 + }
  84 + await getGeojson(saveAdcode)
  85 + const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
  86 + props.chartConfig.option.geo3D.map = adcode
80 props.chartConfig.option.series.forEach((item: any) => { 87 props.chartConfig.option.series.forEach((item: any) => {
81 - if (item.type === 'map3D')  
82 - item.map = saveLevelStr.parentInfo.adcode === 100000 ? 'china' : saveLevelStr.parentInfo.adcode 88 + if (item.type === 'map3D') item.map = adcode
83 item.data = props.chartConfig.option.dataset 89 item.data = props.chartConfig.option.dataset
84 }) 90 })
85 handleSetOption(chartInstance.value, props.chartConfig.option) 91 handleSetOption(chartInstance.value, props.chartConfig.option)
  92 + handleDataPoint(adcode)
86 } 93 }
87 } 94 }
88 95
@@ -105,6 +112,7 @@ const handleMap3DClick = async (params: any) => { @@ -105,6 +112,7 @@ const handleMap3DClick = async (params: any) => {
105 saveLevelStr.level = level 112 saveLevelStr.level = level
106 saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码 113 saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码
107 saveLevelStr.parentInfo.level = (regionMapParentArea as any)[level] //保存上一级的行政级别 114 saveLevelStr.parentInfo.level = (regionMapParentArea as any)[level] //保存上一级的行政级别
  115 + handleDataPoint(adcode)
108 } 116 }
109 }) 117 })
110 } 118 }
@@ -123,7 +131,7 @@ const saveLevelStr = reactive({ @@ -123,7 +131,7 @@ const saveLevelStr = reactive({
123 } 131 }
124 }) 132 })
125 133
126 -//动态获取geojson文件进行注册地图 134 +//动态注册地图
127 const getGeojson = (regionId: any) => { 135 const getGeojson = (regionId: any) => {
128 try { 136 try {
129 return new Promise<boolean>(resolve => { 137 return new Promise<boolean>(resolve => {
@@ -134,14 +142,19 @@ const getGeojson = (regionId: any) => { @@ -134,14 +142,19 @@ const getGeojson = (regionId: any) => {
134 ).then(res => { 142 ).then(res => {
135 const { geoJson, name, code, level } = res.data 143 const { geoJson, name, code, level } = res.data
136 const geoJsonFile = JSON.parse(geoJson) 144 const geoJsonFile = JSON.parse(geoJson)
  145 + if (!geoJsonFile) return
137 saveGeojson.value = geoJsonFile 146 saveGeojson.value = geoJsonFile
138 - registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} }) 147 + const nameChina = name === '中国' ? 'china' : name
  148 + registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
139 show.value = false 149 show.value = false
140 resolve(true) 150 resolve(true)
141 }) 151 })
142 }) 152 })
143 } catch (error) { 153 } catch (error) {
  154 + show.value = false
144 console.error('注册地图出错', error) 155 console.error('注册地图出错', error)
  156 + //注册出错则注册空的,不然在选择正确的adcode,则视图无法更新
  157 + registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
145 } 158 }
146 } 159 }
147 160
@@ -182,6 +195,15 @@ onMounted(() => { @@ -182,6 +195,15 @@ onMounted(() => {
182 initMap() 195 initMap()
183 }) 196 })
184 197
  198 +//处理数据标点
  199 +const handleDataPoint = (newData: any) => {
  200 + if (newData === 'china') {
  201 + props.chartConfig.option.dataset = dataMaps
  202 + } else {
  203 + props.chartConfig.option.dataset = dataMaps.filter((item: any) => item.adcode === newData)
  204 + }
  205 +}
  206 +
185 //监听地图展示区域发生变化 207 //监听地图展示区域发生变化
186 watch( 208 watch(
187 () => `${props.chartConfig.option.mapRegion.adcode}`, 209 () => `${props.chartConfig.option.mapRegion.adcode}`,
@@ -196,6 +218,7 @@ watch( @@ -196,6 +218,7 @@ watch(
196 } 218 }
197 }) 219 })
198 handleSetOption(chartInstance.value, props.chartConfig.option) 220 handleSetOption(chartInstance.value, props.chartConfig.option)
  221 + handleDataPoint(newData)
199 } catch (error) { 222 } catch (error) {
200 console.log('展示区域发生变化出错', error) 223 console.log('展示区域发生变化出错', error)
201 } 224 }