[英]icon with label or text in openlayers 3, offset
我需要添加一個圖標並在圖像的底部添加一個文本。 我怎樣才能做到這一點 ?
我嘗試使用這種樣式,但文本在圖像中間呈現。
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection: ol.proj.get('EPSG:4326')
}),
style: new ol.style.Style({rules: [
new ol.style.Rule({
symbolizers: [
new ol.style.Icon({
url: 'http://127.0.0.1/app/img/imageTest.png',
opacity: 0.75,
width: 12,
height: 12
}),
new ol.style.Text({
color: '#000',
text: ol.expr.parse('i'),
fontFamily: 'Calibri,sans-serif',
fontSize: 12
})
]
})
]})
});
map.addLayer(vector);
var f = new ol.Feature({
'i': 1,
'size': 20
});
f.setGeometry( new ol.geom.Point([lon,lat]) );
var features = new Array();
features.push(f);
vector.addFeatures(features);
我在Canvas中使用此代碼,它適用於OL v3.0.0-beta.5:
function getTextStyle(text, offsetX) {
return new ol.style.Text({
fill : new ol.style.Fill({
color : '#330'
}),
stroke : new ol.style.Stroke({
color : '#fff',
width : 4
}),
text : text,
font : '12px Verdana',
offsetX : offsetX ? offsetX : 0,
offsetY : 12
});
}
另請參閱現在的“實驗性”文檔: http : //ol3js.org/en/master/apidoc/ol.style.Text.html (編輯:它在2014年進行了實驗......)
您需要使用“labelYOffset”移動標簽。
如果您的圖形高20px,請嘗試將其向下移動12px
new ol.style.Text({
color: '#000',
fontFamily: 'Calibri,sans-serif',
fontSize: 12,
label:"${NAME}",
labelYOffset: -12
})
“label”參數從外部文件中的NAME字段中提取。 label align參數通常用在樣式或樣式映射中。 您需要對其進行調整以反映數據的來源。
請注意,Canvas渲染器不支持labelXOffset和labelYoffset。 因此,您需要確保您的圖層使用SVG才能正常工作。 例如。
var point = new OpenLayers.Layer.Vector("GeoJSON", {
strategies: [new OpenLayers.Strategy.Fixed()],
styleMap: mystyle,
protocol: new OpenLayers.Protocol.HTTP({
url: "kml/my.geojson",
format: new OpenLayers.Format.GeoJSON()
}),
renderers: ["SVG"]
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.