<template>
<div id="china_map_box">
<!-- v-if="deepTree.length > 1"-->
<el-button type="primary" size="mini" class="back" @click="back" >最大化</el-button>
<div class="echarts" id="echarts">
<div class="map" id="map"></div>
</div>
</div>
</template>
<script>
import { disConnect } from 'echarts';
import {getChinaJson, getProvinceJSON, getCityJSON} from "../api/get-json";
import {cityProvincesMap} from '../config/cityChangYuanMap'
import {mapOption} from '../config/mapOption'
//import indexmap from '../views/indexMap';
export default {
name: "changYuanMap",
components: {},
data() {
return {
chart: null, // 实例化echarts
provincesMap: cityProvincesMap.provincesMap, // 地区拼音,用于查找对应json
provincesCode: cityProvincesMap.provincesCode, // 地区行政区划,用于查找对应json
areaMap: cityProvincesMap.areaMap, // 地区行政区划,用于数据的查找,按行政区划查数据
mapData: [], // 当前地图上的地区
option: {...mapOption.basicOption}, // map的相关配置
deepTree: [],// 点击地图时push,点返回时pop
areaName: '长垣市', // 当前地名
areaCode: '410783', // 当前行政区划
//areaLevel: 'country', // 当前级别
areaLevel: 'town',// 当前级别
scale:1,//鼠标事件
}
},
mounted() {
this.$nextTick(() => {
this.initEcharts();
this.chart.on('click', this.echartsMapClick);
});
document.getElementById("echarts").onmousewheel=(event)=>{
var dir=event.deltaY>0?"Up":"Down";
if(dir=="Up"){
console.log();
this.zoommin();
}else{
console.log();
this.zoomout();
}
}
},
methods: {
// 初次加载绘制地图
initEcharts() {
//地图容器
this.chart = this.$echarts.init(document.getElementById('map'));
if (this.areaCode === '410783') {
this.requestGetChinaJson();
} else {
this.requestGetProvinceJSON({areaName: this.areaName, areaCode: this.areaCode})
}
},
// 地图点击
echartsMapClick(params) {
// console.log(params);
this.areaName = params.areaName;
if (params.name in this.provincesMap) {
this.areaCode = params.data.areaCode;
this.areaLevel = params.data.areaLevel;
//如果点击的是34个省、市、自治区,绘制选中地区的二级地图
this.requestGetProvinceJSON(params.data);
} else if (params.seriesName in this.provincesMap) {
//如果是【直辖市/特别行政区】只有二级下钻
if (this.special.indexOf(params.seriesName) >= 0) {
return;
} else {
this.areaCode = this.areaMap[params.name];
this.areaLevel = params.data.areaLevel;
//显示县级地图
this.requestGetCityJSON(params.data)
}
} else {
return;
}
this.$emit('map-change', params.data);
},
//绘制全国地图
requestGetChinaJson() {
getChinaJson().then(res => {
let arr = [];
for (let i = 0; i < res.features.length; i++) {
let obj = {
name: res.features[i].properties.name,
areaName: res.features[i].properties.name,
areaCode: res.features[i].id,
areaLevel: 'province',
value: Math.round(Math.random()),
};
arr.push(obj)
}
this.mapData = arr;
this.deepTree.push({
mapData: arr,
//params: {name: 'china', areaName: 'china', areaLevel: 'country', areaCode: '000000'}
params: {
name: 'changyuanshi',
areaName: 'changyuanshi',
areaLevel: 'town',
areaCode: '410783'}
});
//注册地图
//this.$echarts.registerMap('china', res);
this.$echarts.registerMap('changyuanshi', res);
//绘制地图
//this.renderMap('china', arr);
this.renderMap('changyuanshi', arr);
});
},
// 加载省级地图
requestGetProvinceJSON(params) {
getProvinceJSON(params.areaCode).then(res => {
this.$echarts.registerMap(params.areaName, res);
let arr = [];
for (let i = 0; i < res.features.length; i++) {
let obj = {
name: res.features[i].properties.name,
areaName: res.features[i].properties.name,
areaCode: res.features[i].id,
//areaLevel: 'city',
areaLevel:'town',
value: Math.round(Math.random()),
};
arr.push(obj)
}
this.mapData = arr;
this.deepTree.push({
mapData: arr,
params: params,
});
this.renderMap(params.areaName, arr);
});
},
// 加载市级地图
requestGetCityJSON(params) {
this.areaLevel = params.areaLevel;
getCityJSON(params.areaCode).then(res => {
this.$echarts.registerMap(params.areaName, res);
let arr = [];
for (let i = 0; i < res.features.length; i++) {
let obj = {
name: res.features[i].properties.name,
areaName: res.features[i].properties.areaName,
areaCode: res.features[i].id,
areaLevel: 'districts',
value: Math.round(Math.random()),
};
arr.push(obj)
}
this.mapData = arr;
this.deepTree.push({mapData: arr, params: params});
this.renderMap(params.areaName, arr);
})
},
renderMap(map, data) {
this.option.series = [
{
name: map,
mapType: map,
...mapOption.seriesOption,
data: data
}
];
//渲染地图
this.chart.setOption(this.option);
},
// 返回
// back() {
// // console.log(this.deepTree);
// if (this.deepTree.length > 1) {
// this.deepTree.pop();
// let areaName = this.deepTree[this.deepTree.length - 1].params.areaName;
// let mapData = this.deepTree[this.deepTree.length - 1].mapData;
// this.$emit('back-change', this.deepTree[this.deepTree.length - 1].params);
// this.renderMap(areaName, mapData);
// }
//},
//跳转页面
back(){
window.location.href ='../views/indexMap';
},
//鼠标滑动事件
zoomout(){
console.log("out");
document.getElementById("map").style.transform="scale("+this.scale+")";
this.scale+=0.5;
},
zoommin(){
console.log("min");
document.getElementById("map").style.transform="scale("+this.scale+")";
this.scale-=0.5;
if(this.scale<0.5){
this.scale=0.5;
}
}
}
}
</script>
<style lang="scss" scoped>
#china_map_box {
display: flex;
width: 100%;
height: 100%;
position: relative;
.echarts {
width: 0;
flex: 1;
background-size: 100% 100%;
#map {
height: 100%;
margin-top: 20px;
}
}
.back {
position: absolute;
top: .8rem;
right: .5rem;
z-index: 999;
padding-left: .12rem;
padding-right: .12rem;
}
}
</style>