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