简体   繁体   English

Angular 8 / Ionic 5 / Openlayers 6:无法在特征上居中地图

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM