如何使用 Angular 中的单击按钮放大某个位置答案

【问题标题】：how to zoom into a location by using click button in Angular如何使用 Angular 中的单击按钮放大某个位置
【发布时间】：2018-10-12 14:19:18
【问题描述】：

当用户单击按钮时，我想将openlayers 库中的zoom 放到一个位置，例如：Berlin。有人能告诉我怎么可能吗？

下面是我的代码：

app.component.html

<button id='berlin' (click)="onClick('berlin')">Zoom to Berlin</button>

app.component.ts

berlin = fromLonLat([13.388866, 52.517071]);

public onClick(city:any) {
   console.log(city);
   view.animate({
      center: city,
      duration: 2000
   });
}

【问题讨论】：

标签： angular openlayers angular-openlayers

【解决方案1】：

var bern = ol.proj.transform([7.4458,46.95], 'EPSG:4326', 'EPSG:3857'); 
document.getElementById ("berlin").addEventListener ("click", berlinZoom, false);
 function berlinZoom() {

            var bernview = new ol.View({
                center: bern,
                zoom: 6
            });  
         map.setView(bernview); 
        }

【讨论】：

对于你需要做的动画 map.getView()..animate({ center: bern, zoom: 6, duration: 2000 });

【解决方案2】：

你在这里传递一个字符串：'berlin'，给你的函数onClick，因此它看起来像这样：

view.animate({
  center: 'berlin',
  duration: 2000
});

我猜，你想跳转到[13.388866, 52.517071]。这应该可以解决问题：

coords = {
   berlin: [13.388866, 52.517071],
   // Add other cities
   ...
};

onClick (city: string) {
   view.animate({
      center: fromLonLat(coords[city]),
      duration: 2000
   });
}

【讨论】：

我收到如下错误：AppComponent.html:46 ERROR TypeError: Cannot read property 'animate' of undefined
看起来您的view 未定义。 view 是 ol/view 类型的，你如何将它传递给你的组件？更好的是map.getView().animate(...);