new IconSymbol3DLayer(options)
三维图标符号图层，用于在三维场景中以图标（贴图或内置图元）的形式渲染点要素，仅支持三维场景视图，不支持二维地图视图。
图标始终面向屏幕（公告板模式），并保持竖直朝上，适用于 POI 标注、兴趣点图标等场景。
支持两种资源来源：
① 通过 resource.href 指定网络图片（PNG/JPEG/base64/Image 对象）；
② 通过 resource.primitive 使用系统内置图元（circle、square、cross 等）。
通常与 PointSymbol3D 配合使用，作为其 symbolLayers 数组中的元素。
示例如下：
[1、使用网络图片资源创建三维图标符号图层]
[2、使用系统内置图元创建三维图标符号图层]
| Name | Type | Description | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
构造参数
|
Examples
// ES5 引入方式
const { Color, Feature } = zondy
const { IconSymbol3DLayer, IconResource, PointSymbol3D } = zondy.symbol
const { Point } = zondy.geometry
const { GraphicsLayer } = zondy.layer
// ES6 引入方式
import { IconSymbol3DLayer, IconResource, Color, Point, PointSymbol3D, Feature, GraphicsLayer } from "@mapgis/webclient-common"
// 创建三维图标符号图层（使用网络图片）
const iconSymbol3DLayer = new IconSymbol3DLayer({
// 指定网络图片地址（支持 URL、base64、Image 对象）
resource: new IconResource({
href: 'https://example.com/icon.png'
}),
// 图标显示大小（像素）
size: 50
})
// 创建三维点符号，将图标图层加入 symbolLayers
const symbol = new PointSymbol3D({
symbolLayers: [iconSymbol3DLayer]
})
// 构造点几何对象（经度、纬度、高程）
const point = new Point({
coordinates: [114, 30, 600],
})
// 构建要素对象
const feature = new Feature({
geometry: point,
symbol: symbol
})
// 创建图形图层并添加至地图
const layer = new GraphicsLayer({
graphics: [],
})
map.add(layer)
// 将要素添加至图层
layer.add(feature)// ES5 引入方式
const { Color, Feature } = zondy
const { IconSymbol3DLayer, IconResource, ColorMaterial, PointSymbol3DOutline, PointSymbol3D } = zondy.symbol
const { Point } = zondy.geometry
const { GraphicsLayer } = zondy.layer
// ES6 引入方式
import { IconSymbol3DLayer, IconResource, ColorMaterial, PointSymbol3DOutline, Color, Point, PointSymbol3D, Feature, GraphicsLayer } from "@mapgis/webclient-common"
// 创建三维图标符号图层（使用内置圆形图元，红色填充，白色外边线）
const iconSymbol3DLayer = new IconSymbol3DLayer({
// 使用系统内置图元：圆形
resource: new IconResource({
primitive: 'circle'
}),
// 图标显示大小（像素）
size: 50,
// 填充颜色（红色）
material: new ColorMaterial({
color: new Color(255, 0, 0, 1)
}),
// 外边线样式（白色，宽度 2 像素）
outline: new PointSymbol3DOutline({
color: new Color(255, 255, 255, 1),
size: 2
})
})
// 创建三维点符号
const symbol = new PointSymbol3D({
symbolLayers: [iconSymbol3DLayer]
})
// 构造点几何对象（经度、纬度、高程）
const point = new Point({
coordinates: [114, 30, 600],
})
// 构建要素对象
const feature = new Feature({
geometry: point,
symbol: symbol
})
// 创建图形图层并添加至地图
const layer = new GraphicsLayer({
graphics: [],
})
map.add(layer)
// 将要素添加至图层
layer.add(feature)Extends
Members
-
anchorAnchorType
-
锚点对齐方式，即图标相对于要素坐标点的对齐位置。
可选值：'center'|'left'|'right'|'top'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'relative'- Default Value: AnchorType.center
anchorPositionPoint
图标在屏幕空间的像素偏移量（相对于锚点位置的二维偏移），格式为 [dx, dy]，单位：像素。
仅当 anchor 为 'relative' 时，该值作为归一化偏移（范围 0~1）解释
- Default Value: new Point({ coordinates: [0, 0] })
idString
符号图层唯一标识
materialColorMaterial
图标的材质颜色，目前支持 ColorMaterial（纯色材质）。
当使用网络图片资源时，作为覆盖色叠加于图片上（可通过 alpha 控制透明度）；
当使用系统内置图元时，作为图元的填充色
outlinePointSymbol3DOutline
图标外边线样式（颜色与宽度），仅当使用系统内置图元（resource.primitive）时生效，对网络图片资源无效
resourceIconResource
图标资源。设置 href 使用外部图片，设置 primitive 使用系统内置图元；
若均未设置，默认使用内置圆形图元（'circle'）
sizeNumber
图标的显示大小，单位：像素
- Default Value: 12
transformMatrixArray.<Number>
图层的变换矩阵，格式为16个元素的一维数组，表示一个4x4的齐次坐标变换矩阵
三维符号图层类型，固定为 Symbol3DLayerType.icon
Methods
-
clone(){IconSymbol3DLayer}
base/symbol/symbol3DLayer/IconSymbol3DLayer.js, line 225 -
克隆当前图层，返回一个具有相同属性的新实例（深拷贝）。 新实例与原实例互不影响。
Returns:
Type Description IconSymbol3DLayer 克隆后的新 IconSymbol3DLayer 实例 -
toJSON(){Object}
base/symbol/symbol3DLayer/IconSymbol3DLayer.js, line 207 -
将当前实例序列化为普通 JSON 对象，可用于持久化存储或网络传输。 返回的对象可通过
IconSymbol3DLayer.fromJSON反序列化还原。Returns:
Type Description Object 包含图层所有属性的 JSON 对象 -
IconSymbol3DLayer.fromJSON(json){IconSymbol3DLayer}
base/symbol/symbol3DLayer/IconSymbol3DLayer.js, line 198 -
通过 JSON 数据构造并返回一个新的 IconSymbol3DLayer 实例（静态工厂方法）。 接收的 JSON 结构应与
IconSymbol3DLayer#toJSON的返回值一致。Name Type Description jsonObject 符号图层属性的 JSON 对象
Returns:
Type Description IconSymbol3DLayer 新的 IconSymbol3DLayer 实例