我被塞在ngx-传单上制作传单按钮

Question

我是完全塞进角项目与leaflet and ngx-leaflet现在，这是什么情况。

我创建了一些自定义的leaflet controls，如这个div

工具栏示例

​

问题是下一个问题，我把这个div作为一个custom leaflet control创建到了onReady(){}中。

L.Control.Barra = L.Control.extend({
  options: {
    position: 'topright',
  },
  onAdd: function (mapa) {
    let contenedor = L.DomUtil.create(
      'div',
      'col mx-auto leaflet-bar leaflet-control barra'
    );
    contenedor.id = 'barra';
    L.DomEvent.disableClickPropagation(contenedor);

    let bPrueba = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba.innerHTML = '<i class="fas fa-list"></i>';
    bPrueba.title = 'Listado';
    let bPrueba2 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba2.innerHTML = '<i class="fas fa-palette"></i>';
    bPrueba2.title = 'Categorizar';
    let bPrueba3 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba3.innerHTML = '<i class="fas fa-chart-pie"></i>';
    bPrueba3.title = 'Análisis';
    let bPrueba4 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba4.innerHTML = '<i class="far fa-chart-bar"></i>';
    bPrueba4.title = 'Análisis potencia proyecto';
    let bPrueba5 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba5.innerHTML = '<i class="fas fa-chart-area"></i>';
    bPrueba5.title = 'Análisis potencia visible';
    let bPrueba6 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba6.innerHTML = '<i class="far fa-file"></i>';
    bPrueba6.title = 'Fichas';
    let bPrueba7 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba7.innerHTML = '<i class="fas fa-street-view"></i>';
    bPrueba7.title = 'Street view';
    let bPrueba8 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba8.innerHTML = '<i class="fas fa-ruler-combined"></i>';
    bPrueba8.title = 'Medir area';
    let bPrueba9 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba9.innerHTML = '<i class="fas fa-ruler"></i>';
    bPrueba9.title = 'Medir línea';
    let bPrueba10 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba10.innerHTML = '<i class="fas fa-print"></i>';
    bPrueba10.title = 'Imprimir';
    let bPrueba11 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba11.innerHTML = '<i class="fas fa-file-upload"></i>';
    bPrueba11.title = 'Cargar WMS';
    let bPrueba12 = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba12.innerHTML = '<i class="fas fa-file-export"></i>';
    bPrueba12.title = 'Descargar';

    contenedor.title = 'Barra';
    return contenedor;
  },
  onRemove: function (mapa) {},
});
let prueba = new L.Control.Barra();
prueba.addTo(mapa);

我想在这个按钮上添加绘图的功能，但不知道怎么做，我读过很多堆栈溢出帖子、互联网论坛帖子，当然还有leaflet、leaflet-draw、ngx-leaflet和ngx-leaflet-draw的API文档。

我是堆叠溢出的新手，所以如果这篇文章有什么不对的地方，那就对我说吧，让我更正一下。

Answer 1

可以使用L.DomEvent轻松地将单击事件添加到按钮中。

L.DomEvent.on(bPrueba, 'click', function(e){console.log(e)});

还可以调用控件的方法：

L.Control.Barra = L.Control.extend({
  options: {
    position: 'topright',
  },
  onAdd: function (mapa) {
    let contenedor = L.DomUtil.create(
      'div',
      'col mx-auto leaflet-bar leaflet-control barra'
    );
    contenedor.id = 'barra';
    L.DomEvent.disableClickPropagation(contenedor);

    let bPrueba = L.DomUtil.create(
      'button',
      'm-2 btn btn-secondary',
      contenedor
    );
    bPrueba.innerHTML = '<i class="fas fa-list"></i>';
    bPrueba.title = 'Listado';


    L.DomEvent.on(bPrueba, 'click', this.clickFunc1); // <------------

    //....
  },
  clickFunc1: function(e){
      console.log(e);
  }
});

要启动绘图函数调用：

new L.Draw.Polyline(map).enable();

所以对你来说：

clickFunc1: function(e){
      new L.Draw.Polyline(map).enable();
  }

但是我更喜欢传单-Geoman，您可以简单地用很多函数调用map.pm.enableDraw('Polyline')，并且它有一个更新的设计。