FlyLineLayer

用来展示轨迹飞线图层，继承自Layer

基于Threejs实现，使用前需要额外引入mapvgl.threelayers包

1
2
3
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
or
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.188/dist/mapvgl.threelayers.min.js"></script>

示例

动手试试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var layer = new mapvgl.FlyLineLayer({
    color: 'rgba(50, 50, 200, 1)',
    textureColor: 'rgba(50, 50, 200, 1)',
    textureWidth: 10,
    textureLength: 30,
    data: [{
        geometry: {
            type: 'LineString',
            coordinates: [
                [116.394191, 39.91334],
                [116.417259, 39.913672]
            ]
        }
    }]
});

options属性

style

解释：飞线动画方式

类型：string

默认值：’normal’

可选值：

  • normal，默认值，飞线动画速度均匀
  • chaos，飞线动画速度不均匀

color

解释：底线颜色，同css颜色

类型：string

默认值：’rgba(255, 5, 5, 1)’

textureColor

解释：飞线动画颜色，同css颜色

类型：string

默认值：’rgba(255, 5, 5, 1)’

textureWidth

解释：飞线动画的宽度

类型：Number

默认值：5

textureLength

解释：飞线动画的长度，占整条线的百分比，取值0-100

类型：Number

默认值：30

step

解释：飞线动画的步长，步长越大动画速度越快

类型：Number

默认值：0.1

data内容

数据格式内容：

1
2
3
4
5
6
7
8
9
[{
    geometry: {
        type: 'LineString',
        coordinates: [
            [116.394191, 39.91334],
            [116.417259, 39.913672]
        ]
    }
}]