El fondo de Openlayers/Openstreetmap está rayado verticalmente y aplastado

Question

Por lo tanto, el fondo de la implementación de mis capas abiertas parece comprimirse en franjas verticales. Lo extraño es que no siempre fue así, pero incluso cuando guardo todos mis cambios en un punto donde sé que estaba funcionando, todavía está roto. Me pregunto si tal vez algo ha cambiado en la forma en que se entregan los activos de mosaico. He intentado cambiar entre el uso de las capas osm y wms sin cambios, cualquier ayuda sería apreciada.

Este es el código 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(); 
    }); 
}, 

Aquí está la salida:

Answer 1

así que encontré el problema. Twitter de arranque tiene una línea en su archivo de reposición que establece:

img { max-width: 100% } 

Esto fue aplastando las imágenes. Lo puede solucionar haciendo:

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

Configuración img { max-width: 100% }-img { max-width:none; } Cómo resuelve el problema.

Sin embargo, esto tendrá un efecto involuntario en las imágenes de su sitio web. También estoy usando el componente de carrusel de Bootstrap Twitter para las imágenes y cuando hice lo anterior cambié las imágenes no cabían en el carrusel. Por lo tanto, lo cambié para que solo se oriente a las imágenes en OpenLayers/OpenStreetMap div.

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