如何使用 OpenLayers 3 创建永久链接？

Question

我想知道有没有什么办法可以不给地图建立一个确定的中心。我的意思是，我想移动地图并对其进行缩放，当我重新加载页面时，我的地图会显示我之前所做的中心和缩放。可能吗？

Answer 1

您正在寻找 permalink？ OpenLayers 3 不提供自动处理 permalinks 的控件，因为地图状态在 link.

中的编码方式是非常特定于应用程序的

不过自己实现起来也不难。每次移动地图时，您都必须更新 URL:

中的中心和缩放级别

map.on('moveend', function() {
  var view = map.getView();
  var center = view.getCenter();
  window.location.hash =
      view.getZoom() + ';' + center[0] + ';' + center[1];
});

然后，在创建地图时，您必须解析 URL 以获得中心和缩放级别：

var zoom = 2, center = [0, 0];

if (window.location.hash !== '') {
  var hash = window.location.hash.replace('#', '');
  var parts = hash.split(';');
  if (parts.length === 3) {
    zoom = parseInt(parts[0], 10);
    center = [
      parseFloat(parts[1]),
      parseFloat(parts[2])
    ];
  }
}

var map = new ol.Map({
...
  view: new ol.View({
    center: center,
    zoom: zoom
  })

这两个 link 可能也有帮助：

http://oobrien.com/2015/01/openlayers-3-and-datashine/ (-> Permalinks)

http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

如何使用 OpenLayers 3 创建永久链接？

How to create permalinks with OpenLayers 3?

openlayers

openlayers-3