echars实现自定义山西省地图和地图下钻返回
相信很多人在做项目的时候都需要实现地图的功能，本篇文章主要实现了echar自定义地图、下钻以及返回上一层的功能。
生成地图的代码如下，这里应用的json文件是网络链接形式的，所以需要的朋友可以直接复制代码，然后导入jquery.js文件以及echars.js文件，即可显示
全部代码如下//省级地图
function shengji(){
$.get('https://geo.datav.aliyun.com/areas_v2/bound/140000_full.json', function (chinaJson) {
echarts.registerMap('chongqing', chinaJson); // 给数据命名，本人理解
var chart = echarts.init(document.getElementById('main8'));
chart.setOption({
title: {
text: '中国 山西省 站点详情',
left: 'center',
textStyle: {
color: 'white',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: 32,
lineHeight: 80,
textBorderColor: 'green',
textBorderWidth: 1,
textShadowColor: 'green',
textShadowBlur: 10,
textShadowOffsetX: 2,
textShadowOffsetY: 2
}
},
series: [{
name: 'chongqing',
type: 'map',
mapType: 'chongqing',
roam:true,
selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选
label: {
normal: {
textStyle: { fontSize: 12,
fontWeight: 'bold',
color: '#0090FF' }
}
},
itemStyle: {
normal: {
borderWidth:3,
areaColor:'#0C2452',
label: {
show: true,//默认是否显示省份名称
},
areaStyle: {
color: '#0655B7',//默认的地图板块颜色
},
borderWidth:3,
borderColor:'#0655B7',
},
emphasis: {
borderColor: '#2378f7', // 图形的描边颜色 #2378f7
borderWidth: '1',
areaColor: '#233F53', // 阴影色 #233F53
label: {
show: false,
textStyle: {
color: '#fff',
fontSize: 14,
}
},
},
},
//此为加载的数据
}]
});
//点击事件
chart.on('click', function(properties) {
shiji(properties.name)
})
});
}
//市级地图
function shiji(city){
var src=null;
/*此出的路径为你点击的市级json数据的路径，可以跟据闯过来的城市参数设置相应的json文件，获取json文件的地址为http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5
$.get('https://geo.datav.aliyun.com/areas/bound/geojson?code=141100_full', function (chinaJson) {
echarts.registerMap('city', chinaJson); // 给数据命名，本人理解
var chart1 = echarts.init(document.getElementById('main8'));
chart1.setOption({
title: {
text: '中国 山西省 '+city,
left: 'center',
textStyle: {
color: 'white',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: 32,
lineHeight: 80,
textBorderColor: 'green',
textBorderWidth: 1,
textShadowColor: 'green',
textShadowBlur: 10,
textShadowOffsetX: 2,
textShadowOffsetY: 2
}
},
series: [{
name: 'city',
type: 'map',
mapType: 'city',
roam:true,
selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选
label: {
normal: {
textStyle: { fontSize: 12,
fontWeight: 'bold',
color: '#0090FF' }
}
},
itemStyle: {
normal: {
borderWidth:3,
areaColor:'#0C2452',
label: {
show: true,//默认是否显示省份名称
},
areaStyle: {
color: '#0655B7',//默认的地图板块颜色
},
borderWidth:3,
borderColor:'#0655B7',
},
emphasis: {
borderColor: '#2378f7', // 图形的描边颜色 #2378f7
borderWidth: '1',
areaColor: '#233F53', // 阴影色 #233F53
label: {
show: false,
textStyle: {
color: '#fff',
fontSize: 14,
}
},
},
},
}]
});
//屏蔽div内的右键点击事件
let canvas = document.getElementById("main8");
canvas.oncontextmenu = function(){return false;};
chart1.on('contextmenu',function(properties){
//鼠标右键事件，显示右键返回上一级
$('#context-menu').css({
left: properties.event.offsetX,
top: properties.event.offsetY
})
shengji();
})
});
}
其实这个方法是比较笨的，但是我也是第一次做这个，算是给自己做个笔记吧，需要的可以直接复制进行测试，谢谢大家的访问