LineRainbowLayer

彩虹渐变线图层通过颜色属性表达值的变化。适用于通过颜色来表达某个方向或某条路径上的变量波动，比如拥挤度、温度、降雨量等。
该类继承自LineLayer。

示例

动手试试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var lineLayer = new mapvgl.LineRainbowLayer({
    style: 'road', // road, arrow, normal
    width: 15,
    color: ['#ff0', '#fd0', '#f90', '#f00'],
    data: [{
        geometry: {
            type: 'LineString',
            coordinates: [
                [106.46511, 29.57895],
                [106.47775, 29.58850],
                [106.47933, 29.59642],
                [106.48825, 29.60910]
            ]
        }
    }]
});

options属性

常规属性

color

解释：颜色值数组，颜色值与坐标点数组一一对应，格式同css颜色。注意：当颜色值个数大于坐标点个数n时，取颜色值前n个；当颜色值小于坐标点个数时，各坐标点均匀获取颜色值。

类型：Array

width

解释：线的宽度

类型：number

默认值：4

lineCap

解释：线的端头，可选butt 平头、square 方头、round 圆头

类型：string

默认值：’butt’

lineJoin

解释：线的连接拐角，可选miter 尖角、bevel 平角、round 圆角

类型：string

默认值：’miter’

miterLimit

解释：由于在尖角情况下角度特别小时，尖角特别长，故用该参数来控制尖角突出部分的最大长度

类型：string

默认值：2倍于线宽的长度

unit

解释：绘制大小的方式，即指定width和height属性的单位

类型：string

默认值：’px’

可选值：

• px，默认值，按像素绘制
• m，按米来绘制

antialias

解释：抗锯齿，默认关闭为false

类型：boolean

offset

解释：沿法线方向的偏移，几乎很少使用到，设置该属性后只能用butt端头和miter连接，不然会出现问题

类型：number

贴图属性

style

解释：设置该参数，可以在线上叠加一些图形来适用于一些场景。注意，该属性只在初始化时读取一次，实例化后不可通过setOptions方法来重置。

类型：string

可选值：

• road，叠加路况箭头，可用于道路场景的展示
• arrow，叠加尖箭头图形，可用于OD场景的展示

styleOptions

解释：控制贴图的样式，对象具有color和width属性。

类型：object

data内容

数据格式内容：

1
2
3
4
5
6
7
8
9

[{
    geometry: {
        type: 'LineString',
        coordinates: [
            [116.394191, 39.91334],
            [116.417259, 39.913672]
        ]
    }
}]