如何在 Openlayer 3 的层中添加自定义 Html dom 元素答案

【问题标题】：How to add Custom Html dom element in layers of Openlayer 3如何在 Openlayer 3 的层中添加自定义 Html dom 元素
【发布时间】：2017-01-02 13:12:48
【问题描述】：

我使用过 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 中是否有这种可能性。

【问题讨论】：

标签： openlayers-3 custom-element custom-overlay

【解决方案1】：

如果您想在 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'
    }))
  });

【讨论】：

谢谢。如果我需要更改之前添加的叠加层的位置，我需要使用设置位置。但是，如果我有更多的叠加层，比如 50 个，我如何识别所需的叠加层对象。我是否需要保存叠加层对象的引用并每次循环遍历它？
是的，你需要循环，除非你为每个叠加层创建一个唯一的 id 并创建一个包含它们的对象，并使用 id 作为键来直接访问它（这将避免循环）。不过，在我看来，您应该使用 layer 选项。