Как создать пользовательскую кнопку рисования для ngx-leaflet с помощью ngx-leaflet-draw

Question

Я хочу создать пользовательскую кнопку, которая включает ящик Polyline при нажатии.это похоже на Как нажать кнопку и начать новый многоугольник без использования интерфейса Leaflet.draw , но я хочу сделать это с angular (7), ngx-leaflet и ngx-leaflet-draw.

Вот мой адаптированный код по ссылке для моего углового проекта:

// app.component.ts
import * as L from 'leaflet';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {

    allDrawnItems = new L.FeatureGroup();
    options = {
        layers: [
            tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {         maxZoom: 18, attribution: '...' })
        ],
        zoom: 5,
        center: latLng(51.9487949, 7.6237527)
    };
    drawOptions = {
        position: 'bottomright',
        draw: {
            circlemarker: false,
            polyline: true
        },
        featureGroup: this.allDrawnItems
    }

    constructor() {}
    ngOnInit() {
        this.options = {
            layers: [
               tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '...' })
            ],
            zoom: 12,
            center: latLng(51.9487949, 7.6237527)
        };
        this.drawOptions = {
            position: 'bottomright',
            draw: {
                circlemarker: false,
                polyline: true
            },
            featureGroup: this.allDrawnItems
        }
    }

    btn_drawPolygon() {
        var polylineDrawer = new L.Draw.Polyline(this.map); // <-- throws error
        polylineDrawer.enable(); 
    }

    onDrawReady(event) {
        console.log(event.layer);
    }
}

, а вот мой html:

// app.component.html
<div style="text-align:center; margin-top: 64px;" fxFlex>
    <div fxFlex
         leaflet 
         [leafletOptions]="options">
         <div
            leafletDraw
            [leafletDrawOptions]="drawOptions"
            (leafletDrawCreated)="onDrawReady($event)"></div>
</div>
<button (click)="btn_drawPolygon()" mat-raised-button color="primary" fxFlex style="height: 38px;">draw polyline</button>

Если я нажму "рисовать полилинию"«Я получаю сообщение об ошибке:

ERROR TypeError: Cannot read property 'overlayPane' of undefined at NewClass.initialize (leaflet.draw.js:8) at NewClass.initialize (leaflet.draw.js:8) at new NewClass (leaflet-src.js:301)

Что не так в моем коде?

Answer 1

хорошо.Я забыл привязать карту с помощью функции leafletMapReady:

// app.component.html
<div fxFlex
     leaflet 
     [leafletOptions]="options"
     (leafletMapReady)="onMapReady($event)">       <!-- added -->
     <div
        leafletDraw
        [leafletDrawOptions]="drawOptions"
        (leafletDrawCreated)="onDrawReady($event)"></div>

, и после использования функции onMapReady и привязки карты к this.map она работает как шарм:

onMapReady(map: L.Map) {
    console.log("ON MAP READY CALLED");
    console.log(this.map);
    this.map = map;
};