Nền tảng Openlayers/Openstreetmap có sọc dọc và được xếp theo chiều dọc

Question

Vì vậy, nền tảng của triển khai phần mở rộng của tôi dường như được xếp thành các sọc dọc. Điều kỳ lạ là nó không phải luôn luôn như thế này, nhưng ngay cả khi tôi stash tất cả các thay đổi của tôi trở lại một điểm mà tôi biết nó đã được làm việc, nó vẫn còn bị hỏng. Nó làm cho tôi tự hỏi nếu có lẽ một cái gì đó đã thay đổi về cách thức các tài sản ngói đang được chuyển giao. Tôi đã thử chuyển đổi giữa việc sử dụng các lớp osm và wms mà không thay đổi, bất kỳ trợ giúp nào cũng sẽ được đánh giá cao.

Đây là mã thích hợp:

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

Đây là kết quả:

Answer 1

Vì vậy, tôi thấy vấn đề. Twitter bootstrap có một dòng trong tập tin thiết lập lại của nó mà đặt:

img { max-width: 100% } 

Điều này đã làm mờ hình ảnh. Bạn có thể sửa chữa nó bằng cách thực hiện:

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

Thiết img { max-width: 100% }-img { max-width:none; } không giải quyết vấn đề.

Tuy nhiên điều này sẽ có ảnh hưởng không mong muốn trên hình ảnh trên toàn bộ trang web của bạn. Tôi cũng đang sử dụng thành phần băng chuyền của Bootstrap Twitter cho hình ảnh và khi tôi thực hiện những thay đổi trên, hình ảnh không phù hợp trong băng chuyền. Vì vậy, tôi đã thay đổi nó để nó chỉ nhắm mục tiêu các hình ảnh trong div OpenLayers/OpenStreetMap.

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