带有飞线的地图

68 阅读 0 评论 45 点赞

我是靠谱客的博主犹豫雪糕，最近开发中收集的这篇文章主要介绍带有飞线的地图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.最近两个项目交替进行着，终于得空巴拉扒拉。直接上图：

有没有觉得这个地图有点炫酷的感觉呢？哈哈……不得不相信，压力之下还是能出好的产品的。上面是我们使用echarts中很多种map插件组合在一起的的效果，

1.带有飞线；

2.飞线的终点有指示圈；

3.鼠标移动在省份那会有提示框....

完整代码附上仅供参考：


1 <!DOCTYPE html>

2 <html>

3 <head>

4
<meta charset="utf-8">

5
<title>带有飞线的地图</title>

6
<script type="text/javascript" src="/static/js/jquery.min.js"></script>

7
<!-- 引入 echarts.js -->

8
<script src="/static/js/echarts/echarts.js"></script>

9
<script src="/static/js/echarts/china.js"></script>
 10
<script src="/static/js/echarts/layer/layer.js"></script>
 11 </head>
 12 <body>
 13
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 14
 15 <div id="main" style="width:100%; height:1000px;"></div>
 16
<script type="text/javascript">
 17
// 基于准备好的dom，初始化echarts实例
 18
var chart = echarts.init(document.getElementById('main'));
 19
 20
var series = [];//地图展现数据
 21
//24个省市经度纬度
 22
var geoCoordMap = {
 23
'陕西': [109.503789, 35.860026],
 24
'西安': [108.946466, 34.347269],
 25
'甘肃': [103.832478, 36.065465],
 26
'兰州': [103.84044, 36.067321],
 27
'新疆': [87.633473, 43.799238],
 28
'乌鲁木齐': [87.62444, 43.830763],
 29
'内蒙古': [111.772606, 40.823156],
 30
'包头': [109.846544, 40.662929],
 31
'青海': [101.786462, 36.627159],
 32
'西宁': [101.78443, 36.623393],
 33
'宁夏': [106.265605, 38.476878],
 34
'银川': [106.258602, 38.487834],
 35
'四川': [104.073467, 30.577543],
 36
'成都': [104.081534, 30.655822],
 37
'重庆': [106.558434, 29.568996],
 38
'西藏': [91.124342, 29.652894],
 39
'拉萨': [91.120789, 29.65005],
 40
'云南': [101.592952, 24.864213],
 41
'昆明': [102.852448, 24.873998],
 42
'贵州': [106.714476, 26.60403],
 43
'贵阳': [106.636577, 26.653325],
 44
'广西': [108.924274, 23.552255],
 45
'南宁': [108.373451, 22.822607],
 46
'山西': [112.515496, 37.866566],
 47
'太原': [112.534919, 37.873219],
 48
'河南': [101.556307, 34.51139],
 49
'郑州': [113.631419, 34.753439],
 50
'湖北': [112.410562, 31.209316],
 51
'武汉': [114.311582, 30.598467],
 52
'湖南': [111.720664, 27.695864],
 53
'长沙': [112.945473, 28.234889],
 54
'江西': [115.676082, 27.757258],
 55
'南昌': [115.864589, 28.689455],
 56
'安徽': [117.33054, 31.734294],
 57
'合肥': [117.233443, 31.826578],
 58
'上海': [121.480539, 31.235929],
 59
'浙江': [120.159533, 30.271548],
 60
'杭州': [120.215503, 30.253087],
 61
'广东': [113.394818, 23.408004],
 62
'广州': [113.271431, 23.135336],
 63
'北京': [116.413384, 39.910925],
 64
'天津': [117.209523, 39.093668],
 65
'河北': [117.220297, 39.173149],
 66
'唐山': [118.186459, 39.636584],
 67 
};
 68
var fromdata = '西安';//默认飞线原点
 69
//初始化飞线数据
 70
var XAData = [
 71 
[{name: '西安'}, {name: '乌鲁木齐'}],
 72 
[{name: '西安'}, {name: '西宁'}],
 73 
[{name: '西安'}, {name: '兰州'}],
 74 
[{name: '西安'}, {name: '银川'}],
 75 
[{name: '西安'}, {name: '包头'}],
 76 
[{name: '西安'}, {name: '太原'}],
 77 
[{name: '西安'}, {name: '拉萨'}],
 78 
[{name: '西安'}, {name: '成都'}],
 79 
[{name: '西安'}, {name: '重庆'}],
 80 
[{name: '西安'}, {name: '昆明'}],
 81 
[{name: '西安'}, {name: '贵阳'}],
 82 
[{name: '西安'}, {name: '广州'}],
 83 
[{name: '西安'}, {name: '长沙'}],
 84 
];
 85
 86
var convertData1 = function (data) {
 87 
let res = [];
 88
for (let i = 0; i < data.length; i++) {
 89 
let dataItem = data[i];
 90 
let fromCoord = geoCoordMap[dataItem[0].name];
 91 
let toCoord = geoCoordMap[dataItem[1].name];
 92
if (fromCoord && toCoord) {
 93 
res.push({
 94 
fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord]
 95 
});
 96 
}
 97 
}
 98
