bug étrange avec OpenLayers + CloudMade

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

Question

Je suis en train quelque chose d'assez simple, vous pouvez voir une démo ici: http://www.jsfiddle.net/VVe8x/19/

Ce bogue apparaît uniquement dans Firefox, afin de le voir appuyer sur l'un des liens une fois (il vous faudra soit New York ou Israël) puis appuyez sur l'autre lien. Le bug est qu'il ne va pas me montrer les tuiles à cet endroit, au lieu de cela me montrer l'arrière-plan de la div.

Dans P.S Chrome cela fonctionne parfaitement.

Je ne sais pas si cela est un indice ou il pourrait vous confondre, si entre la pression soit New York ou Israël liens que vous appuyez sur le lien « voir le monde », il vous permettra alors de voir l'autre endroit ..

Source complète pour référence 

<!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>
Était-ce utile?

La solution

Le myMap_OpenLayers_Container a le CSS suivant lorsque les tuiles sont invisibles:

Position: absolute; z-index: 749; gauche: -2.02815e + 7px; top: -2007340px;

Si vous changez ces autour, vous pouvez voir que les bonnes tuiles ont été chargées, il est donc susceptible d'être jsFiddle les chambouler. Les tuiles CSS quand ils ne montrent pas aussi des valeurs étranges.

Mise à jour :

Test produit aussi localement la question, de sorte que les règles sur jsFiddle.

Un correctif serait de définir cette valeur après le zoom en appelant une fonction telle que: 

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

Cela ressemble à un bug, mais si elle est en OpenLayers ou les propriétés de la couche CloudMade est difficile de dire - j'imagine ce dernier, ou ce serait un bug largement rapporté. Le code correspondant à OpenLayers.js semble être: 

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

Autres conseils

Je courais trop ce problème, et il est avéré que je ne déclenchaient pas du centre de la carte que je pensais que j'étais. Le problème disparaît si vous appelez d'abord map.setCenter (). Par exemple: 

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

this.map.setCenter(newCenter);

Espérons que cela aide celui qui a le problème suivant.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top