Openlayers / Openstreetmap 的背景有垂直条纹和压缩的现象。

9

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

以下是输出内容:

这是输出内容

3个回答

19

我找到了问题所在。Twitter Bootstrap 在其重置文件中设置了以下行:

img { max-width: 100% }

这会压缩图像。您可以通过执行以下操作来解决:

img { max-width: none; }

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

img { max-width: 100% } 改为 img { max-width:none; } 可以解决问题。

然而,这样做会对网站中的所有图片产生意想不到的影响。我还在使用 Bootstrap Twitter 的走马灯组件来显示图片,当我进行上述更改时,图片无法适应走马灯。因此,我将其改为只针对 OpenLayers / OpenStreetMap 区域内的图片。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接