效果
<template>
<div>
<h3>地图下钻</h3>
<button class="button" @click="back()" v-show="backVisible">返回上级</button>
<div ref="mapChart" style="width:100%;height:500px;"></div>
</div>
</template>
<script>
import cityMap from "../lib/cityMap.js";
import echarts from "echarts";
import axios from "axios";
//Echarts地图全局变量,主要是在返回上级地图的方法中会用到
export default {
name: "industryAnalysis",
data(){
return{
mapChart:Object,
backVisible:false//返回按钮是否可见
}
},
methods: {
/**
* 返回烟台市地图
*/
back() {
axios
.get("./static/json/map/yanTaiShi.json", {})
.then(response => {
const mapJson = response.data;
this.registerAndsetOption(
this.mapChart,
"yanTaiShi",
"烟台市",
mapJson,
true
);
});
},
/**
* 初始化烟台地图,市区绑定点击事件
*/
initMapChart() {
axios.get("./static/json/map/yanTaiShi.json", {}).then(response => {
const mapJson = response.data;
this.mapChart = echarts.init(this.$refs["mapChart"]);
this.backVisible = false;
this.registerAndsetOption(this.mapChart, "yanTaiShi", "烟台市", mapJson, true);
});
},
/**
* @param {*} myChart
* @param {*} id 市县Id
* @param {*} name 市县名称
* @param {*} mapJson 地图Json数据
* @param {*} flag 是否增加点击事件
*/
registerAndsetOption(myChart, id, name, mapJson, flag) {
echarts.registerMap(name, mapJson);
let option = {
series: [
{
type: "map",
map: name,
label: {
show: true,
textStyle:{
color:'#fff'
}
},
itemStyle: {
normal: {
areaColor: "#1e5186",
borderColor: "#19283a",
borderWidth: 1
}
},
data: this.initMapData(mapJson)
}
]
}
myChart.setOption(option);
if(!flag){
myChart.off('click');
this.backVisible = true;
}else{
// 增加点击事件
this.backVisible = false;
let _this = this;
myChart.on("click", function(param) {
console.log(param.name);
var cityId = cityMap[param.name];
if (cityId) {
//代表有下级地图
axios
.get("./static/json/map/" + cityId + ".json", {})
.then(response => {
const mapJson = response.data;
_this.registerAndsetOption(
myChart,
cityId,
param.name,
mapJson,
false
);
});
} else {
//没有下级地图,回到烟台地图
this.registerAndsetOption(myChart, "yanTaiShi", "烟台市", mapJson, true);
}
});
}
},
initMapData(mapJson) {
var mapData = [];
for (var i = 0; i < mapJson.features.length; i++) {
mapData.push({
name: mapJson.features[i].properties.name
//id:mapJson.features[i].id
});
}
return mapData;
}
},
mounted: function() {
this.initMapChart();
}
};
</script>
cityMap.js
城市与地图json名称对应对象
烟台市(城市名称)yanTaiShi (地图json文件名称)
const cityMap = {
"烟台市": "yanTaiShi",
"长岛县": "changDaoXian",
"莱州市": "laiZhouShi",
"芝罘区": "zhiFuQv",
"海阳市": "haiYangShi",
"龙口市": "longKouShi",
"莱阳市": "laiYangShi",
"蓬莱市": "pengLaiShi",
"招远市": "zhaoYuanShi",
"福山区": "fuShanQv",
"莱山区": "laiShanQv",
"栖霞市": "qiXiaShi",
"牟平区": "muPingQv",
}
export default cityMap
地图选择器
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
实时geoJson
https://hxkj.vip/demo/echartsMap/