IconSymbol3DLayer

IconSymbol3DLayer 用于在 SceneView 中使用具有 PointSymbol3D 的平面 2D 图标 (例如，圆形) 来渲染点几何。MapView 不支持 3D 符号。面要素也可使用 IconSymbol3DLayers 进行渲染，但在此情况下，图标符号图层必须包含在 PolygonSymbol3D 中，而不是 PointSymbol3D 中。

图标的形状在 resource 属性中设置，颜色在 material 属性中设置。大小可以使用 size 属性进行定义，以点或像素为单位。还可通过向使用此符号图层的任何 Renderer 添加大小和/或颜色视觉变量来对图标颜色和大小进行数据驱动。

必须将 IconSymbol3DLayers 添加到 PointSymbol3D 或 PolygonSymbol3D 符号的 symbolLayers 属性中。可在单个符号中使用多个符号图层。

由于图标符号图层是在屏幕空间 (像素/点) 中定义的，因此可以将其叠加在地形上，也可在视图中标示。广告牌图标允许符号始终面向用户，只要它在 camera 中可见即可。这在倾斜视图上尤其明显。叠加图标将符号覆盖在地形表面上。

叠加图标	广告牌图标

叠加和广告牌图标的功能可在 FeatureLayer 的 elevationInfo 属性中控制。将 mode 设置为 on-the-ground 会使图标悬置，而将模式设置为 relative-to-ground 会以广告牌形式显示图标。

请参阅 Symbol3DLayer 和 Symbol3D 以阅读有关 3D 符号、符号图层及其相互关系的更多常规信息。

另请参阅

• 符号设计器

• 示例 - 使用多个变量可视化主题要素 (2D)

• 示例 - 平面 vs. 立体 3D 符号图层

• Symbol3DLayer
• Symbol3D
• 渲染器

• GeoScene 博客 - 使用图标、线和填充符号

示例

let symbol = {
  type: "point-3d",  // autocasts as new PointSymbol3D()
  symbolLayers: [{
    type: "icon",  // autocasts as new IconSymbol3DLayer()
    size: 8,  // points
    resource: { primitive: "circle" },
    material: { color: "red" }
  }]
};

构造函数

new IconSymbol3DLayer(properties)

参数

properties Object optional 有关可能传递给构造函数的所有属性的列表，请参见属性。

属性概述

属性详细信息

anchor String

图标相对于几何的位置。

可能值："center"|"left"|"right"|"top"|"bottom"|"top-left"|"top-right"|"bottom-left"|"bottom-right"|"relative"

默认值：center

anchorPosition Object

起始版本：GeoScene Maps SDK for JavaScript 4.11

定义相对于图标中心的 anchor。将其指定为图标尺寸的比率。例如，值为 { x: 0, y: 0 } 表示图标的中心，而值 { x: -0.5, y: -0.5 } 表示图标的左上角与要素几何重合。

仅当 anchor 设置为 relative 时，此属性才适用。

属性

x Number 定义相对于图标宽度的位置的值。

y Number 定义相对于图标高度的位置的值。

示例

symbolLayer.anchor = "relative";
symbolLayer.anchorPosition = { x: 0, y: 0.5 }; // equivalent to `anchor: "bottom"`

symbolLayer.anchor = "relative";
symbolLayer.anchorPosition = { x: 1.5, y: 1 }; // the anchor can be placed outside of the icon

declaredClass Stringreadonly inherited

起始版本：GeoScene Maps SDK for JavaScript 4.7

类的名称。声明的类名称格式化为 geoscene.folder.className。

material Objectautocast

用于遮蔽图标的材料。此属性定义图标的颜色。

属性

color Color optional 默认值：white 自动转换自 Object|Number[]|String 图标的填充色。如果图标使用图像作为资源，则图像的每个像素将乘以此颜色。这可以通过 rgb(a) 值数组、命名字符串、十六进制字符串或 hsl(a) 字符串、具有 r, g, b 和 a 属性的对象或 Color 对象进行自动转换。

