我的按钮在单击打开图层的重新居中不起作用

Question

>我正在使用开放层构建一个角度应用程序，当我单击按钮时，它将重新定位我的地图。当我单击一个按钮时，我正在尝试重新居中我的地图，但它不起作用。

错误

类型错误：无法读取未定义的属性"setCenter"。

有人可以告诉我我做错了什么。提前感谢！

import { Component } from '@angular/core';
import {fromLonLat} from 'ol/proj'
import {view} from 'ol/View';
import * as ol from 'openlayers';
export class AppComponent {
distance = 60;
points: Array<{ x: number; y: number; }> = [];
position : Array<{ x: number; y: number; id: string; radius: number,color:string, place:string}> = 
[
{x:11.5820,y:48.1351,id:"munich",radius:20, color:"red", place:"m"},
{x:13.388866,y:52.517071,id:"berlin", radius:40,color:"blue", place:"b"},
];
coords = {
berlin: [13.388866, 52.517071]
};
onClick (city: string) {
view.setCenter({
center: fromLonLat(this.coords[city]),
duration: 2000
});
}
mapOnClick(evt) {
console.log(evt);
const map = evt.map;
// this bit checks if user clicked on a feature
const p = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
console.log("got feature" + feature.getId());
return feature;
});
}
}

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

Answer 1

如果你试图重新居中，必须已经有一个视图，但如果它是在map构造函数中构造的，那么就不会有视图变量，你需要使用map.getView((引用它。 此外，setCenter(( 不执行动画重新居中。 假设您的映射变量map请尝试：

map.getView().animate({
center: fromLonLat(this.coords[city]),
duration: 2000
})

Answer 2

让我们尝试一次只是为了建议，

import OlView from 'ol/View';
view: OlView;
ngOnInit() {
this.view = new OlView({
center: fromLonLat(this.coords[city]),
zoom: 3
});
}

如果您收到this.coords[city]变量的正确数据，我希望它能解决您的问题。你需要像这样传递数据，center: fromLonLat([6.661594, 10.32371]).

如需更多参考， 将 OpenLayers 4 与 Angular 5 结合使用

您可能会从上面的 url 示例中得到一些想法。

谢谢

穆图库马尔