echarts 绘制 地图飞机路线
发布时间
阅读量：
阅读量
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 }效果图：
全部评论 (0)
还没有任何评论哟~