Skip to content

native-line渲染插件

用原生的线绘制机制,绘制线类型数据。

配置说明

js
{
  // [必填] 渲染插件对象
  renderPlugin: {
    // [必填] 插件类型,固定为line
    type: "native-line",
    // [必填] 数据配置
    dataConfig: {
      // [必填] 数据类型,固定为native-line
      type: "native-line",
      // [可选] 默认为false
      // 声明是否只包含2D数据。
      // 设为true时,VectorTileLayer会开启瓦片的模板测试(stencil test),
      // 剪切掉超过瓦片范围的数据,消除绘制时瓦片重叠部分的绘制问题
      only2D: true
    },
    // [可选] 默认为null
    // 渲染场景配置
    sceneConfig: {
      // [可选] 默认为 "one"
      // WebGL的blendEquation的src参数,可选的值有:
      // 0, 1, "src color", "one minus src color", "src alpha", "one minus dst color", "dst alpha",
      // "one minus dst alpha", "constant color", "one minus constant color", "constant alpha",
      // "one minus constant alpha", "src alpha saturate"
      blendSrc: "one",
      // [可选] 默认为 "one minus src alpha"
      // WebGL的blendEquation的dst参数,可选的值有:
      // 0, 1, "src color", "one minus src color", "src alpha", "one minus dst color", "dst alpha",
      // "one minus dst alpha", "constant color", "one minus constant color", "constant alpha",
      // "one minus constant alpha", "src alpha saturate"
      blendDst: "one minus src alpha",
      // [可选] 默认为[0, 1]
      // WebGL深度值范围
      depthRange: [0, 1],
      // 【可选],默认为null
      // feature-filter类型,符合条件的数据将不被渲染
      excludes: null
      // [可选] 默认为<=
      // WebGL深度测试函数,可选的值有 always, never, <, <=, !=, >, >=
      depthFunc: '<=',
    }
  },
  // [可选] 默认为true
  // 数据过滤条件
  filter: true,
  // 样式属性
  symbol: {
    lineColor: '#000',
    lineOpacity: 1
  }
}

filter 数据过滤条件的具体说明请点击这里

支持的数据类型

动态样式

大部分样式属性都支持 function-type 表达式,支持根据不同zoom级别或数据的属性值设置不同的样式属性。

例如以下示例,能让线的透明度在不同地图级别上由小变大:

json
{
 "lineOpacity": {
    "stops": [[1, 0.1], [20, 1]]
  }
}

支持的Symbol样式属性


lineColor

默认值:#000

String | Number[],线的颜色,可以为css颜色值或者归一化四位数组。


lineOpacity

默认值:1

Number 线的透明度,取值范围 0 - 1。

本文档已与 @maptalks/gl-layers 2026 源码核对(api-notes-vt-gl.md)