Openlayers/Openstreetmapの背景が縦に縞模様になっています

Question

私のopenlayersの実装の背景が縦縞になるようです。変わったことは、いつものようなものではなかったということです。しかし、すべての変更を私が働いていることが分かっているところに隠していても、それはまだ壊れています。タイル資産の配達方法が変わったかどうかは疑問です。私は変更なしでosmとwmsレイヤーを使用して切り替えることを試みましたが、どんな助けも高く評価されます。ここで

は、関連コードです：ここでは

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

が出力されます。

Answer 1

だから私は問題を発見しました。これは、画像をつぶした

img { max-width: 100% } 

：Twitterのブートストラップがセットにそのリセットファイルの行を持っています。あなたは行って、それを修正することができます：

img { max-width:none; }から img { max-width: 100% }の設定

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

は、問題を解決しません。

これはあなたのウェブサイト全体の画像に意図しない影響を与えます。私はまた、画像にBootstrap Twitterのカルーセルコンポーネントを使用しています。上記のように変更した場合、画像はカルーセルに収まりませんでした。したがって、OpenLayers/OpenStreetMap div内の画像のみを対象とするように変更しました。

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