1. 程式人生 > >設定和使用地圖的範圍—ArcGIS API for JavaScript

設定和使用地圖的範圍—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
這裡寫圖片描述