Openlayers/Sfondo Openstreetmap è a strisce verticali e squished

Question

Quindi lo sfondo della mia implementazione di openlay sembra essere schiacciato in strisce verticali. La cosa strana è che non è sempre stato così, ma anche quando ripongo tutti i miei cambiamenti a un punto in cui so che funzionava, è ancora rotto. Mi chiedo se forse qualcosa è cambiato sul modo in cui vengono consegnate le risorse delle piastrelle. Ho provato a passare dall'utilizzo di strati osm e wms senza modifiche, ogni aiuto sarebbe apprezzato.

ecco il codice pertinente:

initMap: function() { 
    var view = this; 
    var map = this.map = new OpenLayers.Map(); 
    map.render(this.$map[0]); 

    var wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); 

    var osmLayer = new OpenLayers.Layer.OSM(); 

    this.layers = { 
    point: new OpenLayers.Layer.Vector("Point Layer"), 
    line: new OpenLayers.Layer.Vector("Line Layer"), 
    polygon: new OpenLayers.Layer.Vector("Polygon Layer") 
    }; 

    this.setValue(this.value); 

    map.addLayers([this.layers.point, this.layers.line, this.layers.polygon, osmLayer]); 

    drawControls = { 
    point: new OpenLayers.Control.DrawFeature(this.layers.point, 
     OpenLayers.Handler.Point), 
    line: new OpenLayers.Control.DrawFeature(this.layers.line, 
     OpenLayers.Handler.Path), 
    polygon: new OpenLayers.Control.DrawFeature(this.layers.polygon, 
     OpenLayers.Handler.Polygon) 
    }; 

    this.layers[this.layerType].events.on({'sketchcomplete': function(feature) { 

    if (!view.multiple) { 
     // deactivate polygon layer once a polygon has been added 
     drawControls[view.layerType].deactivate(); 
    } 

    }}); 

    for(var key in drawControls) { 
    map.addControl(drawControls[key]); 
    } 

    if (this.layers[this.layerType].features.length) { 
    var bounds = this.layers[this.layerType].getDataExtent(); 
    var zoom = this.layers[this.layerType].getZoomForExtent(bounds); 
    var lon = (bounds.top - bounds.bottom)/2; 
    var lat = (bounds.right - bounds.left)/2; 
    map.setCenter(new OpenLayers.LonLat(lon,lat), 3); 
    map.zoomToExtent(bounds); 

    if (view.multiple) { 
     drawControls[view.layerType].activate(); 
    } 

    } else { 
    map.setCenter(new OpenLayers.LonLat(-11174482.03751,4861394.9982606), 4); 
    drawControls[view.layerType].activate(); 
    } 

    this.$('.clear').click(function(e) { 
    e.preventDefault(); 
    view.layers[view.layerType].destroyFeatures(); 
    drawControls[view.layerType].activate(); 
    }); 
}, 

Ecco l'output:

Answer 1

così ho trovato il problema. Twitter bootstrap ha una riga nel suo file di ripristino che imposta:

img { max-width: 100% } 

Questo era squishing le immagini. È possibile risolvere il problema facendo:

img { max-width: none; } 

Answer 2

I was having the same problem, are you using bootstrap of twitter? 

I found out there was a selector for img elements that was affecting the map. I had the next selector into the bootstrap.css" 

img { 
    max-width: 100%; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 

I don't know whay the parameter max-width: 100%; makes the vertical stripes in my case. I remove the propertie max-width: 100% and now is working. 

Answer 3

Impostazione img { max-width: 100% }-img { max-width:none; } vuol risolvere il problema.

Tuttavia, questo avrà un effetto non voluto sulle immagini in tutto il sito web. Sto anche utilizzando il componente di carosello di Bootstrap su Twitter per le immagini e quando ho apportato le modifiche sopra ho visto che le immagini non si adattavano al carosello. Pertanto l'ho modificato in modo tale che sia indirizzato solo alle immagini nel div OpenLayers/OpenStreetMap.

div#outlet_map img { max-width:none; }