Openlayers 3特性标签背景
我们正在使用OpenLayers 3，并希望向我们的特性添加标签。为了提高可见性，我们还想为这些标签添加一个背景。
我看过：http://openlayers.org/en/v3.4.0/examples/vector-labels.html，但除了增加透支宽度之外，找不到其他解决方案。但这导致了bumby的背景，似乎更像是对我的问题的一个黑客攻击。
遗憾的是，我们不能为标签使用另一层，因为该功能必须与相应的标签处于相同的级别，这样您就可以随时看到一个带有标签的功能，以防它与另一个功能重叠(不仅仅是标签与特性重叠)。
所以我想问你是否知道如何设置标签的背景而不使用透支或单独的图层？
事先致以最良好的问候和感谢
巴斯蒂
更新描述：我们想在地图上渲染汽车。这些汽车应该有一个矩形背景的标签(在一个颜色，我们可以改变)的文本，以便用户可以更容易地阅读。此外，标签应该与相应的汽车在同一水平上。这背后的原因是，如果汽车是相互重叠的，标签也应该是，应该永远有一辆汽车的标签顶部。我希望这个描述能让事情更清楚一些。
回答 1
Stack Overflow用户
发布于 2016-08-16 14:17:03
通过在文本元素后面使用SVG形状并用颜色填充形状，我设法解决了一个类似的问题，以达到同样的效果。
为了匹配文本元素的大小，我不得不调整背景形状的大小，这并不像我所希望的那样简单。
主要街区如下：
- SVG项没有背景样式，
text元素上的text属性只会更改文本颜色，而不是其背景色。这就是为什么我必须首先使用另一种形状。 - 当使用SVG元素作为图像元素的源时，出于安全原因，它中的所有javascript代码都会被忽略。因此，您不能动态检查/更改大小。
- SVG元素中的形状和路径不是DOM的一部分，因此您不能使用JavaScript或CSS访问或样式它们。
我做的第一件事就是使用下面的代码--我在Stackoverflow上找到的代码--获取呈现文本的宽度(以像素为单位)：
/* Get the rendered size of a text, in pixels */
/* _text: "Blah blah" */
/* _fontStyle: "Normal 12px Arial" */
function getTextWidth ( _text, _fontStyle ) {
var canvas = undefined,
context = undefined,
metrics = undefined;
canvas = document.createElement( "canvas" )
context = canvas.getContext( "2d" );
context.font = _fontStyle;
metrics = context.measureText( _text );
return metrics.width;
}然后，我在我的另一个函数中使用它，它生成标记及其标签：
...
labelFontStyle = "Normal 12px Arial";
labelWidth = getTextWidth( _text, labelFontStyle );
labelWidth = labelWidth + 10;
iconSVG = '<svg ' +
'version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
'x="0px" y="0px" width="' + labelWidth + 'px" height="16px" ' +
'viewBox="0 0 ' + labelWidth + ' 16" enable-background="new 0 0 ' + labelWidth + ' 16" xml:space="preserve">'+
'<rect x="0" y="0" width="' + labelWidth + '" height="16" stroke="#000000" fill="#DEEFAE" stroke-width="2"></rect>' +
'<text x="5" y="13" fill="#000000" font-family="Arial" font-size="12" font-weight="normal">' + _text + '</text>' +
'</svg>';
imageElement = new Image();
imageElement.src = 'data:image/svg+xml,' + escape( iconSVG );
iconStyle = new ol.style.Style({
"image": new ol.style.Icon({
"img": imageElement,
"imgSize":[labelWidth, 66],
"anchor": [0.5, 0.5],
"offset": [0, -50]
})
});
feature = new ol.Feature({
"geometry": new ol.geom.Point(
ol.proj.fromLonLat( [_longitude, _latitude] )
)
});
feature.setStyle( iconStyle );
return feature;这是我最初发布的https://gis.stackexchange.com/a/203435/12100的答案
https://stackoverflow.com/questions/29695424
复制相似问题
腾讯云开发者
