利用高德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>
如有漏洞，欢迎互动指教！！！！！！！！！！！！！
扫一扫
5904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
