openlayers自定义控件事件监听获取地图

Question

我正在使用 osm 和 openlayers 来显示两张地图。

我创建了一个自定义控件：

function getDrawPolygonControl() {
  const button = document.createElement('button');
  button.innerHTML = '<i class="fas fa-pen"></i>';

  button.addEventListener('click', e => {
    // how to get the correct map instance here????
    console.log(e);
  });

  const element = document.createElement('div');
  element.className = 'ol-draw ol-control';
  element.appendChild(button);

  return new ol.control.Control({element: element});
}

在我的 initMap() 函数中，我使用以下方法将其添加到相应的地图：

const controls = [new ol.control.FullScreen(), new ol.control.Attribution(), getDrawPolygonControl()];

  const map = new ol.Map({
    view: view,
    target: target,
    controls: controls,
  });

现在的问题是如何在我的 onClick 侦听器中获得正确的地图实例？

Answer 1

尝试调用控件构造函数，以便您可以引用它：

function getDrawPolygonControl() {
  const button = document.createElement('button');
  button.innerHTML = '<i class="fas fa-pen"></i>';

  const element = document.createElement('div');
  element.className = 'ol-draw ol-control';
  element.appendChild(button);

  const control = new ol.control.Control({element: element});

  button.addEventListener('click', e => {
    console.log(control.getMap());
  });

  return control;
}

openlayers自定义控件事件监听获取地图

Openlayers custom control event listener get map

javascript

custom-controls

openlayers

openlayers-6