0

如何在 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=preview

4

1 回答 1

0

我找到了解决方案。文档只有 Javascript 示例，但我必须在 Typescript 中实现符合 ngrx 存储的角度，所以我想出了一个 hack。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()
    );
  }

这就是 Angular 中的 html 代码：[对于 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来更清楚地了解我试图使用使用实现maplibre 而不是使用提到的链接中使用的 ngx 包装器。

于 2022-02-18T19:17:30.543 回答