如何使用 ngx-leaflet-draw 为 ngx-leaflet 创建自定义绘制按钮

Question

我想创建一个自定义按钮，它可以在单击时启用多段线抽屉。它类似于 How to click a button and start a new polygon without using the Leaflet.draw UI，但我想用 angular (7)、ngx-leaflet 和 ngx-leaflet-draw 来做到这一点。

这是我为我的 angular 项目改编的 link 代码：

// 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>

如果单击 "draw polyline" 按钮，我会收到错误消息：

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

如何使用 ngx-leaflet-draw 为 ngx-leaflet 创建自定义绘制按钮

How to create custom draw button for ngx-leaflet with ngx-leaflet-draw

ngx-leaflet

leaflet-draw

angular7