Openlayers自定義控件事件監聽器獲取map

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() function 中，我使用以下命令將其添加到相應的 map 中：

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

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

現在的問題是如何在我的 onClick 監聽器中獲得正確的 map 實例？

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