浅谈SuperMap iClient for JavaScript中的标签使用

---

1. 引言

对地图上设置标签通常有两种方式，第一种是使用SuperMap.Feature.Vector中的属性label，第二种是SuperMap.Geometry.GeoText中对geotext设置。在实际使用标签时，请务必根据具体情况，选择合理的标签进行使用，如果仅仅对少量的对象进行标签的设置，可采取label的方式。但若对标签设置要求较高，需要做的更美观，则需要设置更多的属性信息，建议选择Geotext来进行设置。具体的使用也可多参考帮助文档。

2. 标签的使用

在日常使用标签时，经常对标签的各种设置不是很了解，比如：背景框设置、角度旋转、遮盖不显示等问题。现在就SuperMap.Feature.Vector 中的属性label和SuperMap.Geometry.GeoText在使用中遇到的问题作相关介绍。

2.1 label的使用
现就label和geotext经常使用的属性做一个对比说明，见表2-1。

2.1.1. 偏移设置
在label中可以设置标签的X、Y偏移，具体的属性设置首先参看帮助文档（见图2-1）。

                               图2-1 label偏移量设置

关于如何在代码中设置，参见下列代码展示。注意，该偏移量的单位是像素值。

var circleVector1 = new SuperMap.Feature.Vector(circleP1);                    circleVector1.style = {                        strokeColor: "#CAFF70",                        illColor: "#46A3FF",                        strokeWidth: 2,                        fillOpacity: 0.8,                        label: "西方\nWestern",                        labelXOffset: 30,                        labelYOffset: 20,                        fontColor: "#FFFF6F"                    };

未设置偏移量时，label位置在中心，设置后向东北方向偏移，见图2-2所示。

                        图2-2设置label偏移前后对比图

2.2 geotext的使用

2.2.1背景框
首先要使用背景框，需要设置stroke为true，接着可对背景框的描边颜色，透明度及宽度进行设置，具体属性设置如图2-3所示。

                               图2-3  背景框样式设置

如下代码所示，设置了背景框描边颜色，背景框默认不透明。

strategy.style = {               fontColor: "#FF7F00",               fontWeight: "bolder",               fontSize: "14px",               fill: true,               fillColor: "#FFFFFF",               fillOpacity: 1,               stroke: true,               strokeColor: "#8B7B8B"                };

从图2-4的成果图可以看出，与label相比多了不透明矩形背景框。

                         图2-4 背景框设置成果图

2.2.2角度旋转
通过设置labelRotation，可以设置旋转角度。如图2-5对旋转角度设置具体的值。

                             图2-5 旋转角度设置

在代码的最后一行设置了旋转角度为20度。

strategy.style = {                    fontColor: "#FF7F00",                    fontWeight: "bolder",                    fontSize: "14px",                    fill: true,                    fillColor: "#FFFFFF",                    fillOpacity: 1,                    stroke: true,                    strokeColor: "#8B7B8B",                    labelRotation: 20                };

图2-6为设置了旋转角度为20度（顺时针）之后的成果图。

                          图2-6 设置旋转角度后成果

2.2.3显示遮盖

                                 图2-7压盖显示

在设置了isOverLay后（如图2-7），显示了压盖对象。一般来说为了更好的显示标签，都会默认隐藏压盖的标签。

strategy.isOve rLay = false;

设置为false后结果如图2-8所示。

                               图2-8  遮盖设置

2.2.4偏移设置
Geotext中也可以设置偏移量，具体设置见图2-9。

                              图2-9标签偏移

在最后两行代码中设置了标签偏移。

strategy.style = {                    fontColor: "#FF7F00",                    fontWeight: "bolder",                    fontSize: "14px",                    fill: true,                    fillColor: "#FFFFFF",                    fillOpacity: 1,                    stroke: true,                    strokeColor: "#8B7B8B",                    labelRotation: 20,                    labelXOffset:20,                    labelYOffset:100                };

设置标签偏移后，明显看到标签东北方向偏移。如图2-10所示，为偏移后成果图。

                             图2-10 设置标签偏移成果图

3. 小结
在地图中设置标签时具体的属性值需根据不同的实际情况，进行相应的设置，在今后的运用中若遇到其他相关问题，本文还将作继续的更新，望持续关注。