Seltsamer Fehler mit OpenLayers + CloudMade

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

Frage

Ich versuche etwas ziemlich Einfaches, Sie können hier eine Demo sehen:http://www.jsfiddle.net/vve8x/19/

Dieser Fehler erscheint nur in Firefox. Um zu sehen, dass er einmal eine der Links drücke (er führt Sie entweder zu NY oder Israel), drücken Sie dann auf den anderen Link. Der Fehler ist, dass es mir die Kacheln an diesem Ort nicht zeigt, stattdessen den Hintergrund der Div.

Ps in Chrom Dies funktioniert einwandfrei.

Ich weiß nicht, ob dies ein Hinweis ist oder es Sie verwirren kann. Wenn Sie zwischen dem Drücken von NY oder Israel Links auf den Link "Sehen Sie sich die Welt anzeigen" drücken, können Sie dann den anderen Ort sehen.

Vollständige Quelle als Referenz

<!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>
War es hilfreich?

Lösung

Der MYMAP_OPENLAYERS_CONTINELER hat das folgende CSS, wenn die Fliesen unsichtbar sind:

Position: absolut; Z-Index: 749; links: -2.02815e+7px; Oben: -2007340px;

Wenn Sie diese um diese herum ändern, können Sie feststellen, dass die richtigen Fliesen geladen wurden, sodass es wahrscheinlich ist, dass Jsfiddle sie vermischt. Die Kacheln CSS, wenn sie nicht zeigen, haben auch seltsame Werte.

Aktualisieren:

Das Testen lokal erzeugt auch das Problem, so dass JSFIDDLE ausschließt.

Eine Lösung wäre, diesen Wert nach dem Zoom festzulegen, indem Sie eine Funktion aufrufen wie:

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

Dies sieht aus wie ein Fehler, obwohl es schwer zu sagen ist, wenn er sich in OpenLayers oder den Eigenschaften der CloudMade -Schicht befindet - ich würde mir das letztere vorstellen, oder es wäre ein weit verbreiteter Fehler. Der relevante Code in OpenLayers.js scheint zu sein:

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";
    }

Andere Tipps

Ich bin auch auf dieses Problem gestoßen, und es stellte sich heraus, dass ich nicht das Zentrum der Karte festlegte, wie ich dachte. Das Problem verschwindet, wenn Sie MAP.SetCenter () zum ersten Mal aufrufen. Zum Beispiel:

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

this.map.setCenter(newCenter);

Ich hoffe, dies hilft, dass jeder das Problem hat.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top