如何在Openlayer 3的圖層中添加自定義Html DOM元素

我已經使用Google api Overlayviews。我能夠使用像素值在latlng位置添加具有html div元素的自定義疊加層。如何在Openlayer 3的圖層中添加自定義Html DOM元素

USGSOverlay.prototype.draw = function() { 
var overlayProjection = this.getProjection(); 
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 
var div = this.div_; 
div.style.left = sw.x + 'px'; 
div.style.top = ne.y + 'px'; 
div.style.width = (ne.x - sw.x) + 'px'; 
div.style.height = (sw.y - ne.y) + 'px'; 
     };

我現在用的OpenLayer 3.是否有任何選擇權，以使用像素值的特定位置添加自定義的div元素就像一個標誌。每次當地圖放大或縮小時，我都可以找到像素位置並更新div元素的頂部和左側，以便它看起來處於正確的位置。在OpenLayer3中有這種可能性。

來源

2017-01-02 Kiran k g

如果要在ol3中的特定位置顯示純HTML，請使用ol.Overlay。請參閱ol3 overlay example。您可以使用純HTML和CSS樣式控制內容。

// Vienna marker 
    var marker = new ol.Overlay({ 
    position: pos, 
    positioning: 'center-center', 
    element: document.getElementById('marker'), 
    stopEvent: false 
    }); 
    map.addOverlay(marker);

如果你要爲多個位置做到這一點，讓我們說超過10家，而你只需要表現出某種標記，那麼我建議你使用ol.layer.Vector，而不是用正確的樣式對象。請參閱ol3 icon example。你可以使用任何圖像作爲你的標記。你也可以控制它的位置。

var iconStyle = new ol.style.Style({ 
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ 
     anchor: [0.5, 46], 
     anchorXUnits: 'fraction', 
     anchorYUnits: 'pixels', 
     src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' 
    })) 
    });

來源

2017-01-02 14:14:30

謝謝。如果我需要更改之前添加的疊加層的位置，則需要使用該設置。但是，如果我有更多數量的重疊說50我如何確定所需的重疊對象。我是否需要保存重疊對象的參考和循環通過它每次？ –

是的，你需要循環，除非你爲每個覆蓋層創建一個唯一的id並創建一個包含它們的對象並使用id作爲key來直接訪問它（這將避免循環）。不過，在我看來，你應該選擇圖層選項。 –

如何在Openlayer 3的圖層中添加自定義Html DOM元素

回答

相關問題