示例

// CSS color string
symbolLayer.material = {
  color: "dodgerblue"
};

// HEX string
symbolLayer.material = {
  color: "#33cc33";
}

// array of RGBA values
symbolLayer.material = {
  color: [51, 204, 51, 0.3];
}

// object with rgba properties
symbolLayer.material = {
  color: {
    r: 51,
    g: 51,
    b: 204,
    a: 0.7
  }
};

outline Objectautocast

图标的轮廓。此对象的颜色属性可直接修改使用 cross 或 x 基元定义的 IconSymbol3DLayer 的整体颜色。

属性

color Color optional 默认值：black 自动转换自 Object|Number[]|String 轮廓的颜色。这可以通过 rgb(a) 值数组、命名字符串、十六进制字符串或 hsl(a) 字符串、具有 r, g, b 和 a 属性的对象或 Color 对象进行自动转换。

size Number optional 默认值：1.125 自动转换自 Number|String 轮廓的宽度，以磅为单位。此值可以是自动转换的，其字符串以磅或像素表示大小 (例如 12px)。

示例

symbolLayer.outline = {
  color: "blue",
  size: "0.5px"
};

resource Object

用于可视化要素的形状 (primitive) 或图像 URL (href) 。如果两个属性均存在，则优先 href 并忽略 primitive。

属性

primitive String optional 使用内置形状。有关可能值列表，请参见下表。 值 描述 circle square cross x kite triangle

href String optional 图像的 URL 或数据 URI。如果外部资源是 SVG，则 SVG 根节点必须具有设置的宽度和高度，否则它将无法以正确的大小呈现。

默认值：{ primitive: "circle" }

示例

symbolLayer.resource = {
  primitive: "cross"
};

size Numberautocast

自动转换自 Number|String

图标的大小，以磅为单位。此值可以是自动转换的，其字符串以磅或像素表示大小 (例如 12px)。

默认值：12

示例

// size in points
symbolLayer.size = 14;

// size in pixels
symbolLayer.size = "20px"; // autocasts to number

// size in points
symbolLayer.size = "14pt"; // autocasts to number

type Stringreadonly

符号类型。

对于 IconSymbol3DLayer，类型总是 "icon"。

方法概述

方法详细说明

addHandles(handleOrHandles, groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时，将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

// Handle gets removed when the object is destroyed.
this.addHandles(handle);

参数

handleOrHandles WatchHandle|WatchHandle[] 对象销毁后，标记为要移除的句柄。

groupKey * optional 标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键，则句柄将被添加到默认组。

clone(){IconSymbol3DLayer}

创建符号图层的深度克隆。

返回

类型	描述
IconSymbol3DLayer	调用此方法的对象的深度克隆。

示例

// Creates a deep clone of the graphic's first symbol layer
let symLyr = graphic.symbol.symbolLayers.getItemAt(0).clone();

fromJSON(json){*}static

创建此类的新实例并使用从 GeoScene 产品生成的 JSON 对象值对其进行初始化。传入到输入 json 参数的对象通常来自对 REST API 中查询操作的响应或来自另一个 GeoScene 产品的 toJSON() 方法。有关何时以及如何使用该函数的详细信息和示例，请参阅指南中的使用 fromJSON() 主题。

参数

json Object GeoScene 格式实例的 JSON 表示。有关各种输入 JSON 对象的结构示例，请参阅 GeoScene REST API 文档。

返回

类型	描述
*	返回该类的新实例。

hasHandles(groupKey){Boolean}inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组，则返回 true。

参数

groupKey * optional 组键。

返回

类型	描述
Boolean	如果存在指定的句柄组，则返回 true。

示例

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

removeHandles(groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数

groupKey * optional 要移除的组键或组键的数组或集合。

示例

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

toJSON(){Object}inherited

将此类的实例转换为 GeoScene Portal JSON 表示。有关详细信息，请参阅使用 fromJSON() 指南主题。

返回

类型	描述
Object	此类实例的 GeoScene Portal JSON 表示。