如何在 Angular 9 中绑定 OpenLayers 中的缩放更改

Question

我正在为我的 openlayers 地图寻找一些更改侦听器。

对于一个没有经验的Angular人来说，我不确定是否应该绑定div修改或者，部分我不知道如何，直接绑定映射？在那种情况下，如果没有任何我可以设置 (change) 或 (ngModel) 或类似元素的元素，我该如何调用我的函数？

正在创建地图 onInit 调用此函数：

createOpenLayersMap(){
  this.map = new Map({
    target: 'hotel_map',
    layers: [new TileLayer({
      source: new OSM()
    })],
    view: new View({
      center: olProj.fromLonLat([this.lng, this.lat]),
      zoom: 7
    })
  });
  this.crForm = this.fb.group({
  crControl: [1],
  crEndControl: [1]
});
}

地图目标是 div by id 'hotel_map':

CSS:

#hotel_map {
  height: 100%;
  width: 100%;
 }

HTML:

      <div id="hotel_map" (change)="getZoom()"></div>

Typescript 函数：

  zoomLevel: any = '';
  getZoom(){
  this.zoomLevel = this.map.getView().getZoom();
  console.log(this.zoomLevel)
  }

现在我需要知道用于改变圆半径的缩放参数。

对于任何解决方案和建议，提前致谢！

Answer 1

this.map.getView().on('change:resolution', () => {
    this.zoomLevel = this.map.getView().getZoom();
    console.log(this.zoomLevel)
})

只听“change:resolution”

如何在 Angular 9 中绑定 OpenLayers 中的缩放更改

How to bind zoom change in OpenLayers in Angular 9

openlayers

typescript

angular