Question

我希望我的开放图层地图适合全屏。我希望用户能够在里面导航，缩放和拖动它。

这是一个小提琴：http://jsfiddle.net/mhicauber/t8K4p/1/

我的疑问是，我不了解我在制作地图时给出的一些价值观：

mapLayer = new OpenLayers.Layer.Image(
     'My map',
     'http://tchanca.com/private/Masse1080.jpg',
 OpenLayers.Bounds.fromString("-160,-90.0,160,90.0"), new OpenLayers.Size(screenSize.width, screenSize.height), {
     maxExtent: OpenLayers.Bounds.fromString("-160,-90.0,160,90.0")
 });

使用这些值，用户可以将地图的一部分拖出屏幕。如果我将maxExtent值更改为0,0,0,0，那么地图就会包含在屏幕中，并且不能拖到外面，但是一旦我放大，我就无法拖动地图。

请提及的-160,-90.0,160,90.0值是多少？我应该填写什么代码：

使地图适合加载时的屏幕
允许用户缩放并拖动它
但限制拖动到屏幕尺寸？

非常感谢你。请原谅我对制图学缺乏了解，我对这个问题非常赞不绝口......

Answer 1

对于那些来到这里并使用OpenLayers 3的人来说，这里有一些可能有用的信息。

没有更多的限制范围。相反，你必须设置＆＃39;范围＆＃39;图层和视图中的选项。

也没有更多的OpenLayers.Bounds。而是使用ol.extent，这是一个包含4个值的数组。

示例：

var maxExtent = ol.proj.transformExtent([-122.445717,47.576989,-122.218094,47.71623], 'EPSG:4326', 'EPSG:3857')
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.Stamen({
            layer: 'watercolor'
          }),
          extent: maxExtent
        }),
        new ol.layer.Tile({
          source: new ol.source.Stamen({
            layer: 'terrain-labels'
          }),
          extent: maxExtent
        })
      ],
      target: 'map',
      view: new ol.View({
        center: ol.proj.transform(
            [-122.333407, 47.607436], 'EPSG:4326', 'EPSG:3857'),
        extent: maxExtent,
        zoom: 14
      })
    });

Answer 2

我认为您实际需要的属性是restrictedExtent。 restrictedExtent控制用户能够平移的地图部分。如果您不限制缩放级别，那么用户仍然可以缩小以查看地图的其余部分，但是他们将无法平移地图。

首先，您应该使用OpenLayers.Bound.FromString("-160,-90.0,160,90.0")。

，而不是使用new OpenLayers.Bounds(-160, -90, 160, 90)

对于(-160, -90, 160, 90)（可能是整个地图？），这意味着用户可以自由地平移这些坐标，如果这是整个地图，那么它不会限制任何东西。

如果将范围限制为(0, 0, 0, 0) - 地图的中心，用户无法在任何地方进行平移 - 地图始终固定在中心位置 - 但它们仍然可以自由缩放，因为不受restrictedExtent控制。

(-160, -90, 160, 90")中的值是以度为单位的坐标 - 它是一个边界框(left, bottom, right, top)。可以使用各种不同的坐标系，您可以明确指定要与projection: "EPSG:3857"一起使用的坐标系。

对于像您这样的自定义地图图层，它们只是与创建图层时传入的边界相关的坐标。

解决您的问题：

我使用边界layer创建地图new OpenLayers.Bounds(-180,-90.0,180,90.0)，并使用相同的边界框在map（而不是图层）上设置restrictedExtent。

map = new OpenLayers.Map('map', {
    controls: [],
    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
});

mapLayer = new OpenLayers.Layer.Image(
    'My map',
    'http://tchanca.com/private/Masse1080.jpg',
    new OpenLayers.Bounds(-180,-90.0,180,90.0), 
    new OpenLayers.Size(screenSize.width, screenSize.height), 
    {}
);
map.addLayer(mapLayer);

由于mapLayer占据了map的全部范围，因此用户无法缩小以查看任何白色边距，也无法在其外部平移，因为除此之外不存在任何内容。

JSFiddle

Answer 3

这是OpenLayers3的另一种方法。根据您要引用的内容，最简单的方法是使用ol.proj.Projection函数直接从您想要的投影（ol.layer）或图层（任何getExtent()类）中获取范围。如果是EPSG：3857，则可以使用：

var map = new ol.Map({
    ...
    view: new ol.View({
        ...
        extent: ol.proj.get("EPSG:3857").getExtent()
  })
});

Answer 4

我在这个要点上创建了一个非常基本的答案：https://gist.github.com/cfh294/e4495b9ff6d989db950ccd2573422808#file-restrictedextent-js

“肉和土豆”：

map.on("movestart", function(evt) {
    panStartCenter = view.getCenter();
});

map.on("moveend", function(evt) {
    var panEndCenter = view.getCenter();
    var x = panEndCenter[0];
    var y = panEndCenter[1];
  });

   // if the center no longer resides in the max extent, snap the map back to where it was 
   // before the pan
    if (!(ol.extent.containsXY(maxExtent, x, y))) {
        view.setCenter(ol.Coordinate(panStartCenter));
    }
});

限制打开图层地图拖出屏幕

4 个答案: