为什么Ngx-leaflet-draw工具栏没有出现？

Question

我试图添加ngx-leaflet-draw，以允许客户在地图上绘制路径。我遵循了我在这里找到的说明：

https://github.com/Asymmetrik/ngx-leaflet-draw

app.module.ts

                import { LeafletModule } from '@asymmetrik/ngx-leaflet';
                import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw'; 
                @NgModule({
                      imports: [
                           LeafletModule,
                           LeafletDrawModule]

angular.json

"styles": [
          "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
          "node_modules/angular-calendar/scss/angular-calendar.scss",
          "node_modules/sweetalert2/src/sweetalert2.scss",
          "src/assets/css/demo.css",
          "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css",
          "src/assets/scss/material-dashboard.scss",
          "node_modules/leaflet/dist/leaflet.css",
          "node_modules/leaflet-draw/dist/leaflet.draw.css"
        ]

test.module.ts

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';    
@NgModule({  declarations: [TestComponent],  imports: [    LeafletModule,    LeafletDrawModule  ]})

test.component.html

   <div leaflet style="height: 400px; margin: 0; padding: 0;"
    leafletDraw
    [leafletOptions]="options"
    [leafletDrawOptions]="drawOptions"
    [leafletDrawLocal]="drawLocal"
    (leafletDrawCreated)="onDrawCreated($event)"
    (leafletDrawStart)="onDrawStart($event)">

    <!-- Add the drawnItems featureGroup to the map -->
    <div [leafletLayer]="drawnItems"></div>

    </div

test.component.ts

  drawnItems: FeatureGroup = featureGroup();
options = {
    layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Open Street Map' })
    ],
    zoom: 5,
    center: latLng({ lat: 46.879966, lng: -121.726909 })
};

drawOptions = {
    position: 'topright',
    draw: {
        marker: {
            icon: icon({
                iconSize: [ 25, 41 ],
                iconAnchor: [ 13, 41 ],
                iconUrl: '2b3e1faf89f94a4835397e7a43b4f77d.png',
                iconRetinaUrl: '680f69f3c2e6b90c1812a813edf67fd7.png',
                shadowUrl: 'a0c6cc1401c107b501efee6477816891.png'
            })
        }
    },
    edit: {
        featureGroup: this.drawnItems
    }
};

drawLocal: any = {
    draw: {
        toolbar: {
            buttons: {
                polygon: 'Draw an awesome polygon!'
            }
        }
    }
};

public onDrawCreated(e: any) {
    // tslint:disable-next-line:no-console
    console.log('Draw Created Event!');

    const layer = (e as DrawEvents.Created).layer;
    this.drawnItems.addLayer(layer);
}

public onDrawStart(e: any) {
    // tslint:disable-next-line:no-console
    console.log('Draw Started Event!');
}

当我加载页面时，我可以看到地图，但是绘图工具没有appear.What，我错过了吗？我使用的是angular v9和ngx-leaftlet v7

Answer 1

原来这是另一个ngx库的问题。解决了。