[英]My button onClick recenter for OpenLayers doesn't work
I'm building an angular application using openlayers that when I click a button it will recenter my map .I'm trying to re-center my map when I onClick to a button but it doesnt work. 我正在使用openlayers构建一个有角度的应用程序,当我单击按钮时,它将更新我的地图。当我单击按钮时,我试图重新居中地图,但是它不起作用。
ERROR TypeError: Cannot read property 'setCenter' of undefined.
错误TypeError:无法读取未定义的属性'setCenter'。
Can someone tell me what I'm doing wrong. 有人可以告诉我我在做什么错。 Thanks in advance !
提前致谢 !
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>
Lets try this once just for suggestion, 让我们尝试一下,只是为了建议,
import OlView from 'ol/View';
view: OlView;
ngOnInit() {
this.view = new OlView({
center: fromLonLat(this.coords[city]),
zoom: 3
});
}
I hope its solve your problem if you received proper data for this.coords[city]
variable. 如果您收到有关
this.coords[city]
变量的正确数据, this.coords[city]
解决您的问题。 You need to pass data like this, center: fromLonLat([6.661594, 10.32371])
. 您需要像这样传递数据,
center: fromLonLat([6.661594, 10.32371])
。
For more Reference, Use OpenLayers 4 with Angular 5 有关更多参考, 请将OpenLayers 4与Angular 5一起使用
You may get some idea from this above url example. 您可能会从上面的url示例中得到一些想法。
Thanks, 谢谢,
Muthukumar Muthukumar
If you are trying to recenter there must already be a view, but if it was constructed inside the map constructor there won't be a view variable and you will need to reference it using map.getView(). 如果你想回到中心必须已经有一个观点,但如果它是在地图构造内部构造都不会有一个视图变量,您需要使用map.getView引用它()。 Also setCenter() doesn't do animated recentering.
setCenter()也不进行动画最近。 Assuming your map variable is
map
try: 假设您的地图变量是
map
尝试:
map.getView().animate({
center: fromLonLat(this.coords[city]),
duration: 2000
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.