Javascript Openlayers自定义控件事件侦听器获取映射

我正在使用

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

---

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

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

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

函数getDrawPolygonControl（）{ const button=document.createElement（'button'）； button.innerHTML=''； 常量元素=document.createElement（'div'）； element.className='ol draw ol control'； 元素。追加子元素（按钮）； const control=new ol.control.control（{element:element}）； addEventListener（'click'，e=>{ log（control.getMap（））； }); 返回控制； }

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