Commit 566fa236aa6b28bcdeb9f007556622e3e388e42c

Authored by fengwotao
1 parent 8afd899c

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

... ... @@ -2,6 +2,7 @@
2 2 {
3 3 "name": "四川省",
4 4 "value": [104.10068024609373, 30.580525329665175, 20000],
  5 + "adcode": 510000,
5 6 "height": 5,
6 7 "itemStyle": {
7 8 "color": "pink",
... ... @@ -13,6 +14,7 @@
13 14 {
14 15 "name": "湖南省",
15 16 "value": [111.73068512890623, 27.86754509366569, 20000],
  17 + "adcode": 430000,
16 18 "height": 4,
17 19 "itemStyle": {
18 20 "color": "blue",
... ... @@ -24,6 +26,7 @@
24 26 {
25 27 "name": "吉林省",
26 28 "value": [126.45236481640623, 43.7943407914815, 20000],
  29 + "adcode": 220000,
27 30 "height": 5,
28 31 "itemStyle": {
29 32 "color": "yellow",
... ... @@ -35,6 +38,7 @@
35 38 {
36 39 "name": "山东省",
37 40 "value": [118.67404450390623, 36.16387465872037, 20000],
  41 + "adcode": 370000,
38 42 "height": 6,
39 43 "itemStyle": {
40 44 "color": "orange",
... ...
... ... @@ -14,6 +14,7 @@ import { registerMap } from 'echarts/core'
14 14 import 'echarts-gl'
15 15 import config, { areaEnum } from './config'
16 16 import { getGeoJsonMap } from '@/api/external/common'
  17 +import dataMaps from './data.json'
17 18
18 19 const props = defineProps({
19 20 chartConfig: {
... ... @@ -73,16 +74,22 @@ props.chartConfig.option = {
73 74 //地图点击返回
74 75 const watchAdcode = async () => {
75 76 if (props.chartConfig.option.drillingIn) {
  77 + let saveAdcode: any = saveLevelStr.parentInfo.adcode
76 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 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 89 item.data = props.chartConfig.option.dataset
84 90 })
85 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 112 saveLevelStr.level = level
106 113 saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码
107 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 131 }
124 132 })
125 133
126   -//动态获取geojson文件进行注册地图
  134 +//动态注册地图
127 135 const getGeojson = (regionId: any) => {
128 136 try {
129 137 return new Promise<boolean>(resolve => {
... ... @@ -134,14 +142,19 @@ const getGeojson = (regionId: any) => {
134 142 ).then(res => {
135 143 const { geoJson, name, code, level } = res.data
136 144 const geoJsonFile = JSON.parse(geoJson)
  145 + if (!geoJsonFile) return
137 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 149 show.value = false
140 150 resolve(true)
141 151 })
142 152 })
143 153 } catch (error) {
  154 + show.value = false
144 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 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 208 watch(
187 209 () => `${props.chartConfig.option.mapRegion.adcode}`,
... ... @@ -196,6 +218,7 @@ watch(
196 218 }
197 219 })
198 220 handleSetOption(chartInstance.value, props.chartConfig.option)
  221 + handleDataPoint(newData)
199 222 } catch (error) {
200 223 console.log('展示区域发生变化出错', error)
201 224 }
... ...