[英]Angular 8 / Ionic 5 / Openlayers 6 : Can't center map on feature
I want to center an OL Map on a feature.我想将 OL 地图居中放置在某个要素上。 This feature is referenced by a class property.此功能由类属性引用。
The method below is actually called when I click on the button used to trigger the centering, but the map doesn't move.当我单击用于触发居中的按钮时,实际上会调用下面的方法,但地图不会移动。
I've tried with Firefox and Brave, without success.我尝试过 Firefox 和 Brave,但没有成功。 The map moved once though in FF but I modified something and can't get it to work again.地图虽然在 FF 中移动过一次,但我修改了一些东西,无法让它再次工作。
Here's my code (the commented lines are what I've also tried)这是我的代码(注释行是我也尝试过的)
centerOnPosition() {
var point: Point = <Point>this.positionFeature.getGeometry();
console.log("Proj:", this.view.getProjection().getCode());
console.log("actual center", this.view.getCenter());
console.log("centering on pos", point.getCoordinates());
this.view.setCenter( point.getCoordinates());
// this.view.centerOn(point.getCoordinates(), this.map.getSize(), [500, 500]);
// setTimeout(() => {
// this.map.updateSize();
// this.map.render();
// }, 1000);
// this.map.getView().animate({
// center: point.getCoordinates(),
// duration: 1000
// })
// this.map.updateSize();
// this.view.setCenter( fromLonLat( point.getCoordinates() , get("EPSG:3857")));
// this.map.render();
}
Here's the output :这是输出:
Proj: EPSG:3857
actual center : Array [ 312807.60214986256, 5350017.244833869 ]
centering on pos : [ 6153873.7653989205, -2394513.7334693754 ]
EDIT : some more infos.编辑:更多信息。
I'm suspecting badly projected coordinates.我怀疑投影坐标不好。 I got the position I want to center on with geolocation likewise :我也得到了我想以地理定位为中心的位置:
var geolocation = this.initGeolocation();
geolocation.setTracking(true);
initGeolocation() {
return new Geolocation({
trackingOptions: {
enableHighAccuracy: true,
},
projection: this.view.getProjection(),
});
}
So it appears that the problem was provoked by a piece of code in the component constructor : if the user wasn't authenticated, he was forwarded to the login page via a certain route.所以看起来问题是由组件构造函数中的一段代码引起的:如果用户没有通过身份验证,他会通过某个路由被转发到登录页面。 (I tried to put this call on the ngOnInit and in ionViewWillEnter without success). (我试图将此调用放在 ngOnInit 和 ionViewWillEnter 中,但没有成功)。
I don't totally get what's the issue, I guess the navigation change in the first access to the home page was messing with the map building... I will gladly accept an answer that will give my more insights.我不完全明白是什么问题,我猜第一次访问主页时的导航更改与地图构建混淆了......我很乐意接受一个能给我更多见解的答案。
Here the line of code I had to comment for now :这是我现在必须评论的代码行:
if (!this.accountService.isAuthenticated()) {
console.log("not logged !!");
// this.router.navigateByUrl('/menu/login');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.