Question

我使用过Google api Overlayviews。我能够使用像素值在latlng位置添加带有html div元素的自定义叠加层。

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

如果要在ol3中的特定位置显示纯HTML，请使用ol.Overlay。请参阅ol3 overlay example。您可以在CSS中以纯HTML和样式控制内容。

  // 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'
    }))
  });

如何在Openlayer 3的层中添加Custom Html dom元素

1 个答案: