我被困在ngx-leaflet上创建Leaflet按钮

问题描述

我现在完全leaflet and ngx-leaflet停留在Angular项目中，这就是发生的情况。

我已经创建了一些自定义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',contenedor
    );
    bPrueba2.innerHTML = '<i class="fas fa-palette"></i>';
    bPrueba2.title = 'Categorizar';
    let bPrueba3 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba3.innerHTML = '<i class="fas fa-chart-pie"></i>';
    bPrueba3.title = 'Análisis';
    let bPrueba4 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba4.innerHTML = '<i class="far fa-chart-bar"></i>';
    bPrueba4.title = 'Análisis potencia proyecto';
    let bPrueba5 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba5.innerHTML = '<i class="fas fa-chart-area"></i>';
    bPrueba5.title = 'Análisis potencia visible';
    let bPrueba6 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba6.innerHTML = '<i class="far fa-file"></i>';
    bPrueba6.title = 'Fichas';
    let bPrueba7 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba7.innerHTML = '<i class="fas fa-street-view"></i>';
    bPrueba7.title = 'Street view';
    let bPrueba8 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba8.innerHTML = '<i class="fas fa-ruler-combined"></i>';
    bPrueba8.title = 'Medir area';
    let bPrueba9 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba9.innerHTML = '<i class="fas fa-ruler"></i>';
    bPrueba9.title = 'Medir línea';
    let bPrueba10 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba10.innerHTML = '<i class="fas fa-print"></i>';
    bPrueba10.title = 'Imprimir';
    let bPrueba11 = L.DomUtil.create(
      'button',contenedor
    );
    bPrueba11.innerHTML = '<i class="fas fa-file-upload"></i>';
    bPrueba11.title = 'Cargar WMS';
    let bPrueba12 = L.DomUtil.create(
      'button',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);

我希望向该按钮添加绘图功能，但不知道该怎么做，我已经阅读了很多堆栈溢出文章，互联网论坛文章，以及{{1}的API文档}，leaflet，leaflet-draw和ngx-leaflet。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）