0

It's a react.js project with OpenLayers 5.3.0

The map is defined in 

componentDidUpdate() {

 this.map = new Map({
     target: this.container,
     view: new View({
       center: [2.5, 2.5],
       projection: projection,
       zoom: 2,
       minZoom: 0.1,
       maxZoom: 7
     }),
     interactions: defaultInteractions({
       // dragPan: false,
       keyboard: false,
       // mouseWheelZoom: false,
       doubleClickZoom :false
     }),
     layers: [graphic, this.roadLayer, this.robotLayer, this.laserLayer, this.targetLayer, this.restrictLayer, this.specialLayer]
   }); 


    view=this.map.getView();
    zoom=view.getZoom();
    view.on('change:resolution',function(e){
        console.log('change:resolution');// dosen't work
    });
    view.on('change:center',function(e){
        console.log('moveing');
    });
    this.map.on('moveend',function(e){
      console.log(view);
      zoom = view.getZoom();
      // console.log("resolution", view.getResolution()); // Always the same
       // console.log('moveend');
        console.log("zoom"+zoom); // Always 2
        if(view.getZoom()!==zoom)
            console.log('zomeend了,change:zoom了');
    });

};

The problem is when I zoomin the map, change:resolution won't be triggered and zoom would always be 2 as init value. I also tried put map.on('moveend') at like componentDidMount(), same result.

Why can't I get the current Zoom?

Is it the problem of life circle of React? Any hint would be a huge help.

Ye Cai
  • 25
  • 3
  • 1
    I think you are creating the map in the wrong life cycle function, you should do it in `componentDidMount`. This is invoked after the component is mounted, and is when you should initialize the map. – cabesuon Nov 02 '19 at 03:02
  • Well that was an obvious mistake but as a beginner I didn't realize, thanks for @cabesuon's comment, problem solved. – Ye Cai Jan 28 '20 at 05:10

0 Answers0