OpenLayers 2在OpenLayers 3中的导航历程

Question

我没有找到Openlayers 3的导航历史记录控件。

如何在OpenLayers 2导航历史记录中使用OpenLayers 3查看历史记录？

Answer 1

监听视图上的更改事件并在应用程序代码中实现它。

Answer 2

我在执行它时遇到了一些麻烦。这是为我工作...

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

下面的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; 
    } 
});