首先加载全国路线图
findMap(){
let _this = this,
param = {}
_this.chinaOpt = echarts.init(document.getElementById('chinaflag'));
_this.chinaOpt.clear()
_this.$store.dispatch("url", {param}).then(res=>{
let res={
"meta": {"msg": "success","code": 0,"success": true,"timestamp": "2020-09-03 13:45:55"
},
"data": {//本例数据格式
"list": [["北京","保定","石家庄","邯郸","上海","深圳","保定","武汉"]]
}
}
if(res.meta.success){
axios.get('./china_full.json').then((data) => {
//重置图表
echarts.registerMap('china', data.data);
let geoCoordName=[]//存储路线到达点
res.data.list[0].map(item=>{
let temp=false
for (let index = 0; index < geoinfo.length; index++) {
const districts = geoinfo[index];
if(districts.name.indexOf(item)>=0){
temp=true
geoCoordName.push(districts.name)
break
}else{
for (let num = 0; num < districts.districts.length; num++) {
const element = districts.districts[num];
if(element.name.indexOf(item)>=0){
temp=true
geoCoordName.push(districts.name)
}
if(temp){
break
}
}
}
if(temp){
break
}
}
})
let mapOptions = _this.$utils.initMapScatterOpt()
var geoCoordMap = {
'北京': [116.4551, 40.2539],
'天津': [117.4219, 39.4189],
'上海': [121.4648, 31.2891],
'重庆': [106.557165, 29.563206],
'河北': [114.508958, 38.066606],
'河南': [113.673367, 34.748062],
'云南': [102.721896, 25.047632],
'辽宁': [123.445621, 41.806698],
'广东': [113.5107, 23.2196],
'湖南': [112.950888, 28.229114],
'安徽': [117.300842, 31.887672],
'山东': [117.029895, 36.677424],
'江苏': [118.814345, 32.061445],
'浙江': [120.16991, 30.272236],
'江西': [115.904962, 28.674132],
'湖北': [114.290138, 30.595623],
'甘肃': [103.851217, 36.061978],
'山西': [112.549248,37.857014],
'陕西': [108.960062, 34.285251],
'吉林': [126.572746, 43.86785],
'福建': [119.319713, 26.072564],
'贵州': [106.557165, 29.563206],
'广东': [113.238778, 23.161621],
'青海': [101.787147, 36.621234],
'四川': [104.082256, 30.652565],
'海南': [109.910757, 19.108187],
'黑龙江': [126.655705, 45.759581],
'西藏': [91.154492, 29.665953],
'内蒙古': [111.670801,40.818311],
'广西': [108.381781, 22.815042],
'宁夏': [106.234805, 38.487468],
'新疆': [87.616327, 43.800508],
'香港': [114.168545, 22.36641],
'澳门': [113.549978, 22.1943],
'台湾': [121.098613, 23.778734]
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: 1
});
}
}
return res;
};
mapOptions.series[0].data = convertData(geoCoordName)
var KMData = [];
geoCoordName.map(item=>{
if(item!='北京'){
KMData.push(
//替换名称不符规则系列
[{name:'北京'}, {name:item.replace(/省|市|自治区|壮族自治区|维吾尔自治区|回族自治区|特别行政区/g, ''),value:1}]
)
}
})
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[['北京', KMData]].forEach(function (item, i) {
series.push(
{
name: item[0],
type: 'lines',//路线
zlevel: 2,
effect: {
show: true,
period: 10,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'effectScatter',//散点图 到达城市
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2]>0?(val[2]/9):0.1;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
mapOptions.geo.zoom=1
mapOptions.series=series
_this.chinaOpt.setOption(mapOptions)
_this.chinaOpt.on('click', function (param) {
_this.chinaMapClick(param)//地图点击事件
})
})
}
})
}
初始化地图路线图后点击某一区域查看当前省份地图数据
chinaMapClick(v){
let _this=this;
var name = v.name; //地区name
var mapCode = _this.provinces[name]; //地区的json数据 城市代号
let center=[]
let nameList=[]
let valList=[]
if (!mapCode) {
return;
}
let temp=false
for (let index = 0; index < geoinfo.length; index++) {
const districts = geoinfo[index];
if(districts.name.indexOf(name)==0){
center=districts.center.split(',')//省份中心
for (let num = 0; num < districts.districts.length; num++) {
const element = districts.districts[num];
nameList.push({//市区信息
name:element.name,
value:element.center.split(','),
})
if(Math.random()>0.5){
valList.push({
name:element.name,
value:element.center.split(','),
})
}
}
temp=true
}
if(temp){
break
}
}
_this.loadMap(mapCode, name,center,nameList,valList);
}
然后调用地图重新渲染点击的省份
loadMap(mapCode, name,center,nameList,valList) {
let _this=this
_this.chinaOpt = echarts.init(document.getElementById('chinaflag'));
_this.chinaOpt.clear()
axios.get('../../../../../static/json/'+mapCode+'_full.json').then((data) => {
if (data) {
echarts.registerMap(name, data.data);
var opt={
geo: {
map: name,
zoom: 1, //当前视角缩放比例
},
series: [
{
data: nameList,
type: 'map',//渲染地图
mapType: name,
selectedMode: 'false',
label: {
normal: {
show: true,
color:'#fff'
},
emphasis: {
show: true,
color:'#fff'
}
},
itemStyle: {
normal: {
areaColor: '#03035a',
borderColor: '#00f9ff',
shadowColor: '#092f8f', //外发光
shadowBlur: 20
},
emphasis: {
areaColor: '#03035a', //悬浮区背景
}
}
},
{
name: 'Top',//地图上标记点信息
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [20, 20],
itemStyle: {
normal: {
color: '#D8BC37', //标志颜色
}
},
data: valList,
},
]
};
_this.chinaOpt.setOption(opt)
} else {
alert('无法加载该地图');
}
})
}