Strano bug con OpenLayers + CloudMade

StackOverflow https://stackoverflow.com/questions/2128144

Domanda

sto cercando qualcosa di abbastanza semplice, è possibile vedere una demo qui: http://www.jsfiddle.net/VVe8x/19/

Questo bug appare solo in Firefox, in modo di vederlo premere uno dei due link, una volta (che vi porterà a uno NY o Israele), quindi premere l'altro collegamento. Il bug è che non mi mostrerà le piastrelle in quella posizione, invece mi mostrerà lo sfondo del div.

P.S In Chrome questo funziona perfettamente.

Non so se questo è un indizio o potrebbe confondere, se tra premendo sia New York o Israele link si preme il "vedere il mondo" di collegamento vi permetterà quindi di vedere l'altra posizione ..

sorgente completa di riferimento 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>

    <a href="#" onclick="javascript:show1()">show me NY</a>
    <a href="#" onclick="javascript:show2()">show me TLV</a>
    <a href="#" onclick="javascript:map.zoomToExtent(map.getMaxExtent());">show world map(a "workaround"</a>


    <div id='myMap' style="height: 600px; width: 600px; position: relative"></div>

    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        map = new OpenLayers.Map("myMap", {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar()
            ]
        });

        var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
            key: 'd5da652e33e6486ba62fca3d18ba70c9'
        });
        map.addLayer(cloudmade);

        var epsg4326 = new OpenLayers.Projection("EPSG:4326");

        map.setCenter(new OpenLayers.LonLat(40, 32), 2);

        show1 = function(){
        var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
            map.zoomToExtent(bound1); // to NY
        };

        show2 = function(e){
            var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);   
            map.zoomToExtent(bound2); // to Israel
            return false;
        };

    </script>
    </body>
</html>
È stato utile?

Soluzione

Il myMap_OpenLayers_Container ha il seguente CSS quando le piastrelle sono invisibili:

position: absolute; z-index: 749; sinistra: -2.02815e + 7px; top: -2007340px;

Se si modificano queste intorno si può vedere che le piastrelle corretti sono stati caricati, per cui il suo probabile che sia jsFiddle loro incasinare. Il CSS piastrelle quando non mostrano inoltre hanno valori strani.

Aggiorna :

Test a livello locale produce anche il problema, in modo che esclude jsFiddle.

Una soluzione potrebbe essere quella di impostare questo valore dopo lo zoom chiamando una funzione come ad esempio: 

        updateCSS = function(){
            OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
        }

Questo appare come un bug, anche se se è in OpenLayers o le proprietà del layer CloudMade è difficile dire - mi immagino quest'ultimo, o sarebbe un bug ampiamente riportato. Il codice rilevante in OpenLayers.js sembra essere: 

centerLayerContainer: function(lonlat){
    var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
    var newPx = this.getViewPortPxFromLonLat(lonlat);
    if ((originPx != null) && (newPx != null)) {
        this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
        this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
    }

Altri suggerimenti

Sono stato in esecuzione in questo problema troppo, e si è scoperto che non è stato la creazione del centro della mappa come Pensavo. Il problema va via se prima si chiama map.setCenter (). Ad esempio: 

var newCenter = new OpenLayers.Lonlat(longitude, latitude)
    .transform(new OpenLayers.Projection('ESPG:4326'),
               this.map.getProjectionObject());

this.map.setCenter(newCenter);

Spero che questo aiuti chi ha vicino il problema.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top