我坚持在 ngx-leaflet 上创建 Leaflet 按钮

Question

我现在完全陷入 Angular 与 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);

我想给这个按钮添加绘图功能，但不知道该怎么做，我读了很多堆栈溢出 posts、互联网论坛 post 和当然，leaflet、leaflet-draw、ngx-leaflet 和 ngx-leaflet-draw.

的 API 文档

我是堆栈溢出方面的新手，所以如果 post 中有问题，请告诉我进行更正。

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

但我更喜欢 Leaflet-Geoman 在那里你可以简单地调用 map.pm.enableDraw('Polyline') 有很多功能而且它有更新的设计。

我坚持在 ngx-leaflet 上创建 Leaflet 按钮

I´m stucked creating Leaflet buttons on ngx-leaflet

javascript

angular

leaflet

ngx-leaflet