天天看點

淺談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. 小結

在地圖中設定标簽時具體的屬性值需根據不同的實際情況,進行相應的設定,在今後的運用中若遇到其他相關問題,本文還将作繼續的更新,望持續關注。

繼續閱讀