限制打開圖層地圖拖出屏幕

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 ，那么，map將包含在屏幕中，並且不能拖到外面，但是一旦我放大，我就無法拖動地圖。

-160,-90.0,160,90.0值是什么？ 我應該用什么代碼：

• 使地圖適合加載時的屏幕
• 允許用戶縮放和拖動它
• 但限制拖動到屏幕大小？

非常感謝你。 請原諒我對制圖學缺乏了解，我對這個問題很不錯...

Answer 1

對於那些來到這里並使用OpenLayers 3的人來說，這里有一些可能有用的信息。

沒有更多的限制范圍。 相反，您必須在圖層和視圖中設置“范圍”選項。

也沒有更多的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控制用戶能夠平移的地圖部分。 如果您不限制縮放級別，則用戶仍然可以縮小以查看地圖的其余部分，但是他們將無法平移地圖。

首先，您應該使用new OpenLayers.Bounds(-160, -90, 160, 90) OpenLayers.Bound.FromString("-160,-90.0,160,90.0") ，而不是使用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"坐標系projection: "EPSG:3857" 。

對於像您這樣的自定義地圖圖層，它們只是與創建圖層時傳入的邊界相關的坐標。

要解決您的問題：

我用邊界new OpenLayers.Bounds(-180,-90.0,180,90.0)創建地圖layer ，並在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的另一種方法。 根據您想要引用的內容，最簡單的方法是使用getExtent()函數直接從您想要的投影（ ol.proj.Projection ）或圖層（任何類的ol.layer ）獲取范圍。 如果是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));
    }
});