如何在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元素

回答

相关问题