[英]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.