return res;
 99 
};
100
101
var convertData2 = function (data) {
102 
let res = [];
103
for (var i = 0; i < data.length; i++) {
104
var geoCoord = geoCoordMap[data[i].name];
105
if (geoCoord) {
106 
res.push({
107 
name: data[i].name,
108 
value: geoCoord.concat(data[i].value)
109 
});
110 
}
111 
}
112
return res;
113 
};
114 
$.post('/dbapi/price/getfinalprice', {}, function (result) {
115
var resultdatas = [];
116
for (var item of result) {
117
var obj = {
118 
name: item.city,
119 
value: '<br/>'
120 
};
121
for (var data of item.datas) {
122 
obj.value += data.tradname + "&emsp;价格" + data.price + "&emsp;" + (!isNaN(data.rise) ? (Number(data.rise) == 0 ? '--' : (Number(data.rise) > 0 ? "<span style='color:red'>涨跌" + data.rise + "</span>" : "<span style='color:green'>涨跌" + data.rise + "</span>")) : '--') + '<br/>';
123 
}
124 
resultdatas.push(obj);
125 
}
126 
[[fromdata, XAData]].forEach(function (item, i) {
127 
series.push({
128 
name: '西安',
129 
type: 'scatter',
130 
zlevel: 20,
131 
color: '#f00',
132 
coordinateSystem: 'geo',
133 
symbolSize: 10,
134 
itemStyle: {
135 
normal: {color: '#f00'}
136 
},
137 
data: convertData2(resultdatas)
138 
},
139 
{
140 
type: 'lines',
141 
zlevel: 15,
142 
effect: {
143 
show: true, period: 4, trailLength: 0, symbol: 'arrow', symbolSize: 7,
144 
},
145 
lineStyle: {
146 
normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#F19000'}
147 
},
148 
data: convertData1(item[1])
149 
},
150
//出发点
151 
{
152 
type: 'effectScatter',
153 
coordinateSystem: 'geo',
154 
zlevel: 15,
155 
rippleEffect: {
156 
period: 4, brushType: 'stroke', scale: 4
157 
},
158 
symbol: 'circle',
159 
symbolSize: function (val) {
160
return 4 + val[2] / 10;
161 
},
162 
itemStyle: {
163 
normal: {show: false}
164 
},
165 
tooltip: {
166 
show: false,
167 
},
168 
data: [{
169 
name: fromdata, value: geoCoordMap[item[0]].concat([100]),
170 
}],
171 
},
172
/*到达点*/
173 
{
174 
type: 'effectScatter',
175 
coordinateSystem: 'geo',
176 
rippleEffect: {
177 
period: 4, brushType: 'stroke', scale: 4
178 
},
179 
zlevel: 15,
180 
label: {
181 
normal: {
182 
show: false
183 
}
184 
},
185 
tooltip: {
186 
show: false,
187 
},
188 
symbol: 'circle',
189 
symbolSize: 15,
190 
itemStyle: {
191 
normal: {
192 
color: '#F19000'
193 
}
194 
},
195 
data: item[1].map(function (dataItem) {
196
return {
197 
name: dataItem[1].name,
198 
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].name]),
199 
tooltip: {
200 
formatter: dataItem[0].name + "--" + dataItem[1].name + "：" + dataItem[1].value
201 
}
202 
};
203 
}),
204 
});
205 
});
206
207 
option = {
208 
backgroundColor:"#123456",
209 
color: ['#fc5353', '#f4fc6c', '#e68b55', '#9a68ff', '#ff60c5'],
210 
visualMap: {
211 
min: 1000,
212 
max: 5000,
213 
calculable: true,
214 
right: '32%',
215 
bottom: '6%',
216 
zlevel: 10,
217 
textStyle: {
218 
color: '#fff'
219 
}
220 
},
221 
tooltip: {
222 
trigger: 'item',
223 
formatter: function (params) {
224
if (params.value) {
225
return params.name + ' : ' + params.value[2];
226 
} else {
227
return params.name;
228 
}
229 
}
230 
},
231 
legend: {
232 
orient: 'horizontal',
233 
left: '27%',
234 
top: '5%',
235 
data: ['高线'],
236 
textStyle: {
237 
color: '#ffffff'
238 
},
239 
icon: 'circle'
240 
},
241 
geo: {
242 
map: 'china',
243 
zlevel: 10,
244 
layoutCenter: ['48%', '43%'],
245 
roam: true,
246 
layoutSize: "100%",
247 
zoom: 1.08,
248 
label: {
249 
normal: {
250 
show: true,//地图上的省份名称是否显示
251 
textStyle:{
252 
fontSize:12,
253 
color: '#43D0D6'
254 
}
255 
},
256 
emphasis: {
257 
show: true
258 
}
259 
},
260 
itemStyle: {
261 
normal: {
262 
color: '#062031',
263 
borderWidth: 1.1,
264 
borderColor: '#43D0D6'
265 
},
266 
emphasis: {
267 
areaColor: '#43D0D6'
268 
}
269 
}
270 
},
271 
series: series
272 
};
273 
chart.setOption(option);
274 
chart.on('click', function (params) {
275 
alert('这是地图点击事件~~~');
276 
});
277 
});
278
</script>
279 </body>