javascript openlayers 3 中带有标签或文本的图标，偏移
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17994899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
icon with label or text in openlayers 3, offset
提问by hnqoliveira
I need to add an icon and add a text on botton of the image. How can I do this ?
我需要添加一个图标并在图像的底部添加一个文本。我怎样才能做到这一点 ？
I tried with this styles, but the text is rendered in the middle of the image.
我尝试过这种样式，但文本呈现在图像的中间。
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);
回答by Christophe Roussy
I am using this code with a Canvas and it works with OL v3.0.0-beta.5:
我将此代码与 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
});
}
Also see what is now an 'experimental' documentation: http://ol3js.org/en/master/apidoc/ol.style.Text.html(edit: it was experimental in 2014 ...)
另请参阅现在是“实验性”文档：http: //ol3js.org/en/master/apidoc/ol.style.Text.html（编辑：它在 2014 年是实验性的......）
回答by Narelle
You need to move the label by using "labelYOffset".
您需要使用“labelYOffset”来移动标签。
If your graphic is 20px high, try shifting it down by 12px
如果您的图形高 20 像素，请尝试将其向下移动 12 像素
new ol.style.Text({
color: '#000',
fontFamily: 'Calibri,sans-serif',
fontSize: 12,
label:"${NAME}",
labelYOffset: -12
})
The "label" parameter draws from the NAME field in an external file. The label align parameter is usually used in a style or style map. You will need to adjust this to reflect where your data is coming from.
Note that labelXOffset and labelYoffset are not supported in the Canvas renderer.
So you need to ensure that your layer is using SVG for this to work.
eg.
“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"]
});
