view.calculateExtent 返回 [NaN,NaN,NaN,NaN]

Question

我正在使用 OpenLayers 3.18.2。我的地图是 olMap，我的视图是 olView。我想获取屏幕上可见地图的范围。

olView.getCenter() = [2142126.3712395,-4085536.2324793]
olView.getZoom() = 16
olView.getResolution() = 2.388657133911758
olMap.getSize() = [1906,904]
olView.calculateExtent(olMap.getSize()) = [NaN,NaN,NaN,NaN]

为什么这没有返回正确的范围？

Answer 1

实际上，您在获取地图范围时不应该有任何问题，因为代码看起来 correct.My 地图定义为地图并且 map.getView().calculateExtent(map.getSize( )).我能够得到范围。You can see from the screenshot

Answer 2

为了继续工作，我自己计算了范围：

var center = olView.getCenter();
var res = olView.getResolution();
var pxSize = olMap.getSize();
var cx = parseFloat(center[0]);
var cy = parseFloat(center[1]);
var dx = res * pxSize[0] / 2;
var dy = res * pxSize[1] / 2;
var extent = [cx - dx, cy - dy, cx + dx, cy + dy];

olView.getCenter() 正在返回一个字符串数组，因此是 parseFloat。

Answer 3

这是一个类似于您的地图的工作 jsFiddle（使用 OSM 作为底图）。 calculateExtent() 似乎工作正常 http://jsfiddle.net/e969kjro/1/

<div id="map" class="map"></div>
<button id="myButton" onclick="test()">Click Me</button>

var view = new ol.View({
    center: [2142126.3712395,-4085536.2324793],
    zoom: 16
    })

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: view
});

window.test = function () {
    alert(view.calculateExtent(map.getSize()));
}

Answer 4

在沉睡之后，考虑到这里的反馈和更多的实验，我找到了问题的原因：坐标来自返回字符串的 AJAX 调用。我叫

olView.setCenter([x, y])

当 x 和 y 是字符串时，地图视图更改为正确的中心位置，但随后无法正常运行。将调用更改为

olView.setCenter([parseFloat(x), parseFloat(y)])

使地图正常工作。

view.calculateExtent 返回 [NaN,NaN,NaN,NaN]

view.calculateExtent returning [NaN,NaN,NaN,NaN]

openlayers-3