Как добавить пользовательский элемент html dom в слоях Openlayer 3

Question

Я использовал Google api Overlayviews. Я смог добавить пользовательские наложения с элементом html div в позиции latlng, используя значения пикселей.

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 есть какая-то возможность.

Answer 1

Если вы хотите показать простой HTML в определенном месте в ol3, используйте 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' 
    })) 
    });