2021年7月10日

echarts调用任何省份、城市地图方法,有效获得geo代码(亲测有用)


切图网在接到这样第一个地图页面的切图的时候,遇到的问题,需要显示宁波地图,首先想到的是用echarts图标,我们也有内部非常丰富的插件特效库,于是很快的锁定了echarts以及相关的城市地区调用地图的代码,但是目前已有的是中国地图、省份地图,没有城市地图。

不同的地图调用方法都是一样的,主要在于json数据不同,于是如何有效获得geo地图json数据成为了难点。

于是找到了这个网站

http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

亲测是有用的,只需要选择对应的城市,即可在右侧获得json数据代码,然后把数据代入到代码中去就可以了。

代码片段如下


//取得json的样式,读取json文件
$.getJSON("js/ningbo.json", "", function(data) {
//生成地图
createMap(data);
})
//生成地图
function createMap(data){
echarts.registerMap('demo',data);
var chart = echarts.init(document.getElementById('map2'));
chart.setOption({
//backgroundColor:'#0a2f4a',
// dataRange: {
// min: 0,//颜色区间的最小值
// max: 30,//颜色区间的最大值,和data中的最大值一致
// x: 'left',
// y: 'bottom',
// text:['高','低'], // 文本,默认为数值文本
// calculable : true,
// inRange: {
// //颜色区间
// color: ['#52b2fe','yellow', 'orangered']
// }
// },
visualMap : {
show:false,
min : 0,
max : 1000,
left : 'left',
top : 'bottom',
text : [ '高', '低' ],
seriesIndex : [ 1 ],
inRange : {
color : [ '#1843ce', '#52b2fe' ]
},
calculable : true
},
tooltip : {
enterable:true,

trigger: 'item',

axisPointer : { // 坐标轴指示器,坐标轴触发有效

type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'

},

formatter:function(params)//数据格式

{

//console.log(params.data.xxx);
return params.data.name+'<br/>'+
'公司总数:'+params.data.gszs+'<br/>'+
'在线设备:'+params.data.zxsb+'<br/>'+
'离线设备:'+params.data.lxsb+'<br/>'+
'设备总数:'+params.data.sbzs+'';

}

},
series: [{
name:'数据',
type: 'map',
map: 'demo',
itemStyle:{
normal:{
label:{show:true,
color:"#fff"
},
borderColor : '#051b4b',
areaColor :'#00d6fb'
},
emphasis:{
label:{show:true,
color:"#fff"},
areaColor : '#00c6e8',
// shadowOffsetX : 0,
// shadowOffsetY : 0,
// shadowBlur : 20,
// borderWidth : 0,
//shadowColor : '#72a5da'
}
},
data:[
{name: '慈溪市', value: 0, gszs:20, zxsb:20, lxsb:20, sbzs:20

// itemStyle:{
// normal:{
// label:{show:true,
// color:"#fff"
// },
// borderColor : '#1d68b1',
// areaColor :'red'
// },
// }
},
{name: '余姚市', value: 0, gszs:20, zxsb:40, lxsb:40, sbzs:60},
{name: '镇海区', value: 0, gszs:20, zxsb:20, lxsb:20, sbzs:20}
]
}]
});
}

 

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》