要实现广东省地图下钻，需要一份广东省的json文件，项目已上传至github：https://github.com/Maybegit/-，自己自行下载拿数据，接下来我讲讲主要实现步骤：
1.首先要定义一个存放地图数据的变量
let mapData = null;
2.中山市和东莞市是没有区的所以要处理一下
let noDrillCity = ['中山市','东莞市'];
3.搞一个变量判断下是否已经下钻，这个东西很有用，单独选中的逻辑应该要用到它
let isDrilled = false;
4.创建图表实例
let chart = echarts.init(document.getElementById('box'));
5.获取地图数据并注册广东地图
$.getJSON('json/json_gd/GuangDong.json', function(data){
mapData = data;
echarts.registerMap('广东省', mapData['广东省']);
// 绘制广东地图 地图init在drawMap方法里面以及setOption
drawMap('广东省', mapData['广东省'])});
6.drawMap事件封装
function drawMap(map, data) {
//防止重复注册
if (!echarts.getMap(map)) echarts.registerMap(map, data);
let mapDataArr = [];
// console.log(data)
data.features.forEach(function (item) {
//如果名字name跟数据匹配上
if (item.properties.name === map) {
mapDataArr.push({
name: item.properties.name,
administrativeCode: item.properties.adcode,//行政代码
cp: item.properties.cp,
level: item.properties.level,//是市还是区 级别
label: {
normal: {show: false},
emphasis: {show: false}
},
itemStyle: {
normal: {
borderWidth: 0,
shadowColor: '#45a7f9',
shadowBlur: 30
},
emphasis: {
opacity: 0
}
}
});
} else {//做额外的处理
mapDataArr.push({
name: item.properties.name,
administrativeCode: item.properties.adcode,
cp: item.properties.cp,
level: item.properties.level
});
}
});
7.初始化的option设置
let option = {
backgroundColor: '#666',
geo: {
map: map,
zlevel: 1,
z: 1,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0356b2',
areaColor: '#242539'
},
emphasis: {
borderWidth: 0,
// areaColor: '#144393',
areaColor: '#ffff00',
shadowColor: '#8dc6ea',
shadowBlur: 30
}
},
label: {
normal: {
color: '#fff',
show: true,
// fontSize: 20,
// formatter: value => {
// return value.name.substring(0, 2)
// }
},
emphasis: {
color: 'red'
}
},
regions: mapDataArr
}
};
chart.setOption(option);
接下来是比较重要的下钻功能了，大家一起看看：
// 地图点击事件
chart.on('click', function(param) {
// console.log('clickMap...', param);
isDrilled = mapData[param.name];
if (isDrilled) {
//避免重复画地图
if (noDrillCity.includes(param.name)) return;
drawMap(param.name, mapData[param.name]);
} else {
// drawMap('广东省', mapData['广东省']);
selectedArea(param)
}
});
9.实现单独选择区域（主要是name=》selected设置为true）
//单独选中某个区域单独显示
function selectedArea(params) {
var name = params.name;
console.log(name)
chart.setOption({
geo:{
type:'map',
regions:[{
name:name,
selected:true
}]
}
})
}
好了，以上是js部分的全部核心代码，html、css部分请参考github，接下来上一波效果图：
image.png
image.png
希望能够给大家带来帮助，感谢大家赏脸观看！谢谢。
