文本符号用于定义用于在 2D MapView 中的 FeatureLayer、CSVLayer、Sublayer 和 StreamLayer 上显示标注的图形。如果几何类型是 Point 或 Multipoint,则文本符号也可用于定义 Graphic 的符号属性。使用此类,您可更改标注图形的 color、font、halo 和其他属性。
TextSymbol 可用于标记 Point、Polyline 或 Polygon 要素。下图描绘了一个多边形 FeatureLayer,它使用 TextSymbol 来标记其要素。
let textSymbol = {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "black",
haloSize: "1px",
text: "You are here",
xoffset: 3,
yoffset: 3,
font: { // autocasts as new Font()
size: 12,
family: "Josefin Slab",
weight: "bold"
}
};
构造函数
属性概述
名称 | 类型 | 描述 | 类 |
---|---|---|---|
Number | 文本的角度 更多详情 | TextSymbol | |
Color | 标注边界框的背景颜色。 更多详情 | TextSymbol | |
Color | 标注边界框的边框颜色。 更多详情 | TextSymbol | |
Number | 标注边界框的边框大小或宽度。 更多详情 | TextSymbol | |
Color | 符号的颜色。 更多详情 | Symbol | |
String | 类的名称。 更多详情 | Accessor | |
字体 | 用于设置文本样式的字体。 更多详情 | TextSymbol | |
Color | 文本符号光晕的颜色。 更多详情 | TextSymbol | |
Number | 文本符号光晕的大小 (以磅为单位)。 更多详情 | TextSymbol | |
String | 调整多行文本的水平对齐方式。 更多详情 | TextSymbol | |
Boolean | 指示是否需要调整文本字符串中字符之间的间距。 更多详情 | TextSymbol | |
Number | 每行文本之间的空间高度。 更多详情 | TextSymbol | |
Number | 每行文本的最大长度 (以磅为单位)。 更多详情 | TextSymbol | |
Boolean | 确定文本字符串中的每个字符是否旋转。 更多详情 | TextSymbol | |
String | 要在视图中显示的文本字符串。 更多详情 | TextSymbol | |
String | 对于 TextSymbol,类型总是 "text"。更多详情 | TextSymbol | |
String | 调整文本的垂直对齐方式。 更多详情 | TextSymbol | |
Number | x 轴上的偏移量 (以磅为单位)。 更多详情 | TextSymbol | |
Number | y 轴上的偏移量 (以磅为单位)。 更多详情 | TextSymbol |
属性详细信息
-
angle Number
-
文本的角度
0
表示水平,且角度顺时针移动。已知限制
3D SceneViews 目前不支持此属性。
- 默认值:0
示例const textSymbol = { type: "text", // autocasts as new TextSymbol() angle: 90, color: "green", font: { // autocast as new Font() family: "Just Another Hand", size: 12 }, haloColor: "black", haloSize: 1, horizontalAlignment: "right", verticalAlignment: "bottom" };
-
标注边界框的背景颜色。仅 MapImageLayer 支持此属性。
-
标注边界框的边框颜色。仅 MapImageLayer 支持此属性。
-
borderLineSize Number
-
标注边界框的边框大小或宽度。仅 MapImageLayer 支持此属性。
-
符号的颜色。这可以通过 rgb(a) 值数组、命名字符串、十六进制字符串或 hsl(a) 字符串、具有
r
,g
,b
和a
属性的对象或 Color 对象进行自动转换。- 默认值:black
示例// CSS color string symbol.color = "dodgerblue";
// HEX string symbol.color = "#33cc33";
// array of RGBA values symbol.color = [51, 204, 51, 0.3];
// object with rgba properties symbol.color = { r: 51, g: 51, b: 204, a: 0.7 };
-
起始版本:GeoScene Maps SDK for JavaScript 4.7
-
类的名称。声明的类名称格式化为
geoscene.folder.className
。
-
用于设置文本样式的字体。此属性允许开发人员设置字体系列、修饰、大小、样式和粗细属性。
请参阅标注指南页面,了解更多信息和已知限制。
已知限制
- 可用的 Font.family 属性值取决于您使用的是 2D MapView 或 3D SceneView。
- 另请参阅
示例let textSymbol = { type: "text", // autocasts as new TextSymbol() text: "Science of Where", font: { // autocasts as new Font() family: "Merriweather", size: 12, style: "italic", weight: "bold" } };
-
文本符号光晕的颜色。要在 TextSymbol 中包含光晕,还必须在 haloSize 中设置光晕的大小。
已知限制
- 亚像素光晕 (如 1.25px 等小数) 在各种浏览器中呈现不一致。
示例// CSS color string symbol.haloColor = "dodgerblue";
// HEX string symbol.haloColor = "#33cc33";
// array of RGBA values symbol.haloColor = [51, 204, 51, 0.3];
// object with rgba properties symbol.haloColor = { r: 51, g: 51, b: 204, a: 0.7 };
-
文本符号光晕的大小 (以磅为单位)。此值可以是自动转换的,其字符串以磅或像素表示大小 (例如
12px
)。要在 TextSymbol 中包含光晕,还必须在 haloColor 中设置颜色。已知限制
- 亚像素光晕 (如 1.25px 等小数) 在各种浏览器中呈现不一致。
- 光晕大小不应比文本大小大 1/4。例如,如果您的文本大小为 12,则光晕大小不应大于 3。
示例// haloSize in points symbol.haloSize = 1;
// haloSize in pixels symbol.haloSize = "2px";
// haloSize in points symbol.haloSize = "1pt";
-
horizontalAlignment String
-
调整多行文本的水平对齐方式。
已知限制
- 此属性仅在 TextSymbol 不用于标注目的时适用。标注的
horizontalAlignment
是从 labelPlacement 值推断出来的。
可能值:"left"|"right"|"center"
- 默认值:"center"
- 此属性仅在 TextSymbol 不用于标注目的时适用。标注的
-
kerning Boolean
-
指示是否需要调整文本字符串中字符之间的间距。
- 默认值:true
-
lineHeight Number起始版本:GeoScene Maps SDK for JavaScript 4.15
-
每行文本之间的空间高度。仅适用于多行文本。
该属性可以看作是默认值 1.0 的乘数 (例如,值 2.0 将是默认高度的两倍)。可能值的范围是:0.1 - 4.0。如果指定值 0,则将使用默认值 1.0。
- 默认值:1.0
示例const textSymbol = { type: "text", // autocasts as new TextSymbol() color: "blue", haloColor: "white", haloSize: 1, lineHeight: 1.5 };
-
起始版本:GeoScene Maps SDK for JavaScript 4.15
-
每行文本的最大长度 (以磅为单位)。此值可以是自动转换的,其字符串以磅或像素表示大小 (例如
72px
)。默认值为 192 磅。可能值的范围是:32px - 512px。
如果文本超出
lineWidth
值,则如果可能,该行将在超出限制的文本之前的空白处中断,并创建一个新行。已知限制
- 3D SceneViews 目前不支持此属性。
- 默认值可能会在未来版本中更改。
- 默认值:192
示例const textSymbol = { type: "text", // autocasts as new TextSymbol() color: "blue", haloColor: "white", haloSize: 1, lineWidth: 200 };
-
rotated Boolean
-
确定文本字符串中的每个字符是否旋转。
已知限制
3D SceneViews 目前不支持此属性。
- 默认值:false
-
text String
-
要在视图中显示的文本字符串。长文本字符串将被分成多行。线的长度由 lineWidth 属性控制。要手动创建新行,请使用
\n
转义字符。已知限制
此属性仅在 TextSymbol 用于定义 Graphic 的符号属性时适用,而不是用于标记目的。
- 另请参阅
示例symbol.text = "You are here";
symbol.text = "Wish you were \n here";
-
type Stringreadonly
-
对于 TextSymbol,类型总是 "text"。
-
verticalAlignment String
-
调整文本的垂直对齐方式。
已知限制
- 此属性仅在 TextSymbol 不用于标注目的时适用。标注的
verticalAlignment
是从 labelPlacement 值推断出来的。
可能值:"baseline"|"top"|"middle"|"bottom"
- 默认值:"baseline"
- 此属性仅在 TextSymbol 不用于标注目的时适用。标注的
-
x 轴上的偏移量 (以磅为单位)。此值可以是自动转换的,其字符串以磅或像素表示大小 (例如
12px
)。已知限制
3D SceneViews 目前不支持此属性。
- 默认值:0
示例// xoffset in points symbol.xoffset = 3;
// xoffset in pixels symbol.xoffset = "6px";
// xoffset in points symbol.xoffset = "3pt";
-
y 轴上的偏移量 (以磅为单位)。此值可以是自动转换的,其字符串以磅或像素表示大小 (例如
12px
)。已知限制
3D SceneViews 目前不支持此属性。
- 默认值:0
示例// yoffset in points symbol.yoffset = 3;
// yoffset in pixels symbol.yoffset = "6px";
// yoffset in points symbol.yoffset = "3pt";
方法概述
名称 | 返回值类值 | 描述 | 类 |
---|---|---|---|
添加一个或多个与对象的生命周期相关联的句柄。 更多详情 | Accessor | ||
TextSymbol | 创建 symbol 的深度克隆。 更多详情 | TextSymbol | |
* | 创建此类的新实例并使用从 GeoScene 产品生成的 JSON 对象值对其进行初始化。 更多详情 | Symbol | |
Boolean | 如果存在指定的句柄组,则返回 true。 更多详情 | Accessor | |
移除对象拥有的句柄组。 更多详情 | Accessor | ||
Object | 将此类的实例转换为 GeoScene Portal JSON 表示。 更多详情 | Symbol |
方法详细说明
-
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(){TextSymbol}
-
创建 symbol 的深度克隆。
返回类型 描述 TextSymbol 调用此方法的对象的深度克隆。 示例// Creates a deep clone of the graphic's symbol let symLyr = graphic.symbol.clone();
-
fromJSON(json){*}static
-
创建此类的新实例并使用从 GeoScene 产品生成的 JSON 对象值对其进行初始化。传入到输入
json
参数的对象通常来自对 REST API 中查询操作的响应或来自另一个 GeoScene 产品的 toJSON() 方法。有关何时以及如何使用该函数的详细信息和示例,请参阅指南中的使用 fromJSON() 主题。参数json ObjectGeoScene 格式实例的 JSON 表示。有关各种输入 JSON 对象的结构示例,请参阅 GeoScene REST API 文档。
返回类型 描述 * 返回该类的新实例。
-
起始版本: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");
-
将此类的实例转换为 GeoScene Portal JSON 表示。有关详细信息,请参阅使用 fromJSON() 指南主题。
返回类型 描述 Object 此类实例的 GeoScene Portal JSON 表示。