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);
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值