[JavaScript知识库]ArcGIS JavaScript3 改变文字标注的位置和偏移

JavaScript3 API的官方文档

改变文字标注位置

文字标注里用到的是 LableClass类

其中的 labelPlacement 属性可以设置标注的相对位置。不过对点、线、多边形有不同的值

注意：多边形里添加文字标注只能有一个值：在几何位置中心上，所以没法通过labelPlacement属性改变多边形上文字标注位置。

• Point: “above-center”, “above-left”, “above-right”, “below-center”, “below-left”, “below-right”, “center-center”, “center-left”, “center-right”
• Polyline/Line: “above-after”, “above-along”, “above-before”, “above-start”, “above-end”, “below-after”, “below-along”, “below-before”, “below-start”, “below-end”, “center-after”, “center-along”, “center-before”, “center-start”, “center-end”
• Polygon: “always-horizontal”

需要在new LabelClass传入的对象里加入 labelPlacement 属性，并设置位置的值。如下

var json = {
    "labelExpressionInfo": {"value": "{STATE_NAME}"},
    "labelPlacement": "above-after"
};

// create a text symbol to define the style of labels
var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.font.setSize("14pt");
statesLabel.font.setFamily("arial");

//this is the very least of what should be set within the JSON  
var json = {
    "labelExpressionInfo": {"value": "{STATE_NAME}"},
    "labelPlacement": "above-after"
};

//create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
var labelClass = new LabelClass(json);
labelClass.symbol = statesLabel; // symbol also can be set in LabelClass' json
states.setLabelingInfo([ labelClass ]);
map.addLayer(states);

给标注文字设置位置偏移

如果想给多边形的文字标注设置位置偏移，可以采用如下方法：

TextSymbol 类可以设置文字的相对偏移值

这里是TextSymbol 的官方文档

该类中有两个属性：xoffset：相对于X轴的偏移， yoffset：相对于Y轴的偏移。

<Number> xoffset
x 轴上的偏移量（以像素为单位）。 
Default value: 0
对应方法: setOffset()

<Number> yoffset
y 轴上的偏移量（以像素为单位）。 
Default value: 0
对应方法: setOffset()

可以分别设置偏移，也可以用setOffset(x, y)方法共同设置偏移值。

setOffset(x, y)
设置文字的x和y轴偏移值
Return type: TextSymbol
参数:
<Number> x	必须	X 轴偏移量.
<Number> y	必须	Y 轴偏移量.
See also: xoffset, yoffset

例子：

var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.setOffset(20, 0);