echarts 绘制 地图飞机路线

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dongcehao/article/details/80926470

Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint。如果要实现点数据或者线数据的可视化,可以使用在地理坐标系组件上的散点图线图


本来要画地图感觉很水,结果查了资料发现这么件事,

1 import geoCoordMap from '../../../../common/js/geoCoordMap';  // 各个地理位置的 经纬度 js 文件
import china from '../../../../common/js/china';                  //  被 echarts 额外分出来的 一个 中国地理 js 文件
没有这两个文件还写不了了。o(╥﹏╥)o

converData() 函数用来 通过名称获取 城市的 经纬度

  1 			converData (data) {
  2 				let res = []
  3 				for (let i = 0; i <  data.length; i ++) {
  4 					let dataItem = data[i]
  5 					//  获取 来去 地址的 经纬度
  6 					let fromCoord = this.geoCoord[dataItem[0].name]
  7 					let toCoord = this.geoCoord[dataItem[1].name]
  8 					// debugger;
  9 					if (fromCoord && toCoord) {
 10 						res.push({
 11 							fromName: dataItem[0].name,
 12 							toName: dataItem[1].name,
 13 							coords: [fromCoord, toCoord]
 14 						})
 15 					}
 16 				}
 17 				return res
 18 			},
 19 			getScatter (data) {
 20 				let _self = this
 21 				let scatter = []
 22 				//  获取目的地和 出发地 的 名称 和 经纬度,用来 作为点 的数据
 23 				scatter = data.map(function(dataItem) {
 24 							return {
 25 								name: dataItem[1].name,
 26 								value: _self.geoCoord[dataItem[1].name]
 27 							}
 28 						})
 29 				scatter.push({
 30 					name: data[0][0].name,
 31 					value: _self.geoCoord[data[0][0].name]
 32 				})
 33 				return scatter
 34 			},
 35 			drawMap() {
 36 				let _self = this;
 37 				let SHData = [
 38                   [{name:'上海'},{name:'北京'}],
 39                   [{name:'上海'},{name:'杭州'}],
 40                   [{name:'上海'},{name:'舟山'}]
 41                 ];              
 42 				let 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';
 43 
 44 				let option = {
 45 					title: {
 46 						text: '迁移情况',
 47 						textStyle: {
 48 							fontStyle:'normal',
 49 						    fontSize: 14,
 50 						},
 51                         backgroundColor: '#fff'
 52 					},
 53 					geo: {       //  使用地图 作为 图表的 坐标
 54                         center: [121.4648,31.2891],
 55 				    	zoom: 6,          // 放大 倍数
 56 						name: '全国',
 57 						type: 'map',
 58 						roam: true,  //  鼠标缩放和 平移漫游
 59 						map: 'china',   
 60 						itemStyle:{
 61 							normal:{
 62 								borderColor:'white',
 63 								borderWidth: 3,
 64 								areaColor: '#c6d9f1'
 65 							},
 66 							emphasis: {
 67 								areaColor: '#4089d3'
 68 							}
 69 						},
 70 					},
 71 					series: [{
 72 						name: '用户行程',
 73 						type: 'lines',           //  飞行的路径线
 74 						zlevel: 1,
 75 						effect: {                //  尾迹特效 需要单独 放在一个层
 76 							show: true,
 77 							period: 6,           // 动画时间
 78 							trailLength: 0.7,    // 特效尾迹的长度
 79 							color: '#fff',
 80 							symbolSize: 3
 81 						},
 82 						lineStyle: {
 83 							normal: {
 84 								color: '#3f73a8',
 85 								width: 0,
 86 								curveness: 0.2      // 边的 曲度
 87 							}
 88 						},
 89 						data: _self.converData(SHData)
 90 					}, {
 91 						name: '用户行程',
 92 						type: 'lines',           //  飞机飞行路线的运行效果
 93 						zlevel: 2,
 94 						symbolSize: 10,
 95 						effect: {
 96 							show: true,
 97 							period: 6,
 98 							trailLength: 0,
 99 							symbol: planePath,
100 							symbolSize: 15,
101 						},
102 						lineStyle: {
103 							normal: {
104 								color: '#3f73a8',
105 								width: 4,
106 								opacity: 0.6,
107 								curveness: 0.2
108 							}
109 						},
110 						data: _self.converData(SHData)
111 					}, {
112 						name: '用户行程',
113 						type: 'effectScatter',   //  行程目标地点的 标注
114 						coordinateSystem: 'geo',  // 使用的坐标系
115 						zlevel: 3,
116 						rippleEffect: {          // 涟漪特效相关配置
117 							brushType: 'stoke'
118 						},
119 						label: {
120 							normal: {
121 								show: true,
122 								position: 'right',
123 								formatter: '{b}'
124 							}
125 						},
126 						symbolSize: 10,
127 						itemStyle: {
128 							normal: {
129 								color: '#3f73a8'
130 							}
131 						},
132 						data: _self.getScatter(SHData)
133 					}]
134 				}
135                 this.map.setOption(option);
136 			}

效果图:

展开阅读全文

没有更多推荐了,返回首页