Как добавить пользовательский элемент HTML HTML в слои 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. Вы можете управлять содержимым в простом 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. Вы можете использовать любое изображение для вашего маркера. Вы также можете контролировать его позиционирование.

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