bug étrange avec OpenLayers + CloudMade

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

Ce bogue apparaît uniquement dans Firefox, afin de le voir appuyer sur l'un des liens une fois (il sera vous amène à NY ou Israël) puis appuyez sur l'autre lien. Le bug est qu'il ne me montrera pas les tuiles dans cet endroit, à la place il me montrera l'arrière-plan de la div.

P.S Dans 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>

Source

2010-01-24 Anonymous

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

position: absolute; indice de z: 749; à gauche: -2,02815e + 7px; haut: -2007340px;

Si vous les modifiez, vous pouvez voir que les bons carreaux ont été chargés, il est donc probable que jsFiddle les dérange. Les carreaux CSS lorsqu'ils n'apparaissent pas ont aussi des valeurs étranges.

Mise à jour:

Test produit également sur place 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"; 
    }

Source

2010-01-27 09:43:10 geographika

Salut, ce n'est pas un bug avec jsFiddle, j'ai eu ce problème dans mon environnement de développement et je l'ai répliqué dans jsFiddle. Le css est une belle trouvaille, je vais regarder quand j'ai le temps, besoin de comprendre qui génère cette erreur .. Encore une fois, jsFiddle n'est pas à blâmer ici :) Je ne fais pas une habitude se développant sur le dessus de jsFiddle: P –

Yup, je peux voir le bug avec le port de vue DIV, je vais utiliser votre solution de contournement! Très apprécié! –

je courais trop ce problème, et il est apparu 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 map.setCenter() pour la première fois. 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 aidera le prochain problème.

Source

2010-12-12 23:22:49 erydo

bug étrange avec OpenLayers + CloudMade

Répondre

Questions connexes