Historique de navigation OpenLayers 2 dans OpenLayers 3

Question

Je n'ai pas trouvé le contrôle de l'historique de navigation Openlayers 3. Comment utiliser l'historique des vues OpenLayers 3 comme dans l'historique de navigation d'OpenLayers 2?

Answer 1

Écoutez les événements de modification dans la vue et implémentez-les dans votre code d'application.

Answer 2

J'ai eu quelques problèmes pour l'implémenter. C'est ce qui fonctionne pour moi ...

var history = []; 
var history_now = -1; 
var click = false; 
var delay = 350; // OpenLayers render delay = 250 

// On view change 
map.on('moveend', function (e) { 

    // Do not save view history if previous/next was clicked 
    if (click) return; 
    history.push({ 
     center: map.getView().getCenter(), 
     resolution: map.getView().getResolution() 
    }); 
    history_now++; 
}); 

// On previous button click 
$('.action-nav-previous').on('click', function() { 
    if (history_now > 0) { 
     click = true; 
     history_now--; 
     map.getView().setCenter(history[history_now].center); 
     map.getView().setResolution(history[history_now].resolution); 
     setTimeout(function() { 
      click = false; 
     }, delay); 
    } 
}); 

// On next button click... 

Answer 3

code fonctionne pleinement ci-dessous pour l'histoire de la navigation dans OpenLayers 3.

var nav_his = []; 
var size = -1; 
var undo_redo = false; 
map.on('moveend', function() { 
    if (undo_redo === false) { 
     if (size < nav_his.length - 1) { 
      for (var i = nav_his.length - 1; i > size; i--) { 
       nav_his.pop(); 
      } 
     } 
     nav_his.push({ 
      extent: map.getView().calculateExtent(map.getSize()), 
      size: map.getSize(), 
      zoom: map.getView().getZoom() 
     }); 
     size = size + 1; 
    } 
}); 


/** control for Zoom to Previous*/ 
$('#btnZoomPrevious').on('click', function() { 
    if (size > 0) { 
     undo_redo = true; 
     map.getView().fit(nav_his[size - 1].extent, nav_his[size - 1].size); 
     map.getView().setZoom(nav_his[size - 1].zoom); 
     setTimeout(function() { 
      undo_redo = false; 
     }, 360); 
     size = size - 1; 
    } 
}); 

/** control for Zoom to Next*/ 
$('#btnZoomToNext').on('click', function() { 
    if (size < nav_his.length - 1) { 
     undo_redo = true; 
     map.getView().fit(nav_his[size + 1].extent, nav_his[size + 1].size); 
     map.getView().setZoom(nav_his[size + 1].zoom); 
     setTimeout(function() { 
      undo_redo = false; 
     }, 360); 
     size = size + 1; 
    } 
});