因此,我的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();
});
},
这是输出:
答案 0 :(得分:19)
所以我发现了问题。 Twitter引导程序在其重置文件中有一行设置:
img { max-width: 100% }
这是在压缩图像。您可以通过执行以下操作来解决此问题:
img { max-width: none; }
答案 1 :(得分:7)
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.
答案 2 :(得分:2)
将img { max-width: 100% }
设置为img { max-width:none; }
可以解决问题。
然而这会对您网站上的图片产生意想不到的影响。我也使用Bootstrap Twitter的旋转木马组件进行图像处理,当我上面改变时,图像不适合旋转木马。因此我更改了它,以便它只针对OpenLayers / OpenStreetMap div中的图像。
div#outlet_map img { max-width:none; }