Skip to content

LineLayer

继承FeatureLayer类,在支持实线、虚线的基础上支持描边线、纹理贴图线、间隔图标填充。

构造函数

构造函数描述
BMapGL.LineLayer(options: object)继承FeatureLayer类,在基础实线、虚线的基础上支持描边线、纹理贴图线、间隔图标填充

配置选项

options属性除FeatureLayer参数外,增加以下参数:

属性类型描述
styleobject线图层显示样式配置对象,详见样式配置

样式配置

属性类型描述
sequenceboolean是否采用间隔填充纹理,默认false
marginLengthnumber间隔距离,默认16,单位像素
borderCoveredboolean默认true,会出现描边被线填充覆盖现象。如果设置false不会出现压盖现象,但不允许使用图像纹理模式
borderMaskboolean是否受内部填充区域掩膜,默认true,如果存在borderWeight小于0,则自动切换false
borderColorstring | StyleExpress描边颜色
borderWeightnumber | StyleExpress描边宽度,可以设置负值
strokeTextureUrlstring | StyleExpress填充纹理图片地址,默认是空。图片需要是竖向表达,在填充时会自动横向处理
strokeTextureWidthnumber | StyleExpress填充纹理图片宽度,需要是2的n次方
strokeTextureHeightnumber | StyleExpress填充纹理图片长度,需要是2的n次方
strokeLineJoinstring | StyleExpress描边线连接处类型,可选'miter', 'round', 'bevel',默认miter
strokeLineCapstring | StyleExpress描边线端头类型,可选'round', 'butt', 'square',默认round
strokeColorstring | StyleExpress描边线颜色,默认#dec41b
strokeWeightnumber | StyleExpress描边线宽度,默认0
strokeOpacitynumber | StyleExpress描边线透明度,默认1
strokeStylestring | StyleExpress描边线类型,可选'solid'、'dashed' 和 'dotted',默认solid
dashArrayarray | StyleExpress描边线虚线设置,默认[8,4]表示实线部分长8像素,间隙部分长4像素
linksLinebooleanMultiLineString是否以多段线形式组成一条线,可以通过strokeColorControl设置每段的颜色,默认false
strokeColorControlfunction(line:number, segment:number):string输入参数是第几条路线,第几段,输出是颜色字符串
traceDisappearboolean痕迹是否使用消失模式,默认false。false代表使用traceControl设置颜色
traceStartboolean是否从起点开始处理,否则从终点开始处理痕迹。默认true
traceControlfunction(line:array[number]):array[number]痕迹距离设置函数,输入参数是第几条路线数组,输出是距离每条线起点的痕迹长度数组,单位为米
traceColorarray[3]rgb颜色值,取值范围0-255

示例

ts
// 创建线图层
const layer = new BMapGL.LineLayer({
  idKey: 'id',
  crs: 'BD09LL',
  style: {
    sequence: false,
    marginLength: 16,
    borderCovered: true,
    borderMask: true,
    borderColor: '#000000',
    borderWeight: 2,
    strokeColor: '#ff0000',
    strokeWeight: 2,
    strokeOpacity: 0.8,
    strokeStyle: 'solid',
    dashArray: [8, 4],
    strokeLineJoin: 'round',
    strokeLineCap: 'round'
  }
});

// 设置数据
layer.setData(geojsonData);

// 添加到地图
map.addLayer(layer);

注意事项

  1. 样式设置:

    • 合理设置描边和填充样式
    • 注意纹理图片的尺寸要求
    • 控制线条宽度和透明度
  2. 纹理控制:

    • 纹理图片需要是竖向表达
    • 图片尺寸需要是2的n次方
    • 注意纹理填充的性能
  3. 痕迹效果:

    • 合理设置痕迹消失模式
    • 注意距离计算单位
    • 控制颜色值范围

基于 MIT 许可发布