Openlayers 3.如何製作功能的牙齒翻轉

現在我將我的項目從openlayers 2移動到openlayers 3.不幸的是，我找不到如何顯示功能的標題（tooltip）。在OL2中，有一種名爲graphicTitle的款式。你能否給我建議如何在OL3上實現工具提示？Openlayers 3.如何製作功能的牙齒翻轉

來源

2016-03-07 Anton Anton

你試過谷歌嗎？谷歌它爲「ol3 tooltip」，有很多鏈接 –

試過，但沒有結果。幾乎所有的鏈接都轉移到OL2 –

如果這是你想要的，請參閱[this fiddle]（http://jsfiddle.net/jonataswalker/Lg0eurr5/）。 –

這是ol3開發者的例子。 jsfiddle.net/uarf1888/

var tooltip = document.getElementById('tooltip'); 
var overlay = new ol.Overlay({ 
    element: tooltip, 
    offset: [10, 0], 
    positioning: 'bottom-left' 
}); 
map.addOverlay(overlay); 

function displayTooltip(evt) { 
    var pixel = evt.pixel; 
    var feature = map.forEachFeatureAtPixel(pixel, function(feature) { 
    return feature; 
    }); 
    tooltip.style.display = feature ? '' : 'none'; 
    if (feature) { 
    overlay.setPosition(evt.coordinate); 
    tooltip.innerHTML = feature.get('name'); 
    } 
}; 

map.on('pointermove', displayTooltip);

來源

2016-03-09 04:02:21

這幫了我很多，謝謝 – DMCISSOKHO

以下是來自openlayers網站的Icon Symobolizer示例。它顯示了當你點擊一個圖標功能時如何彈出一個窗口。同樣的原則適用於任何類型的功能。這是我在做我的時候用作例子。

來源

2016-03-07 20:35:24 rgvassar

此示例顯示如何使用Bootstrap自定義按鈕工具提示。我需要示例如何顯示功能的工具提示。 –

你走了。我編輯了相關示例的鏈接。我能夠用這個例子來做多邊形幾何特徵的彈出窗口。 – rgvassar

謝謝，但我想要製作簡單的標題，因爲它在OL2中。任何html元素都可以擁有這個屬性.... 如果我不能這樣做，我會嘗試你的例子。 –

Openlayers 3.如何製作功能的牙齒翻轉

回答

相關問題