本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写)
地图资源:
整体思路:1.先注册全国地图,通过全国地图的json数据, 把全国各个省份的名字以及行政区编码抽出来组成新数组.2.然后单击地图时通过点击到的省份名找到数组中相应的对象,获取到这条对象的行政区编码 3.根据行政区编码去动态加载省份json数据,重新注册新的地图.市区地图同理
1.给地图图表设置一个容器,需要设置容器大小
<div class="map" id="map"></div>
2.安装echarts(这里引入了echarts5版本)
cnpm install echarts -S
3.在需要使用地图的组件内引入
import * as echarts from "echarts";
4.本地引入地图json文件,保存在public文件夹下的static(自行新建)
5.在methods中定义初始化地图函数
注意:如果你在项目中引入json数据,报错找不到json数据的话,在jsconfig.json中添加以下代码,重启即可解决
"resolveJsonModule": true,
init() {
var map = document.getElementById("map");
//先加载全国地图,使用require引入json数据
const china = require("../../public/static/100000.json");
//在data中定义city,给city初始值为China
this.city = china;
//注册地图
echarts.registerMap("城市", this.city);
const option = {
geo: {
type: "map",
map: "城市",
zoom: 1.2,
label: {
normal: {
show: !0,
fontSize: "12",
fontWeight: "bolder",
color: "#000000",
},
},
}
};
// 使用刚指定的配置项和数据显示图表。
var myChart = echarts.init(map);
myChart.setOption(option);
// 窗口自适应
(window.onresize = function () {
myChart.resize();
}),
},
6.在上面的init()函数中插入以下代码,定义单击事件实现地图下钻,双击返回上一级地图
// mapStack存储历史注册地图数据,第一个元素设置为全国地图数据
var mapStack = [];
mapStack.push(this.city);
var timeFn = null;
// 监听图表点击事件
myChart.on("click", (params) => {
clearTimeout(timeFn);
timeFn = setTimeout(() => {
console.log("地图被点击了", params.name);
// 返回到全国地图时,需要把this.city重置为全国地图数据
if(mapStack.length==1){
this.city=china
}
// 因为this.city一直在变化,所以用mapStack存储一下历史记录,用于双击返回
else if(mapStack.length==2){
this.city=mapStack[mapStack.length - 1]
}
var city1 = this.city;
// 调用函数获取当前点击城市json数据,加载城市地图
this.city = this.changeCity(city1, params.name);
// 让历史数据一直保持在3个之内,存储显示过的地图数据
if (mapStack.length < 3) {
mapStack.push(this.city);
}
//此时的this.city为当前点击的城市的json数据,重新注册地图
echarts.registerMap("城市", this.city);
const cityOption = {
geo: {
type: "map",
map: "城市",
},
};
myChart.setOption(cityOption);
}, 250);
});
//双击事件
myChart.on("dblclick", () => {
clearTimeout(timeFn);
// 把当前展示的城市数据删掉
mapStack.splice(mapStack.length - 1, 1);
// 把数组中的最后一个元素注册到地图
echarts.registerMap("城市", mapStack[mapStack.length - 1]);
const cityOption = {
geo: {
type: "map",
map: "城市",
},
};
myChart.setOption(cityOption);
});
7.第6步中调用的方法写在methods中
// 抽取全国省份名和行政区代码放在数组中
cityData(city) {
let arr = [];
for (var i = 0; i < city.features.length; i++) {
if (!city.features[i].properties.adcode) {
arr.push({
name: city.features[i].properties.name,
decode: city.features[i].id,
});
}
arr.push({
name: city.features[i].properties.name,
decode: city.features[i].properties.adcode,
});
}
return arr;
},
// 改变城市数据,获取点击的地区编码
changeCity(city, name) {
const arr1 = this.cityData(city);
// 过滤点击的城市名的对象,取出对应行政区编码
let xzqbmList = arr1.filter((ele) => {
if (ele.name === name) {
return ele;
}
});
const xzqbm = xzqbmList[0].decode;
console.log("点击的是", xzqbm);
if (!xzqbm) {
return city;
}
//动态获取点击的城市数据
city = require("../../public/static/" + xzqbm + ".json");
console.log(city);
return city;
},
8.在mounted中调用init()函数
mounted() {
setTimeout(() => {
this.init();
}, 1000);
},
这样就可以完成一个简单的从全国地图下钻到省份地图,再到市区地图的效果了.