view.calculateExtent return [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

работает После сна на нем, учитывая обратную связь здесь и еще некоторые экспериментирую я нашел причину проблемы: Координаты приходят из вызова AJAX, который возвращает строку , Я называю

olView.setCenter([x, y]) 

, когда х и у струне вид карты изменения в правильную позицию центра, но не функционирует должным образом. Изменение звонка на

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

делает карту работоспособной.

Answer 2

На самом деле у вас не должно возникнуть проблемы с получением карты, поскольку код кажется правильным. Моя карта определяется как map и map.getView(). CalculateExtent (map.getSize()). получить степень. You can see from the screenshot

Answer 3

В интересах дела с работой я вычислил МЕРЕ себя:

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 4

Здесь находится рабочая таблица 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())); 
}