如何使用ngx传单绘制为ngx传单创建自定义绘制按钮

Question

我想创建一个自定义按钮，它可以在单击时启用多段线抽屉。这类似于如何在不使用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;
};