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