1

我需要删除所有的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;
}

地图组件 

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

这是正确的方法吗？

问候。

4

1 回答 1

1

您的一般方法是正确的。

您可能遇到的问题是您正在更改this.markers来自 Leaflet 的回调内部的绑定属性。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 README 的这一部分： https ://github.com/Asymmetrik/ngx-leaflet#a-note-about-change-detection

于 2018-02-16T17:18:51.743 回答