使用maplibre时，如何将事件作为参数发送到角度函数

Question

如何在angular中执行，主要是如何使用maplibre在angular捕获moveend事件并将其作为参数发送到函数component.html 中的代码

<mgl-map [center]="initialCenter" [zoom]="[initialZoom]" (load)="loadMap($event)" [style]="'assets/map.style.json'"
(moveEnd)="updateMap($event)">

上面的代码是使用mapbox编写的，我需要在maplibre中实现这一点，必须将事件发送到组件中的updateMap((方法才能工作。组件.ts

updateMap(event: { target: Map }) {
console.log('event', event);
const { target } = event;

this.mapFacade.mapChanged(
target.getBounds(),
target.getCenter(),
target.getZoom()
);
}

使用Maplibre，我无法将事件发送到updateMap。如有任何帮助，我们将不胜感激。

这是使用mapbox完成的应用程序的链接，但我必须使用maplibre实现应用程序。https://stackblitz.com/edit/ngrx-mapbox-demo?embed=1&file=src/app/app.component.ts&view=预览

Answer 1

我找到了一个解决方案。文档中只有Javascript的例子，但我必须在angular内部的Typescript中实现，以符合ngrx存储，所以我想出了一个破解方法。Js代码不理解函数的本地作用域中的"this"，所以我这样做了。

ngAfterViewInit((内的代码：

var a = { lng: 77.1025, lat: 28.7041, zoom: 4 }
this.map = new Map({
container: this.mapContainer.nativeElement,
style: `https://api.maptiler.com/maps/eef16200-c4cc-4285-9370-c71ca24bb42d/style.json?key=Key_Please!`,
// style: './../../../assets/map.style.json',
center: a,
zoom: a.zoom,
hash: true,
});
function value(){
var aa=amap.on("moveend", function(e){
return e;
})
return {"target":aa};
}
var ee= value();
this.updateMap(ee); 

外部代码，我想发送一个参数，以便使ngrx存储同步工作。

updateMap(event: { target: Map }) {
const { target } =  event;

this.mapFacade.mapChanged(
target.getBounds(),
target.getCenter(),
target.getZoom()
);
}

这就是html代码在Angular中的样子：〔for maplibre js〕

<div class="map" #map>
<a href="https://www.maptiler.com" class="watermark"><img src="https://api.maptiler.com/resources/logo.svg"
alt="MapTiler logo" /></a>

</div>

你可以通过访问这里的代码来获得更多的清晰度https://stackblitz.com/edit/ngrx-mapbox-demo?embed=1&file=src/app/app.component.ts&view=preview，我试图实现using maplibre，而不是使用前面提到的链接中使用的ngx包装器。