|
...
|
...
|
@@ -4,12 +4,12 @@ |
|
4
|
4
|
</template>
|
|
5
|
5
|
|
|
6
|
6
|
<script setup lang="ts">
|
|
7
|
|
-import { onMounted, ref, nextTick, PropType, toRefs, watch } from 'vue'
|
|
|
7
|
+import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue'
|
|
8
|
8
|
import * as echarts from 'echarts'
|
|
9
|
9
|
import { registerMap } from 'echarts/core'
|
|
10
|
10
|
import 'echarts-gl'
|
|
11
|
|
-import config from './config'
|
|
12
|
|
-import cityMap from '../OverrideMapBase/mapGeojson/china-main-city-map.json'
|
|
|
11
|
+import config, { areaEnum } from './config'
|
|
|
12
|
+import { getGeoJsonMap } from '@/api/external/common'
|
|
13
|
13
|
|
|
14
|
14
|
type historyDataType = { name: string; code: string }
|
|
15
|
15
|
|
|
...
|
...
|
@@ -71,40 +71,76 @@ props.chartConfig.option = { |
|
71
|
71
|
}
|
|
72
|
72
|
|
|
73
|
73
|
//地图点击返回
|
|
74
|
|
-const watchAdcode = () => {
|
|
|
74
|
+const watchAdcode = async () => {
|
|
75
|
75
|
if (props.chartConfig.option.drillingIn) {
|
|
76
|
|
- const code = historyData.value.at(-2)?.code
|
|
77
|
|
- props.chartConfig.option.mapRegion.adcode = code ? code : 'china'
|
|
78
|
|
- historyData.value.pop()
|
|
|
76
|
+ 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
|
|
|
80
|
+ props.chartConfig.option.series.forEach((item: any) => {
|
|
|
81
|
+ if (item.type === 'map3D')
|
|
|
82
|
+ item.map = saveLevelStr.parentInfo.adcode === 100000 ? 'china' : saveLevelStr.parentInfo.adcode
|
|
|
83
|
+ item.data = props.chartConfig.option.dataset
|
|
|
84
|
+ })
|
|
|
85
|
+ handleSetOption(chartInstance.value, props.chartConfig.option)
|
|
79
|
86
|
}
|
|
80
|
87
|
}
|
|
81
|
88
|
|
|
|
89
|
+const regionMapParentArea = {
|
|
|
90
|
+ [areaEnum.PROVINCE]: areaEnum.COUNTRY, //省份的上一级 中国
|
|
|
91
|
+ [areaEnum.CITY]: areaEnum.PROVINCE, //城市的上一级 省份
|
|
|
92
|
+ [areaEnum.COUNTY]: areaEnum.CITY, //县或者区的上一级 城市
|
|
|
93
|
+ [areaEnum.TOWN]: areaEnum.COUNTY //镇的上一级 县或者区
|
|
|
94
|
+}
|
|
|
95
|
+
|
|
82
|
96
|
//地图点击
|
|
83
|
97
|
const handleMap3DClick = async (params: any) => {
|
|
84
|
98
|
if (props.chartConfig.option.drillingIn) {
|
|
85
|
99
|
const { name } = params
|
|
86
|
|
- saveSelectValue.value = name
|
|
87
|
|
- const findAdcode = (cityMap as any)[name]
|
|
88
|
|
- if (!findAdcode) return
|
|
89
|
|
- props.chartConfig.option.mapRegion.adcode = findAdcode
|
|
90
|
|
- historyData.value.push({
|
|
91
|
|
- name,
|
|
92
|
|
- code: findAdcode
|
|
|
100
|
+ saveGeojson.value?.features.forEach((item: any) => {
|
|
|
101
|
+ if (item.properties.name === name) {
|
|
|
102
|
+ const level = item.properties.level.toUpperCase()
|
|
|
103
|
+ const adcode = item.properties.adcode
|
|
|
104
|
+ props.chartConfig.option.mapRegion.adcode = adcode
|
|
|
105
|
+ saveLevelStr.level = level
|
|
|
106
|
+ saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码
|
|
|
107
|
+ saveLevelStr.parentInfo.level = (regionMapParentArea as any)[level] //保存上一级的行政级别
|
|
|
108
|
+ }
|
|
93
|
109
|
})
|
|
94
|
110
|
}
|
|
95
|
111
|
}
|
|
96
|
112
|
|
|
|
113
|
+const saveGeojson: any = ref({}) // 保存geojson
|
|
|
114
|
+
|
|
|
115
|
+const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
|
|
|
116
|
+
|
|
|
117
|
+const saveLevelStr = reactive({
|
|
|
118
|
+ // 保存行政级别和上一级的adcode和level
|
|
|
119
|
+ level: '',
|
|
|
120
|
+ parentInfo: {
|
|
|
121
|
+ adcode: 0,
|
|
|
122
|
+ level: ''
|
|
|
123
|
+ }
|
|
|
124
|
+})
|
|
|
125
|
+
|
|
97
|
126
|
//动态获取geojson文件进行注册地图
|
|
98
|
|
-const getGeojson = (regionId: string) => {
|
|
|
127
|
+const getGeojson = (regionId: any) => {
|
|
99
|
128
|
try {
|
|
100
|
129
|
return new Promise<boolean>(resolve => {
|
|
101
|
|
- import(`../OverrideMapBase/mapGeojson/${regionId}.json`).then(data => {
|
|
102
|
|
- registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
|
|
|
130
|
+ const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
|
|
|
131
|
+ getGeoJsonMap(
|
|
|
132
|
+ regionId === 'china' ? chinaDefaultRegionId.value : regionId,
|
|
|
133
|
+ !saveLevelStr.level ? levelStr : saveLevelStr.level
|
|
|
134
|
+ ).then(res => {
|
|
|
135
|
+ const { geoJson, name, code, level } = res.data
|
|
|
136
|
+ const geoJsonFile = JSON.parse(geoJson)
|
|
|
137
|
+ saveGeojson.value = geoJsonFile
|
|
|
138
|
+ registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
|
|
103
|
139
|
resolve(true)
|
|
104
|
140
|
})
|
|
105
|
141
|
})
|
|
106
|
|
- } catch (e) {
|
|
107
|
|
- console.log(e)
|
|
|
142
|
+ } catch (error) {
|
|
|
143
|
+ console.error('注册地图出错', error)
|
|
108
|
144
|
}
|
|
109
|
145
|
}
|
|
110
|
146
|
|
|
...
|
...
|
@@ -126,8 +162,7 @@ const initMap = async () => { |
|
126
|
162
|
handleSetOption(chartInstance.value, props.chartConfig.option)
|
|
127
|
163
|
})
|
|
128
|
164
|
chartInstance.value.on('click', (e: any) => {
|
|
129
|
|
- console.log(`地图点击`, e)
|
|
130
|
|
- // handleMap3DClick(e)
|
|
|
165
|
+ handleMap3DClick(e)
|
|
131
|
166
|
})
|
|
132
|
167
|
}
|
|
133
|
168
|
|
|
...
|
...
|
@@ -137,8 +172,8 @@ const handleSetOption = (instance: any, option: any) => { |
|
137
|
172
|
try {
|
|
138
|
173
|
instance.clear()
|
|
139
|
174
|
instance.setOption(option)
|
|
140
|
|
- // eslint-disable-next-line no-empty
|
|
141
|
|
- } finally {
|
|
|
175
|
+ } catch (error) {
|
|
|
176
|
+ console.error('触发渲染出错', error)
|
|
142
|
177
|
}
|
|
143
|
178
|
}
|
|
144
|
179
|
|
|
...
|
...
|
@@ -161,7 +196,7 @@ watch( |
|
161
|
196
|
})
|
|
162
|
197
|
handleSetOption(chartInstance.value, props.chartConfig.option)
|
|
163
|
198
|
} catch (error) {
|
|
164
|
|
- console.log(error)
|
|
|
199
|
+ console.log('展示区域发生变化出错', error)
|
|
165
|
200
|
}
|
|
166
|
201
|
},
|
|
167
|
202
|
{
|
...
|
...
|
|
