TextSymbol

AMD: require(["geoscene/symbols/TextSymbol"], (TextSymbol) => { /* code goes here */ });
ESM: import TextSymbol from "@geoscene/core/symbols/TextSymbol";
类: geoscene/symbols/TextSymbol
继承于:TextSymbol Symbol Accessor
起始版本:GeoScene Maps SDK for JavaScript 4.0

文本符号用于定义用于在 2D MapView 中的 FeatureLayerCSVLayerSublayerStreamLayer 上显示标注的图形。如果几何类型是 PointMultipoint,则文本符号也可用于定义 Graphic 的符号属性。使用此类,您可更改标注图形的 colorfonthalo 和其他属性。

TextSymbol 可用于标记 PointPolylinePolygon 要素。下图描绘了一个多边形 FeatureLayer,它使用 TextSymbol 来标记其要素。

text-sample

另请参阅
示例
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"
  }
};

构造函数

new TextSymbol(properties)
参数
properties Object
optional

有关可能传递给构造函数的所有属性的列表,请参见属性

属性概述

可以设置、检索或侦听任何属性。请参阅使用属性主题。
显示继承属性 隐藏继承属性
名称 类型 描述
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"
};
backgroundColor Colorautocast
自动转换自 Object|Number[]|String

标注边界框的背景颜色。仅 MapImageLayer 支持此属性。

borderLineColor Colorautocast
自动转换自 Object|Number[]|String

标注边界框的边框颜色。仅 MapImageLayer 支持此属性。

borderLineSize Number

标注边界框的边框大小或宽度。仅 MapImageLayer 支持此属性。

自动转换自 Object|Number[]|String

符号的颜色。这可以通过 rgb(a) 值数组、命名字符串、十六进制字符串或 hsl(a) 字符串、具有 r, g, ba 属性的对象或 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
};
declaredClass Stringreadonly inherited
起始版本:GeoScene Maps SDK for JavaScript 4.7

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

用于设置文本样式的字体。此属性允许开发人员设置字体系列、修饰、大小、样式和粗细属性。

请参阅标注指南页面,了解更多信息和已知限制。

已知限制

另请参阅
示例
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"
  }
};
haloColor Colorautocast
自动转换自 Object|number[]|string

文本符号光晕的颜色。要在 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
};
自动转换自 Number|String

文本符号光晕的大小 (以磅为单位)。此值可以是自动转换的,其字符串以磅或像素表示大小 (例如 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"
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
};
lineWidth Numberautocast
自动转换自 Number|String
起始版本: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"
自动转换自 Number|String

x 轴上的偏移量 (以磅为单位)。此值可以是自动转换的,其字符串以磅或像素表示大小 (例如 12px)。

已知限制

3D SceneViews 目前不支持此属性。

默认值:0
示例
// xoffset in points
symbol.xoffset = 3;
// xoffset in pixels
symbol.xoffset = "6px";
// xoffset in points
symbol.xoffset = "3pt";
自动转换自 Number|String

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 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 表示。

您的浏览器不再受支持。请升级您的浏览器以获得最佳体验。请参阅浏览器弃用帖子以获取更多信息