地图封装

<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>

posted on 2018-09-11 17:44  一葱  阅读(138)  评论(0)    收藏  举报

导航