为什么OpenLayers-3加载太多的地图？

Question

我正试图从我的geoserver在一个网页上加载地图，当它加载时，它几乎是自己的两倍。第一张地图是来自geoserver管理页面的预览，第二张是它在网页上拖放时是如何加载的。

​

​

​

​

Answer 1

最后，我在层中添加了一些属性，这是我的代码：

mapInit: function() {         
          var _this = this;

          this.map = new ol.Map({
            target: 'mapdiv', //element to render in
            interactions: ol.interaction.defaults({
                shiftDragZoom: false,
                altShiftDragRotate: false,
                dragPan: false
            }),
            controls: ol.control.defaults({ 
                attributionOptions: ({ 
                    collapsible: true 
                })
            }).extend([ new ol.control.ScaleLine() ]),
            renderer: 'canvas',
            layers: [
                     new ol.layer.Tile({
                         source: new ol.source.TileWMS({
                             url: 'http://***.**.**.***:8080/geoserver/Global/wms',
                             params: {'LAYERS': 'Global Map', 'TILED': true},
                             noWrap: true, //<----added this
                             wrapX: false  //<----added this
                         }),
                         //constrain the extent of the servable tiles to only 1 world's coordinates.
                         extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34] //<----added this
                     }) 
                     ],

Answer 2

Open层使用一个平铺系统，映射将在web浏览器中不断重复，以确保持续的覆盖和无缝的视图填充屏幕/div。将焦点集中在特定区域的最简单方法是使用缩放级别。

var map = new OpenLayers.Map("mapdiv");
map.setCenter(new OpenLayers.LonLat(yourLong, yourLat), zoomLevel);

上面的代码将以给定的缩放级别作为int值的特定区域为中心。还有其他方法可以在这里设置边界和缩放：

http://dev.openlayers.org/docs/files/OpenLayers/BaseTypes/Bounds-js.html