Echarts实现3d 地图实现飞线效果
Echarts实现3d 地图实现飞线效果
注意:重点关注data中的数据格式
在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航线. 补充:飞机效果链接
{
type: "lines3D",
coordinateSystem: "geo3D",
zlevel: 10, //设置这个才会有轨迹线的小尾巴
polyline: false,
effect: {
show: true,
period: 8, 箭头指向速度，值越小速度越快
trailLength: this.option.line3DtrailLength||0.1,//[0,1] // 尾迹的长度，范围从 0 到 1，为线条长度的百分比。特效尾迹长度[0,1]值越大，尾迹越长重
opacity: this.option.line3DOpacity || 12, // 尾迹线条透明度
trailWidth: this.option.line3DtrailWidth ||10, //宽度
trailColor: this.option.line3DtrailColor ||"#d80cfc",
color: "#38bd98",//移动点的颜色
constantSpeed: this.option.line3DconstantSpeed ||30,//速度
//symbol: 'arrow', //箭头图标(无用)
//symbolSize:30, 图标大小
// symbol: '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',//箭头图标
// symbol: "amarkLinesow",
// symbol:['circle', 'arrow'],
},
//data必须存在才不会报
//data: this.lines3DData,
blendMode: "lighter",
data: [
{
coords: [
[120.864608, 32.016212, 7],
[117.139998, 30.377631, 1],
],
lineStyle: {
color: '#ee7f9d',
width: 3
},
},
{
coords: [
[117.184811, 34.261792, 1],
[117.139998, 30.377631, 1],
],
lineStyle: {
color: '#efe389',
width: 3
}
},
{
coords: [
[120.139998, 33.377631, 1],
[117.139998, 30.377631, 1],
],
lineStyle: {
color: '#a4efc1',
width: 3
}
},
{
coords: [
[118.767413, 32.041544, 1],
[117.139998, 30.377631, 1],
],
lineStyle: {
color: '#a4efc1',
width: 3
}
},],
},