限制打开图层映射拖出屏幕

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

我想你真正要找的是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 2

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

再也没有restrictedExtent了。相反，您必须在您的层和视图中设置“区段”选项。

也没有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 3

以下是OpenLayers3的另一种方法。根据您想要引用的内容，最简单的方法是使用ol.proj.Projection函数直接从所需的投影( ol.layer)或图层(任何ol.layer类)中获得范围。在EPSG:3857的情况下，这项工作：

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