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

Я использовал Google API Overlayviews. Мне удалось добавить пользовательские наложения с элементом div html в позиции 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.


custom-element openlayers-3 custom-overlay
person Kiran k g    schedule 02.01.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Если вы хотите отображать простой 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'
    }))
  });
person Alexandre Dubé    schedule 02.01.2017
comment
Спасибо. Если мне нужно изменить положение наложения, которое было добавлено ранее, мне нужно использовать setposition. Но если у меня больше наложений, скажем 50, как я могу идентифицировать желаемый объект наложения. Нужно ли мне сохранять ссылку на объект наложения и перебирать его каждый раз? - person Kiran k g; 02.01.2017
comment
Да, вам нужно будет выполнить цикл, если вы не создадите уникальный идентификатор для каждого наложения и не создадите объект, содержащий их, и не используете идентификатор в качестве ключа для прямого доступа к нему (что позволит избежать цикла). Мне кажется, что вам следует выбрать вариант слоя. - person Alexandre Dubé; 02.01.2017