設置和使用地圖的範圍—ArcGIS API for JavaScript

設置地圖的範圍或獲得地圖範圍是使用地圖時常見操作。在地圖上設置新範圍的一個簡單的替代方法是在地圖上調用centerAndZoom()法，該方法基於給定的中心點和縮放級別設置新的範圍。

默認範圍
如果在初始化地圖時不包含範圍信息，則默認範圍是地圖服務初始範圍，就是上次保存在地圖文檔中的地圖範圍。如果你使用多個服務，默認範圍是添加的基本映射或第一個加載圖層的初始範圍。

設置初始範圍
如果你希望起始範圍不是默認的範圍，你可以通過以下方法設置初始範圍：
- 在Map構造函數中設置範圍

function init() {
  var startExtent = new Extent(-95.271, 38.933, -95.228, 38.976,
          new SpatialReference({ wkid:4326 }) );
  var myMap = new Map("mapDiv", { extent: startExtent });
  var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
  myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
}

• 通過Map.setExtent設置地圖範圍

function init() {
  myMap = new Map("mapDiv");
  var startExtent = new Extent(-95.271, 38.933, -95.228, 38.976,
          new SpatialReference({ wkid:4326 }) );

  myMap.setExtent(startExtent);
  var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
  myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
}

• 改變下第二個方法也行

function init() {
  myMap = new Map("mapDiv");
  var spatialRef = new SpatialReference({ wkid:4326 });
  var startExtent = new Extent();
  startExtent.xmin = -124.71;
  startExtent.ymin = 31.89;
  startExtent.xmax = -113.97;
  startExtent.ymax = 42.63;
  startExtent.spatialReference = spatialRef;

  myMap.setExtent(startExtent);
  var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
  myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
}

設置使用多個服務的起始範圍
當在同一應用程序中包含多個服務時，默認範圍是基礎圖層的初始範圍。如果你希望自定義初始範圍，你可以在Map構造函數中設置該範圍。
在某些情況下，你可能自己都不知道要設多大範圍。在其他情況下，你知道要使用輔助圖層的範圍。例如，ArcGIS Online服務都具有世界範圍。你可能希望將地圖範圍視爲本地數據的範圍而不是世界範圍。
在以下示例中，使用了兩個服務。基礎圖層是具有世界範圍的ArcGIS Online圖層，第二個圖層有一定的範圍。initLayers()函數創建兩個圖層，您必須創建第二個函數來設置範圍，因爲您不能在加載類之前調用​​類上的屬性或事件。在這種情況下，函數createMapAddLayers()被調用，對於這兩個地圖服務已經觸發了onLoad事件。此功能創建地圖，將範圍設置爲myService2，然後將兩個地圖服務添加到地圖。初始地圖範圍

function initLayers() {
  var primaryMapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
  var myService1 = new ArcGISTiledMapServiceLayer(primaryMapServiceURL);

  var secondaryMapServiceURL = "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";
  var myService2 = new ArcGISDynamicMapServiceLayer(secondaryMapServiceURL, {opacity:0.75});

  var layerLoadCount = 0;
  //When both layers have loaded, run addLayersSetExtent
  myService1.on("load", function(service) {
    layerLoadCount += 1;
    if (layerLoadCount === 2) {
      createMapAddLayers(myService1,myService2);
    }
  });

  myService2.on("load", function(service) {
    layerLoadCount += 1;
    if (layerLoadCount === 2) {
      createMapAddLayers(myService1,myService2);
    }
  });
}

//Create a map, set the extent, and add the services to the map.
function createMapAddLayers(myService1,myService2) {
  //create map
  myMap = new Map("mapDiv", { extent:myService2.fullExtent });
  myMap.addLayer(myService1);
  myMap.addLayer(myService2);
}

獲得地圖當前範圍
您可以使用Map.onExtentChange事件獲取地圖的當前範圍。
在以下示例中，Map.onExtentChange在init()函數中引用。當用戶平移或縮放地圖時，將對該showExtent()功能進行回調，返回extent對象。在該示例中，對象被命名爲ext，對象屬性包括xmin，ymin，xmax，和ymax。在該showExtent()功能中，四個範圍值在一個字符串中連接在一起，以便在HTML頁面上顯示。

function init(){
 var myMap = new Map("mapDiv");

 var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
 myMap.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
 myMap.addLayer(mapServiceURL);

 myMap.on("extent-change", showExtent);
}

function showExtent(ext){
 var extentString = "";
 extentString = "XMin: " + ext.xmin +
   " YMin: " + ext.ymin +
   " XMax: " + ext.xmax +
   " YMax: " + ext.ymax;
 document.getElementById("onExtentChangeInfo").innerHTML = extentString;
}

你也可以使用Map.extent獲取當前的範圍
您可以使用Map.extent屬性獲取地圖的當前範圍。此屬性是隻讀屬性。如果要設置範圍，則需要使用Map.setExtent方法。

本文首發於微信公衆號：GISXXCOM