天天看点

浅谈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。

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

2.1.1. 偏移设置

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

浅谈SuperMap iClient for JavaScript中的标签使用
图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所示。

浅谈SuperMap iClient for JavaScript中的标签使用
图2-2设置label偏移前后对比图
           

2.2 geotext的使用

2.2.1背景框

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

浅谈SuperMap iClient for JavaScript中的标签使用
图2-3  背景框样式设置
           

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

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

           

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

浅谈SuperMap iClient for JavaScript中的标签使用
图2-4 背景框设置成果图
           

2.2.2角度旋转

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

浅谈SuperMap iClient for JavaScript中的标签使用
图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度(顺时针)之后的成果图。

浅谈SuperMap iClient for JavaScript中的标签使用
图2-6 设置旋转角度后成果
           

2.2.3显示遮盖

浅谈SuperMap iClient for JavaScript中的标签使用
图2-7压盖显示
           

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

strategy.isOve rLay = false;

           

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

浅谈SuperMap iClient for JavaScript中的标签使用
图2-8  遮盖设置
           

2.2.4偏移设置

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

浅谈SuperMap iClient for JavaScript中的标签使用
图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所示,为偏移后成果图。

浅谈SuperMap iClient for JavaScript中的标签使用
图2-10 设置标签偏移成果图
           

3. 小结

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

继续阅读