angular - 如何使用 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

您正在传递一个字符串，here:'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
   });
}