2016-05-17 2 views
2

Vor einiger Zeit habe ich Bildungsseiten für Studenten in der Ozeanographie entwickelt. Eine Anwendung besteht in der Erkundung von Satellitenbeobachtungen. Die Anwendung gibt eine SST (Sea Surface Temperature) -Karte des westlichen Mittelmeerraums wieder. In openlayers v3.3.0 war das Rendering perfekt, während in der neuen Version v3.15.1 das Rendering sehr schlecht ist. Der Code ist sehr einfach, eine Basisschicht und eine Bildschicht mit einem source.ImageStatic:OpenLayers 3 Warum ist ein georeferenziertes Bild in den letzten OL3-Versionen schlecht platziert?

function init() { 
    var base = new ol.layer.Tile({ 
     source: new ol.source.MapQuest({ layer: 'sat' }) 
    }); 

    var map = new ol.Map({ 
     layers: [base], 
     target: 'map', 
     view: new ol.View({ 
     center: ol.proj.transform([10.0, 41.0], 'EPSG:4326', 'EPSG:3857'), 
     zoom: 4 
    }) 
    }); 

    var imageLayer = new ol.layer.Image({ 
     opacity: 0.75, 
     source: new ol.source.ImageStatic({ 
     url: '/temporal/20130504.1337.n19.png', 
     imageExtent: ol.extent.applyTransform([-15.006540,35.004948,16.493460, 46.504948],ol.proj.getTransform("EPSG:4326","EPSG:3857")), 
     imageSize: [2048,1166], 
     projection: map.getView().getProjection() 
     }) 
    }); 

    map.addLayer(imageLayer);  
} 

das Problem nach v3.7.0 Freisetzung entsteht zumindest entsteht. Ich habe ein Beispiel für verschiedene Versionen hergestellt:

Alle haben den gleichen Code oben und unterscheiden sich nur in die ol.js Version.

Kann mir jemand sagen, ob es ein Bug der neuen Versionen ist oder mir etwas offensichtlich fehlt?

+0

Zeit für eine Rückmeldung? –

+0

Die Erklärung von Ahocevar hat meine Frage eindeutig beantwortet. Leider war mein Tippfehler gleichzeitig mit einem Fehler in v.3.3.0. Deshalb war ich verwirrt, als ich meinen Code mit neuen Releases aktualisierte. @ahocevar hat mich freundlich über die Github-Site angesprochen, wo ich auch versucht habe, Hilfe zu suchen. Danke Leute für Ihre großartige und nette Arbeit, OL3 zu entwickeln und zu verbessern. – user1259970

+0

@ user1259970 Wenn die bereitgestellte Antwort hilfreich ist, wäre es nett, sie zu akzeptieren, um dem Beantworter das verdiente Feedback und den Ruf zu geben. – sox

Antwort

2

Sie haben einen Tippfehler in Ihrem imageSize Wert. Die Breite Ihres Bildes ist 2408 Pixel, nicht 2048. Es gab einen Fehler in älteren OpenLayers, so dass die imageSize ignoriert wurde. Neuere Versionen nehmen es richtig auf, und so verursacht Ihr Tippfehler die Fehlausrichtung. Die richtige Schicht Definition ist

var imageLayer = new ol.layer.Image({ 
    opacity: 0.75, 
    source: new ol.source.ImageStatic({ 
    url: '/temporal/20130504.1337.n19.png', 
    imageExtent: ol.proj.transformExtent([-15.006540, 35.004948, 16.493460, 46.504948], 'EPSG:4326', 'EPSG:3857'), 
    imageSize: [2408, 1166] 
    }) 
}); 

http://jsfiddle.net/wsyroL3d/ Siehe für eine funktionierende Demo mit v3.16.0.