Question

使用OpenLayers，我想设置1个地图的视图，与另一个地图相同。到目前为止，我使用了Zoom和Center，它运行良好，但由于技术上不可能进行某种投影，我尝试了一定程度。

我正在使用最新的OpenLayers（4.6.3）。

以下代码理论上应该获取我当前地图的范围，并使我的地图符合这个范围，这样就不会有任何动作。

let view = map.getView();
let extent = view.calculateExtent(map.getSize());
view.fit(extent, map.getSize());

但实际上，如果我放大得足够（例如，点击加号按钮6次），然后运行上面的代码，它会在每次运行时缩小，这不是我想要的。

我尝试了constraintResolution，但它最大限度地减少了伤害，而不是完全删除它。

这是一个小提琴：http://jsfiddle.net/t6uvybd3/1/ （我不确定那里的ol版本是什么，但它也确实发生在那里）

视频：https://www.youtube.com/watch?v=ZAV_FuZ-p7M&feature=youtu.be

Answer 1

这种情况正在发生，因为它会改变分辨率以适应范围。如果更改地图div的大小，则可能不会遇到问题。无论如何，这似乎是开放层的不当行为，但这是一种解决方法。

var map = new ol.Map({
   target: 'map',
   loadTilesWhileAnimating: true,
   layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
   view: new ol.View({
      center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
      zoom: 1
   })
});

var fitExtentAnimated = document.getElementById('fit-extent-animated');
fitExtentAnimated.addEventListener('click', function() {

  let view = map.getView();
  let extent = view.calculateExtent(map.getSize());
  //hold the current resolution
  let res = view.getResolution();
  //if you use older versions of ol3 use `fitExtent` istead of `fit`
  view.fit(extent, map.getSize());
  //apply the resolution back 
  view.setResolution(res);
}, false);

Answer 2

我使用了@pavios的解决方案，但由于我的情况有些不同，因此必须对其进行一些调整。我正在使用几何对象来适合/居中于地图。我注意到当几何图形只是一个点时，OL会缩小得太多。但是我发现发生这种情况时，分辨率变为零。因此，我在调用setResolution之前添加了一个条件，因为当几何不是POINT时，每次都弄乱其他条件时会调用它。

let mainFeature: ol.Feature = feature == null ? this.mainFeature : feature;

if (mainFeature != null && this.map != null) {
  // get the current resolution before calling fit 
  // as this will zoom out too much if the geometry is just a POINT
  let res = this.map.getView().getResolution();
  this.map.getView().fit(mainFeature.getGeometry().getExtent(), { constrainResolution: false});

  // set the resolution back to the original resolution if the new resolution
  // after calling fit is equal or less than zero
  let newRes = this.map.getView().getResolution();
  if (newRes <= 0)
    this.map.getView().setResolution(res);
}

OpenLayers - 适合当前范围缩小

2 个答案: