利用高德api获取行政区边界geoJson，基于echart实现全国各省地磁分布统计图_高德地图全国geojson数据

利用高德api获取行政区边界geoJson，基于echart实现全国各省地磁分布统计图

前提条件：
每次涉及到全国地图的echart统计图表时，都要费时间去找、去下载一份离线的中国地图json数据，有点麻烦呢，此方法可以利用高德地图api，在线获取一份中国地图数据，很方便吖！

效果如图：

代码如下：
（1）使用npm方式安装Loader
npm i @amap/amap-jsapi-loader --save

（2）新建页面，并在页面中引入amap-jsapi-loader，初始化地图数据，继而进一步进行其他逻辑的处理

<template>
    <div>
        <div id="ZGDT3" class="w-100 h-100"></div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import displayYNDCService from "@/services/displayYNDC";
export default {
    components: {},
    data() {
        return {
            mapKeyValue:"aa31c5bXXXXXX", //此处为自己申请的高德地图密钥key
            geoJsonZGDT3: {
                features: []
            },
            listZGDT3:[],
        }
    },
    mounted() {
        this.getGeoJson();
    },
    methods: {
        //利用高德api获取行政区边界geoJson,areaCode为区域编码
        getGeoJson() {
            let that = this;
            let areaCode = 100000; //中国

            AMapLoader.reset();
            
            AMapLoader.load({
                    key:that.mapKeyValue,    // 申请好的Web端开发者Key，首次调用 load 时必填
                    version:"2.0",           // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins:[],              // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    AMapUI: {                // 是否加载 AMapUI，缺省不加载
                        version: '1.1',      // AMapUI 版本
                        plugins:['geo/DistrictExplorer'],   // 需要加载的 AMapUI ui插件
                    },
                }).then((AMap)=>{

                    let districtExplorer = new AMapUI.DistrictExplorer();

                    districtExplorer.loadAreaNode(areaCode, function (error, areaNode) {
                        if (error) {
                            console.error(error);
                            return;
                        }
                        
                        //获取当前所选中区域下的所有子级区域
                        let childAreaJson = areaNode.getSubFeatures();

                        that.geoJsonZGDT3.features = childAreaJson;
                    
                        that.getData(areaCode);
                    });

                }).catch(e=>{
                    console.log(e);
                })
        },

        //获取地磁分布统计数据
        async getData() {
            
            this.listZGDT3 = [];

            let dataObj = await displayYNDCService.getData();

            let areaList = this.geoJsonZGDT3.features; //区域列表
            let areaDataList = dataObj.DeviceByAddress; //区域数据列表
            
            let mapDataList = []; //地图数据列表

            //初始化地图数据列表
            areaList.forEach(item => {
                let mapDataObj0 = {
                    name: item.properties.name,
                    value: [item.properties.center[0], item.properties.center[1], -1],
                    areaCode: item.properties.adcode,
                    level:item.properties.level
                }
                mapDataList.push(mapDataObj0);
            });

            //对比区域列表与区域数据列表，找到code相等的数据，将地图数据列表中对应位置上的数据替换掉
            areaList.forEach((item0,index0) => {
                areaDataList.forEach(item1 => {
                    if(item0.properties.adcode == item1.addressCode){
                        let mapDataObj1 = {
                            name: item0.properties.name,
                            value: [item0.properties.center[0], item0.properties.center[1], item1.count],
                            areaCode: item0.properties.adcode,
                            level:item0.properties.level
                        }
                        mapDataList[index0] = mapDataObj1;
                    }
                })
            });

            //将地图数据列表进行排序
            mapDataList = mapDataList.sort(function (a, b) {
                return b.value[2] - a.value[2];
            });
            
            this.listZGDT3 = mapDataList;
        },

        //初始化中国地图
        initChartZGDT3(){
            // 解决echarts多次渲染问题.如果已渲染则销毁
            if (this.chartZGDT3) this.chartZGDT3.dispose();

            // 基于准备好的dom，初始化echarts实例
            let chartZGDT3 = (this.chartZGDT3 = this.$echarts.init(document.getElementById("ZGDT3")));

            //注册地图
            this.$echarts.registerMap('china', this.geoJsonZGDT3);

            let mapDataList = this.listZGDT3;
            
            let max = 0;
            let mapDataList_noZero = [];

            if(mapDataList.length>0){
                //获取地图数据列表中的最大值
                max = mapDataList[0].value[2];
                
                //从地图数据列表中筛选出数量不为0的数据组成新的列表
                mapDataList_noZero = mapDataList.filter(item => item.value[2] !== -1);
            }
            
            let optionZGDT3 = this.optionZGDT3 = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderWidth:1,
                    borderColor: '#46F0ED',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: 'z-index:100',
                    formatter: function(params) {
                        //根据业务自己拓展要显示的内容
                        let res = "";
                        let name = params.name;
                        let value = 0;
                        let type = params.seriesType;
                        if(type=="map"){
                            value = params.data.value[2]==-1?0:params.data.value[2];
                            res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                        }
                        else{
                            value = params.value[2]==-1?0:params.value[2];
                            res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                        }
                        return res;
                    },
                    textStyle: {
                        fontSize: 12
                    }
                },
                visualMap: { //图例值控制
                    left:'4%',
                    min: 0,
                    max: max,
                    itemWidth:12,
                    itemHeight:145,
                    seriesIndex: [1],
                    calculable: true,
                    show: true,
                    color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#36E771'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: { //不可去除，因为他是与带有涟漪特效动画的散点（气泡）图绑定在一起的
                    map: 'china',
                    aspectScale: 0.83,
                    zoom: 1.7,
                    roam: false, //是否允许缩放
                    top:'28%',
                    // left:'30%',
                    label: {
                        normal: {
                            show: false,
                            textStyle:{
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#1AE0FB', //省市边界线
                            borderWidth: 0.8,
                            areaColor: {
                                type: 'linear-gradient',
                                x: 1000,
                                y: 600,
                                x2: 1000,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: '#274d68' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#09132c' // 50% 处的颜色
                                }],
                                global: true // 缺省为 false
                            },
                        }
                    },
                    emphasis:{
                        label:{
                            show:false
                        },
                        itemStyle:{
                            areaColor:'rgba(10, 10, 10, 0.8)'
                        }
                    }
                },
                series:[
                    {
                        type: 'map',
                        mapType: 'china',
                        aspectScale: 0.83,
                        zoom: 1.7, //当前视角的缩放比例
                        roam: false, //是否开启平游或缩放
                        top:'28%',
                        // left:'30%',
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 2
                        },
                        label: {
                            normal: {
                                show: false,
                                textStyle:{
                                    color: '#fff'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#1AE0FB', //省市边界线
                                borderWidth: 0.8,
                                areaColor:"rgba(0,10,56,0.8)"
                            }
                        },
                        emphasis:{
                            label:{
                                show:false
                            },
                            itemStyle:{
                                areaColor:"rgba(10, 10, 10, 0.8)"
                            }
                        },
                        data: mapDataList
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        rippleEffect: { //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: 'stroke', //波纹绘制方式 stroke, fill
                            scale: 4 //波纹圆环最大限制，值越大波纹越大
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right', //显示位置
                                offset: [8, 0], //偏移设置
                                formatter: function(params){//圆环显示文字
                                    return params.data.name + " - " + params.data.value[2];
                                },
                                fontSize: 13,
                                
                                color:'#ffffff',
                                lineHeight:20,
                                backgroundColor:'rgba(0, 0, 0, 0.8)',
                                borderWidth:1,
                                borderColor: '#1AE0FB',
                                borderRadius:4,
                                padding:[7,18,4,7],
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        symbol: 'circle',
                        symbolSize: function(val) {
                            //return 5+ val[2] * 5; //圆环大小
                            return 7;
                        },
                        itemStyle: {
                            normal: {
                                //show: false,
                                // color: '#f00'
                                show: true,
                                color: '#F39D13',
                                shadowBlur: 10,
                                shadowColor: '#F39D13'
                            },
                            emphasis: {
                                show: false,
                                color: 'rgba(37, 43, 61, .5)' //悬浮背景
                            }
                        },
                        data: mapDataList_noZero
                    },
                    //目标点
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        zlevel: 4,
                        rippleEffect: {
                            period: 4,
                            brushType: 'stroke',
                            scale: 4
                        },
                        itemStyle:{
                            color:"#FA4E4B"
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'right',
                                //offset:[5, 0],
                                color: '#0f0',
                                formatter: '{b}',
                                textStyle: {
                                    color: "#0f0"
                                }
                            },
                            emphasis: {
                                show: false,
                                color: "#f60"
                            }
                        },
                        symbol: 'pin',
                        symbolSize: 50,
                        data: [mapDataList[0]]
                    }
                ]
            }

            // 绘制图表
            chartZGDT3.setOption(optionZGDT3, true);
            
        }
    }
}
</script>

<style lang='less'>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357

如有漏洞，欢迎互动指教！！！！！！！！！！！！！