Class: LineSymbol3DLayer

LineSymbol3DLayer

new LineSymbol3DLayer(options)

base/symbol/symbol3DLayer/LineSymbol3DLayer.js, line 8

三维线符号图层，用于在三维场景视图中以二维扁平样式渲染线要素（LineString），不支持二维地图视图。
渲染效果为屏幕对齐的扁平线条（始终朝向屏幕），区别于 三维管道符号图层（沿路径方向拉伸的三维管体）。
通常与 LineSymbol3D 配合使用，作为其 symbolLayers 数组中的元素。
示例如下：
[1、创建一个三维线符号图层]

Name Type Description
options Object

构造参数

Name Type Default Description
size Number 1 可选

线的宽度，单位：像素（px）。
material ColorMaterial new ColorMaterial() 可选

线的材质，控制线的颜色及透明度。
目前支持的材质类型：
ColorMaterial：纯色材质，通过设置 color 属性来改变线的颜色。
pattern LineStylePattern3D new LineStylePattern3D() 可选

线型样式，控制线的绘制模式（实线或虚线）。
仅当材质为 ColorMaterial 时生效。
通过 pattern.style 指定线型，可选值（LinePatternStyle）：
'solid'（实线）| 'dash'（短划线）| 'dot'（点线）| 'long-dash'（长划线）|
'dash-dot'（划点线）| 'long-dash-dot'（长划点线）| 'long-dash-dot-dot'（长划双点线）|
'short-dash'（短划线）| 'short-dot'（短点线）| 'short-dash-dot'（短划点线）|
'short-dash-dot-dot'（短划双点线）| 'none'（不显示）
cap LineCapType LineCapType.butt 可选

线端点（首尾两端）的形状样式。
可选值（LineCapType）：
'butt'：平头端点，线条在端点处直接截断，不超出端点坐标（默认）；
'round'：圆头端点，线条端点处以半圆形延伸；
'square'：方头端点，线条端点处以矩形延伸，延伸长度为线宽的一半。
join LineJoinType LineJoinType.miter 可选

线段拐角处的连接样式。
可选值（LineJoinType）：
'miter'：尖角连接，拐角处以锐利的尖角衔接（默认）；
'round'：圆角连接，拐角处以圆弧过渡；
'bevel'：斜切连接，拐角处以斜面切割，避免尖角过长。
marker LineStyleMarker3D null 可选

线端点处的标记（Marker）配置，
可用于在线的起点或终点处绘制箭头、圆形、菱形等装饰图元。
主要子属性：
  • style（LineMarkerStyle）：标记图元样式，可选值：'arrow'（箭头）| 'circle'（圆形）| 'square'（正方形）| 'diamond'（菱形）| 'cross'（十字）| 'x'（X形）；
  • placement（LineMarkerPlacement）：标记的放置位置，可选值：'begin'（仅起点）| 'end'（仅终点）| 'begin-end'（起点和终点，默认）；
  • color（Color）：标记的颜色，默认继承线的材质颜色。
默认不显示标记（null）。
Example

创建一个三维线符号图层

// ES5 引入方式
const { Color, Feature } = zondy
const { LineSymbol3DLayer, ColorMaterial, LineSymbol3D } = zondy.symbol
const { LineString } = zondy.geometry
const { GraphicsLayer } = zondy.layer
// ES6 引入方式
import { LineSymbol3DLayer, ColorMaterial, Color, Feature, LineString, LineSymbol3D, GraphicsLayer } from "@mapgis/webclient-common"

// 创建三维线符号图层（红色，宽度 4 像素）
const lineSymbol3DLayer = new LineSymbol3DLayer({
  // 线的宽度（像素）
  size: 4,
  // 线的颜色（RGBA，Alpha 范围 0~1）
  material: new ColorMaterial({
    color: new Color(255, 1, 1, 1)
  }),
})

// 创建三维线符号，并指定符号图层
const symbol = new LineSymbol3D({
  symbolLayers: [lineSymbol3DLayer]
})

// 构造线几何对象（坐标格式为 [经度, 纬度, 高程]）
const lineString = new LineString({
  coordinates: [
    [113, 29, 0],
    [114, 30, 0],
    [115, 30, 0],
  ],
})

// 构建要素对象，将几何与符号绑定
const feature = new Feature({
  geometry: lineString,
  symbol: symbol
})

// 创建图形图层
const layer = new GraphicsLayer({
  graphics: [],
})
map.add(layer)

// 将要素添加至图层
layer.add(feature)

Extends

Members

capLineCapType

线端点（首尾两端）的形状样式。
可选值（LineCapType）：'butt'（平头，默认）| 'round'（圆头）| 'square'（方头）

Default Value:
LineCapType.butt

idString

符号图层唯一标识

joinLineJoinType

线段拐角处的连接样式。
可选值（LineJoinType）：'miter'（尖角，默认）| 'round'（圆角）| 'bevel'（斜切）

Default Value:
LineJoinType.miter

markerLineStyleMarker3D

线端点处的标记（Marker）配置，可在线的起点或终点处绘制箭头、圆形等装饰图元。
为 null 时不显示任何标记。

Default Value:
null

materialColorMaterial

线的材质，控制线的颜色及透明度。目前仅支持 ColorMaterial 纯色材质。

patternLineStylePattern3D

线型样式，控制线的绘制模式（实线或虚线）。仅当材质为 ColorMaterial 时生效。
通过 pattern.style（LinePatternStyle）指定线型，默认为实线（'solid'）。

sizeNumber

线的宽度，单位：像素（px）。

Default Value:
1

transformMatrixArray.<Number>

图层的变换矩阵，格式为16个元素的一维数组，表示一个4x4的齐次坐标变换矩阵

typeSymbol3DLayerType

三维符号图层类型，固定值为 line，用于标识当前图层为三维线符号图层。

Methods

clone(){LineSymbol3DLayer}

base/symbol/symbol3DLayer/LineSymbol3DLayer.js, line 178

克隆当前符号图层，返回一个具有相同属性的新实例。 新实例与原实例互不影响（深拷贝内部状态）。

Returns:
Type Description
LineSymbol3DLayer 克隆后的新符号图层实例

toJSON(){Object}

base/symbol/symbol3DLayer/LineSymbol3DLayer.js, line 162

将当前符号图层序列化为普通 JSON 对象，可用于持久化存储或网络传输。 返回的对象可通过 LineSymbol3DLayer.fromJSON 反序列化还原。

Returns:
Type Description
Object 包含符号图层所有属性的 JSON 对象

LineSymbol3DLayer.fromJSON(json){LineSymbol3DLayer}

base/symbol/symbol3DLayer/LineSymbol3DLayer.js, line 153

通过 JSON 对象构造并返回一个新的 LineSymbol3DLayer 实例（静态工厂方法）。 接收的 JSON 结构应与 LineSymbol3DLayer#toJSON 的返回值一致。

Name Type Default Description
json Object {} 可选

符号图层属性的 JSON 对象
Returns:
Type Description
LineSymbol3DLayer 新的 LineSymbol3DLayer 实例