Openlayers/Openstreetmap Hintergrund ist vertikal gestreift und zerquetscht

Question

So scheint der Hintergrund meiner openlayers Implementierung in vertikale Streifen zerquetscht zu werden. Das Seltsame ist, dass es nicht immer so war, aber selbst wenn ich all meine Änderungen zurück zu einem Punkt packe, wo ich weiß, dass es funktioniert, ist es immer noch kaputt. Ich frage mich, ob sich vielleicht etwas an der Art und Weise geändert hat, wie die Kachel-Assets geliefert werden. Ich habe versucht, zwischen osm und wms Schichten ohne Änderung zu wechseln, jede Hilfe würde geschätzt werden. Hier

ist der zugehörige Code:

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(); 
    }); 
}, 

Hier ist der Ausgang:

Answer 1

So fand ich das Problem. Twitter Bootstrap hat eine Zeile in seiner Reset-Datei, die setzt:

img { max-width: 100% } 

Dies war Quetschen der Bilder. Sie können das Problem beheben, indem Sie:

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

Einstellung img { max-width: 100% }-img { max-width:none; } das Problem nicht lösen.

Jedoch dies wird eine unbeabsichtigte Wirkung auf Bilder auf Ihrer Website haben. Ich benutze auch die Karussell-Komponente von Bootstrap Twitter für Bilder und wenn ich das obige änderte, passten die Bilder nicht in das Karussell. Daher habe ich es so geändert, dass es nur auf die Bilder im OpenLayers/OpenStreetMap div zielt.

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