如何创建带有ngx-传单绘制的ngx-传单自定义绘图按钮

Question

我想要创建一个自定义按钮，这使多线抽屉点击。它类似于How to click a button and start a new polygon without using the Leaflet.draw UI，但我想用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;
};