如何在 Angular 9 中绑定 OpenLayers 中的缩放变化答案

【问题标题】：How to bind zoom change in OpenLayers in Angular 9如何在 Angular 9 中绑定 OpenLayers 中的缩放变化
【发布时间】：2020-08-22 19:38:52
【问题描述】：

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

对于一个没有Angular经验的人，我不确定是否应该绑定div更改，或者我不知道如何直接绑定map的部分？在这种情况下，如果没有可以设置（更改）或（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]
});
}

地图目标是 id 为 'hotel_map' 的 div：

CSS：

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

HTML：

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

打字稿功能：

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

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

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

【问题讨论】：

标签： angular typescript openlayers

【解决方案1】：

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

只听“变化：分辨率”

【讨论】：

是的，但这应该在某个函数中，然后我必须调用这个函数来查看是否进行了更改。将侦听器放在类似的 css 目标上以实时获取更改是否可以通过？
创建地图后执行上面的代码，就注册了事件！所以它已经是实时的了。你可以在箭头函数中做你想做的事情。