Openlayers 3功能標籤背景

我們使用OpenLayers 3並希望爲我們的功能添加標籤。爲了提高可視性，我們還希望爲這些標籤添加背景。Openlayers 3功能標籤背景

我看了看：http://openlayers.org/en/v3.4.0/examples/vector-labels.html 但找不到另一個解決方案，而不是增加透支寬度。但是這會導致笨蛋背景，似乎更像是對我的問題的破解。

很遺憾，我們無法爲標籤使用其他圖層，因此該功能必須與相應標籤處於同一級別，以便您可以一直使用標籤查看某個功能，以防與其他功能重疊（不僅標籤與特徵重疊）。

所以我想問你是否知道一種方法來設置標籤的背景而不使用透支或單獨的圖層？

最好的問候和感謝提前

巴斯蒂

更新說明： 我們想呈現在地圖上車。這些汽車的標籤應該有矩形背景（我們可以改變顏色），以便用戶更容易閱讀。此外，如果標籤與相應的汽車位於同一水平面上。這背後的原因是，如果汽車彼此重疊，標籤也應該如此，並且應該總是有一輛車的標籤在上面。我希望這個描述能讓事情變得更清楚。

來源

2015-04-17 Bastian

您能否更具體地瞭解這個問題？你能分享一個截圖嗎？創建jsfiddle的最小化版本？看着這個例子，增加標籤的輪廓寬度似乎對我來說很好。 –

嘿。對不起，我正在回答這個問題。我當時正在度假。我更新了這個問題，並試圖更具體。我希望這可以幫助你，因爲可悲的是我目前無法提供任何有用的屏幕。謝謝，再見 – Bastian

沒問題，這確實更清楚。查看文本標籤的代碼，目前不支持將矩形作爲背景。如果任何一個開發人員想要權衡，那麼聽到這可能是可能的事情會很有趣。 –

我設法通過在Text元素後面使用SVG形狀來解決類似問題，並用顏色填充形狀以獲得相同的結果。

我不得不調整背景形狀的大小來匹配文本元素的大小，它不像我希望的那樣直截了當。

主要塊是：

SVG項目沒有背景風格，以及text元素fill屬性只會改變文字顏色不是它的背景色。這就是爲什麼我必須首先使用另一種形狀。
當SVG元素用作圖像元素的源時，出於安全原因，其內部的所有JavaScript代碼都會被忽略。因此，您無法動態檢查/更改尺寸。
SVG元素中的形狀和路徑不是DOM的一部分，因此您無法使用JavaScript或CSS訪問或設置它們的樣式。

我所做的第一件事是使用下面的代碼 - 我發現＃2某處，得到呈現的文本，以像素寬度：

/* 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;

這就是我的回答是我最初發布here

來源

2016-08-16 14:17:03 Mahdi

Openlayers 3功能標籤背景

回答

相關問題