在 dragend 事件后更改 leafletLayers

Question

我需要删除所有 leafletLayers 并在 'dragend' 事件后添加其他的。所以，我进行如下操作：

mapParent.component

template: '<app-map [leafLetmarkers]="markers" (refreshMap)="refresh($event)"></app-map>'

...

markers: L.Layer[] = [];
refresh(position) {
    //delete all markers
    var markers = []; 
    //set the new markers
    this.markers= newMarkers;
}

map.component

template: '<div leaflet style="height: 100%;"
                [leafletOptions]="options"
                [leafletLayers]="markers"
                (leafletMapReady)="onMapReady($event)">
           </div>'

...

@Input('leafLetmarkers') markers: L.Layer[];
@Output() refreshData = new EventEmitter<L.LatLng>();

onMapReady(map: L.Map) {
    map.on('dragend', e => this.refreshMap.emit(map.getCenter()));
}

这样做正确吗？

此致。

Answer 1

您的一般做法是正确的。

您可能运行遇到的问题是您正在从 Leaflet 的回调中更改绑定属性 this.markers。 Leaflet 回调在 Angular 区域之外（Angular 不会尝试跟踪其区域之外的更改）。这是 ngx-leaflet 的设计选择，以防止可能影响应用程序性能的过多更改检测。

解决办法是手动触发变化检测：

fitBounds: any = null;
circle = circle([ 46.95, -122 ], { radius: 5000 });

// Inject the Change Detector into your component
constructor(private changeDetector: ChangeDetectorRef) {}

ngOnInit() {

    // The 'add' event callback happens outside of the Angular zone
    this.circle.on('add', () => {

        // Because we're outside of Angular's zone, this change won't be detected
        this.fitBounds = this.circle.getBounds();

        // But, it will if we tell Angular to detect changes 
        this.changeDetector.detectChanges();

    });
}

有关更多详细信息，您可以查看 ngx-leaflet 自述文件的这一部分： https://github.com/Asymmetrik/ngx-leaflet#a-note-about-change-detection

在 dragend 事件后更改 leafletLayers

Change leafletLayers after a dragend event

leaflet

ngx-leaflet

angular5