設定和使用地圖的範圍—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