Commit 566fa236aa6b28bcdeb9f007556622e3e388e42c
1 parent
8afd899c
fix(src/packages): 图表下的地图 3d地图修改成和普通地图一样的
Showing
2 changed files
with
34 additions
and
7 deletions
... | ... | @@ -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 | } | ... | ... |