javascript – Openlayers / Openstreetmap背景是垂直条纹和挤压

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

这是输出：

解决方法

所以我发现问题. Twitter bootstrap在其重置文件中设置了一行：

img { max-width: 100% }

这是挤压图像.你可以通过这样做来解决它：

img { max-width: none; }

原文地址：https://www.jb51.cc/js/152606.html