Leaflet 在dragend事件后更改图层

我需要删除所有传单图层，并在“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;
}

模板：“”
...
标记：L.Layer[]=[]；
刷新（位置）{
//删除所有标记
var标记=[]；
//设置新标记
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()));
}

模板：'
'
...
@输入（“传单标记”）标记：L.Layer[]；
@Output（）refreshData=neweventemitter（）；
onMapReady（地图：L.map）{
on（'dragend'，e=>this.refreshMap.emit（map.getCenter（））；
}

这样做对吗

---

问候。

您的一般方法是正确的

您可能遇到的问题是，您正在更改传单回调中的绑定属性

this.markers

。传单回调位于角度区域之外（Angular不会尝试跟踪其区域之外的更改）。这是ngx传单部分的设计选择，以防止可能影响应用程序性能的过度更改检测

解决方案是手动触发更改检测：

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手册自述部分：