Openlayers/Openstreetmap背景是垂直條紋和壓縮

因此，我的openlayers實現的背景似乎被擠壓成垂直條紋。奇怪的是，它並不總是這樣，但即使當我把所有的變化回溯到我知道它正在工作的時候，它仍然被打破。這讓我懷疑，瓦片資產交付的方式可能是否發生了變化。我試圖切換使用osm和wms層沒有任何改變，任何幫助將不勝感激。Openlayers/Openstreetmap背景是垂直條紋和壓縮

下面是相關代碼：

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

這裏是輸出：

here is the output

來源

2012-06-29 joshontheweb

所以我發現這個問題。 Twitter bootstrap在其重置文件中有一行設置：

img { max-width: 100% }

這是壓扁圖像。您可以通過執行修復：

img { max-width: none; }

來源

2012-06-29 22:48:57 joshontheweb

如果你不接受你自己的答案？ – Knubo

非常感謝！做好了發現這一點！ – Eamorr

一年後，這個問題和答案解決了我的問題！ – Daviddd

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.

來源

2012-06-29 23:13:19 ngonzalez

設置img { max-width: 100% }到img { max-width:none; }並解決問題。

但是這會對整個網站的圖像產生意想不到的影響。我也使用Bootstrap Twitter的輪播組件來處理圖片，並且當我將上述內容更改時，圖片並不適合旋轉木馬。因此我改變了它，使它只針對OpenLayers/OpenStreetMap div中的圖像。

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

來源

2013-05-08 14:08:48 Sid

Openlayers/Openstreetmap背景是垂直條紋和壓縮

回答

相關問題