首先加载全国路线图
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('无法加载该地图'); } }) }
