如何使用Angular中的单击按钮放大位置

Question

当用户单击按钮时，我想将zoom库中的openlayers定位到一个位置，例如：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
   });
}

Answer 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); 
        }

Answer 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
   });
}