地图封装
<template>
<div class="xxc-map" ref="chart" id=\'xxc-map\'>
</div>
</template>
<script>
// import * as echarts from \'echarts\';
import mapCity from \'@/common/util/mapCity\';
export default {
props: [\'myData\', \'sendMapName\', \'mapName\', \'mapLeve\'],
data() {
return {
province: JSON.parse(JSON.stringify(mapCity.province)),
optionMap: {},
myChart: null,
name: \'china\',
city: [],
isShowCity: false,
isShowBig: \'scale\',
dataIndex: -1,
dataName: \'\',
// currentProvince: null,
leve: \'\',
timer: null,
setcenter: [104.97, 36.0],
scaleLimit: { min: 1, max: 8 },
zoom:\'1.2\',
actionMode: \'\',
isshowLabelCity:true,
benbuName:\'\',
jigouName:\'\',
dx: 0,
dy: 0
}
},
watch: {
myData: {
handler(data) {
this.updateData(data);
},
deep: true
},
sendMapName(val) {
if (val !== \'\') {
this.drawMap(this.province);
}
},
mapLeve(val) {
this.leve = val;
},
mapName(name) {
console.log(name,this.leve)
this.jigouName = name;
this.actionMode = \'\';
this.benbuName = \'\';
if (this.timer) clearTimeout(this.timer);
this.init();
var provincesText = [\'上海\', \'河北\', \'山西\', \'内蒙\', \'辽宁\', \'吉林\', \'黑龙\', \'江苏\', \'浙江\', \'安徽\', \'福建\', \'江西\', \'山东\', \'河南\', \'湖北\', \'湖南\', \'广东\', \'广西\', \'海南\', \'四川\', \'贵州\', \'云南\', \'西藏\', \'陕西\', \'甘肃\', \'青海\', \'宁夏\', \'新疆\', \'北京\', \'天津\', \'重庆\'];
let goNext = false;
let _name = \'\';
if (this.leve > 3) { //城市
if(!(name.includes(\'本部\'))){
provincesText.forEach(item => { //传过来的地方名前面带有省份的
if (item == name.slice(0, 2)) {
if (item != \'内蒙\' && item != \'黑龙\') {
_name = (name.slice(2, name.length))
} else {
_name = (name.slice(3, name.length))
}
if(name.slice(0,2) ==\'山东\' || name.slice(0,2) ==\'河南\') this.actionMode = _name;
goNext = false;
return;
}
});
}else{
this.benbuName = name;
_name =name.replace(/本部/g, \'\')
this.actionMode = _name;
}
} else if (this.leve == 3) { //省份
_name = name;
this.actionMode = name;
goNext = false;
} else { //一元二元
if (name != \'全系统\') {
let flag = \'\';
switch (name) {
case \'一元华东区\':
flag = \'oneEareaHuaDong\'
break;
case \'一元华北区\':
flag = \'oneEareaHuaBei\'
break;
case \'一元华南区\':
flag = \'oneEareaHuaNan\'
break;
case \'二元西区\':
flag = \'TwoEareaXiqu\'
break;
case \'二元东区\':
flag = \'TwoEareaDongQu\'
break;
case \'一元\':
flag = \'oneEarea\'
break;
case \'二元\':
flag = \'twoEarea\'
break;
}
this.province.forEach(pro => {
pro.selected = false;
mapCity[flag].forEach(items => {
if (pro.pinying == items.pinying) {
pro.selected = true;
return;
}
})
})
} else { //全系统
this.province.forEach(pro => {
pro.selected = false;
if (pro.value != \'-1\') {
pro.selected = true;
return;
}
});
}
let fname = \'china\';
this.setProvince(fname);
this.setData(this.province);
goNext = true;
}
if (!goNext) this.drawMapCity(\'search\', _name);
}
},
mounted() {
this.myChart = this.$echarts.init(this.$refs.chart);
this.myChart.on(\'georoam\', (params) => {
this.dx += params.dx;
this.dy += params.dy;
const width = document.getElementById(\'xxc-map\').offsetWidth - 50;
const height = document.getElementById(\'xxc-map\').offsetHeight - 50;
// 地图移动超过边界值即初始化
if (this.dx >= width || this.dy >= height || this.dx <= -width || this.dy <= -height) {
this.dx = 0;
this.dy = 0;
this.myChart.setOption(this.optionMap);
}
})
this.timer = setTimeout(() => {
this.init();
}, 200);
},
methods: {
init() {
//初始化echarts
this.drawMap(this.province);
},
/**
* @description 加载省或市地图和处理data省市区县数据
* @param {String} name 省pinying | 市pinying
*/
setProvince(name) {
console.log(name)
this.name = name ==\'shandong\' ? \'jinan\' :name;
let url = \'\'; // 地图路径
let isArea = false; // 是否加载区县地图
if (this.name != \'china\') {
this.isShowCity = true;
this.isShowBig = true;
try {
// 引入省地图
url = require(`../../../../node_modules/echarts/map/json/province/${this.name}.json`);
if(this.name == \'hainan\') this.zoom = \'8\';
} catch (e) {
// 点击市加载市地图
if (this.actionMode !== \'\') {
url = require(`@/common/map/json/${this.name}.json`);
console.log(url)
isArea = true;
}
}
} else { // 加载全国地图(全系统)
this.isShowCity = false;
this.isShowBig = true;
url = require(`../../../../node_modules/echarts/map/json/${this.name}.json`);
}
//注册地图
this.$echarts.registerMap(this.name, url);
this.city = [];
// 处理对应的城市或区县数据
url.features.forEach((city,index) => {
let value = 1;
let selected = false;
let _name = \'\';
let noClick = \'\';
let proName = \'\';
let itemStyle = {
normal:{
label:{
show:true
}
}
};
//对青岛，济南，烟台,河南北部，河南南部做特殊处理
let names = [\'shandong\',\'jinan\',\'qingdao\',\'yantai\',\'henanbeibu\',\'henannanbu\'];
if(names.includes(this.name)) {
mapCity.city.forEach(item => {
if (city.properties.name.includes(item.name)) {
value = item.value;
proName = item.proName;
if (((this.jigouName == item.proName && item._selected))) {selected = true;}
else if (this.benbuName == item.proName && city.properties.name == item.name) selected = true;
}
})
}
// 区县
if (isArea) {
this.city.push({
name: city.properties.name,
value,
proName,
selected
})
return;
}
// 城市
let isSelected = true;
mapCity.city.forEach(item => {
if ((city.properties.name.includes(item.name)) || city.properties.name.includes(item.mapName)) {
value = item.value;
noClick = item.noClick;
proName = item.proName;
if (this.actionMode == \'click\' && item.selected) {selected = true;}
else if ((!this.actionMode && item._selected)) selected = true;
// else if ((item.belongCity && item._selected)) {selected = true;}
if (item.name.length < 3) {
_name = item.name;
}
if (this.actionMode== \'click\') {
if (item.emit) { //若该省份无value值，则默认该省会
this.$root.$emit(\'changeCity\', {
val: \'\',
city: this.benbuName ? this.benbuName :item.name
});
}
}
if (item.belongProince) isSelected = false;
return;
} else {//本部
if (this.benbuName == item.name && city.properties.name == item.selectedName) selected = true;
}
})
let _city = {
name: city.properties.name,
value,
selected,
noClick,
itemStyle,
proName
}
if (isSelected) {//若isSelected为false时，机构选择传过来的城市不选中，若传过来的\'青岛\'有下级机构，则加载山东地图，不选中青岛，选中青岛下级机构
if (this.mapName !== \'吉林\') {
if (this.mapName.length > 2) { //机构选择返回的名与地图上的城市名有出入，进行判断（广东中山市）中山市
if (this.mapName.includes(_city.name)) _city.selected = true;
if (this.mapName==_city.proName) _city.selected = true;
} else {
if (_city.name.includes(this.mapName)) _city.selected = true;
}
}
}
if (_name !== \'\') _city._name = _name;
this.city.push(_city);
})
// this.$echarts.registerMap(this.name, url);
},
clickMap() {
if (this.sendMapName == \'china\') {
this.setProvince(this.sendMapName);
} else {
this.province.forEach(item => {
if (this.sendMapName == item.name) {
this.setProvince(item.pinying);
return;
}
})
}
this.myChart.off(\'click\');
this.myChart.on(\'click\', params => {
console.log(params)
this.actionMode = \'click\';
if (params.data.pinying) { // 省份
if (params.value != \'-1\') this.drawMapCity(\'click\', params);
else {
this.init();
}
} else { // 城市
let [flag, type] = [true, \'mapSelect\'];
let _proName = \'\'
this.city.forEach(item => {
if(item.name == params.name) _proName = item.proName;
if ((item.name == params.name && item.value == 1) || (item.name == params.name && item.noClick == \'1\')) flag = false;
})
if (!flag && this.dataIndex < 0) type = \'mapUnSelect\';
else {
if (flag) {
this.dataIndex = params.dataIndex;
this.$root.$emit(\'changeCity\', {
val: \'\',
// city: this.benbuName? this.benbuName: (params._name || params.name)
city: _proName
});
}
}
this.myChart.dispatchAction({
type,
dataIndex: this.dataIndex < 0 ? params.dataIndex : this.dataIndex
})
}
});
},
drawMap(data) {
this.clickMap();
this.setData(data);
},
drawMapCity(type, params) {
switch (type) {
case \'click\':
params.pinying = params.data.pinying;
break;
case \'search\':
let isProvince = false;
this.province.forEach(item => {
if (item.name == params) {
params = {
_name:item.name,
pinying: item.pinying
}
isProvince = true;
return;
};
});
if (!isProvince) {
mapCity.city.forEach(item => {
if (item.name == params) {
params = {
_name:item.proName ? item.proName :item.name
};
if (item.noClick) {
params.pinying = item.pinying;
} else {
let val = item.value.length > 2 ? item.value.slice(0, 2) : item.code;
if(params._name == item.proName) {
params.pinying = item.belongCity;
}
if(!item.belongCity){ //该没有下属机构，需往上找隶属的省份
this.province.forEach(sub => {
if (sub.value == val) {
params.pinying = sub.pinying;
}
})
}
}
}
})
this.myChart.dispatchAction({ //是否可以选中
type: \'mapSelect\',
name: params._name || params.name
})
}
break;
}
this.dataIndex = -1;
this.province.forEach(item => {
if (item.pinying == params.pinying) this.setcenter = item.lat;
});
if(params.name == \'山东\') params.name = \'济南\';
if(params.name == \'河南\') params.name = \'河南北部\';
this.$root.$emit(\'changeCity\', {
val: \'\',
// city: this.benbuName ? this.benbuName:(params._name || params.name)
city: this.benbuName ? this.benbuName:(params._name || params.name)
});
this.setProvince(params.pinying);
this.setData(this.city);
},
// 设置echarts配置
setData(data) {
this.optionMap = {
backgroundColor: \'#FFFFFF\',
tooltip: {
trigger: \'item\',
show: false
},
//左侧小导航图标;控制地图省份的颜色
visualMap: {
show: false,
color: [\'#76a2c8\']
},
grid: {
top: 40, //距离容器上边界40像素
bottom: 30 //距离容器下边界30像素
},
center: this.setcenter,
layoutCenter: [\'30%\', \'30%\'],
//配置属性
series: [{
name: \'数据\',
type: \'map\',
map: this.name,
roam: this.isShowBig, //鼠标缩放和平移漫游
center: this.setcenter, //当前视角的中心点
selectedMode: \'single\', //multiple多选single
scaleLimit: this.scaleLimit, //缩放最大最小
zoom: this.zoom,
label: {
normal: {
show: this.isShowCity, //省份名称
color: \'rgba(0,0,0,.8)\',
fontSize: \'80%\',
align: \'center\'
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: \'#fff\',//区域边框颜色
color: \'#ff6200\',
label: { show: this.isshowLabelCity }
},
emphasis: {//选中颜色
areaColor: "#ff6200"
}
},
data
}
]
};
//使用制定的配置项和数据显示图表
this.myChart.clear();
this.myChart.setOption(this.optionMap);
},
// 更新数据
updateData(data) {
this.setData(data); // 设置数据
this.$echarts.dispose(this.$refs.chart);
}
}
}
</script>
<style lang="less" scoped>
/* 宽高设置成100%，保证和父盒子的高度一致*/
.xxc-map {
width: 100%;
height: 100%;
}
</style>