JavaScript ArcGIS MapView用法及代碼示例

AMD: require(["esri/views/MapView"], (MapView) => { /* code goes here */ });

ESM: import MapView from "@arcgis/core/views/MapView";

類： esri/views/MapView

繼承: MapView > View > Accessor

自從：用於 JavaScript 4.0 的 ArcGIS API

• Overview
• 使用視圖
• 程序化導航
• MapView 導航
• MapView 使用遊戲手柄和 3DConnexion 設備進行導航
• 處理事件

概述

MapView 顯示 Map 實例的 2D 視圖。必須創建 MapView 的實例以在 2D 中渲染 Map(及其操作層和基礎層)。要以 3D 形式渲染Map及其圖層，請參閱 SceneView 的文檔。有關視圖的一般概述，請參閱View。

對於用戶在 DOM 中可見的Map，必須創建 MapView 表示至少兩個對象：Map 實例和 DOM 元素。每個分別在Map和容器屬性中設置。

// Create a MapView instance (for 2D viewing)
const view = new MapView({
  map: myMap,  // References a Map instance
  container: "viewDiv"  // References the ID of a DOM element
});

使用視圖

除了負責Map 及其元素的渲染之外，MapView 還處理用戶與Map之間的交互。例如，傳統Map比例尺未設置在 Map 上；它設置在 MapView 上。

view.scale = 24000; // Sets a 1:24,0000 scale on the view

MapView 在構建後可能無法立即準備好顯示。例如，可能需要首先加載Map數據以確定視圖的空間參考，或者 DOM 容器可能尚未具有非零大小。許多視圖方法(例如 hitTest 或 goTo)需要視圖準備好才能使用。

可以調用MapView 實例上的.when() 方法來執行隻能在Map加載後運行的進程。

view.when(function() {
  // MapView is now ready for display and can be used. Here we will
  // use goTo to view a particular location at a given zoom level and center
  view.goTo({
    center: [-112, 38],
    zoom: 12
  });
})
.catch(function(err) {
  // A rejected view indicates a fatal error making it unable to display.
  // Use the errback function to handle when the view doesn't load properly
  console.error("MapView rejected:", err);
});

有關 view.when() 的實時示例，請參閱如何使用 Add 2D overview map in SceneView 示例。

程序化導航

您可以通過使用中心和比例或縮放的組合，或者通過在 MapView 的構造函數中設置範圍或視點屬性來設置初始範圍(或Map的可見部分)。

由於某些視圖屬性會相互覆蓋，因此在構建視圖期間應用這些屬性時會存在一組優先級。初始化時，MapView 需要一個中心和比例，以及可選的旋轉。中心和比例源自多個屬性：中心、縮放、比例、範圍或視點。 center 和 scale 都可以從 extent 和 viewpoint 派生。如果在構造函數中設置了所有屬性，則它們將按照定義的順序應用。例如，比例是從範圍派生的，因此在範圍之後設置比例會覆蓋派生值，而從範圍中心派生的中心保持不變。下表說明了哪些屬性在視圖構造期間具有優先級(被覆蓋的屬性在構造期間不會產生任何影響)。

屬性	覆蓋
viewpoint	範圍、中心、比例、縮放
extent	中心、比例、縮放

const view = new MapView({
  map: map,
  container: "viewDiv",
  zoom: 10,
  extent: initialExtent, // will override zoom
  // map will be centered at [0,0], but the scale from initialExtent will be used
  center: [0,0]
});

// Create a map with Antarctic imagery basemap
const map = new Map({
  basemap: new Basemap({
    portalItem: {
      id: "6553466517dd4d5e8b0c518b8d6b64cb" // Antarctic Imagery
    }
  });
});

// Set the center and zoom level on the view.
// In this case, the view's spatial reference wkid is 3031
// center is lat/long. Projection engine will be loaded dynamically
// to project the center to match the spatial reference of the view
const view = new MapView({
  map: map,  // References a Map instance
  container: "viewDiv"  // References the ID of a DOM element
  center: [-100, 35], // Sets the center point of the view at a specified lon/lat
  zoom: 3 // MapView converts this to its corresponding scale which is 112823780.660964
});

// Sets the center point of the view at a specified lon/lat
view.center = [-112, 38];
view.zoom = 13;  // Sets the zoom LOD to 13

// new extent for the mapview where the spatialReference.wkid is 4326
const extent = new Extent({
  xmin: -9177882,
  ymin: 4246761,
  xmax: -9176720,
  ymax: 4247967,
  spatialReference: {
    wkid: 102100
  }
});

if (!projection.isLoaded()) {
  // load the projection engine if it is not loaded
  await projection.load();
}
view.extent = extent;

由於 View 處理用戶交互，因此單擊等事件是在 MapView 上處理的。使用 goTo() 方法也可以實現動畫，該方法允許您將 MapView 從一個範圍更改或移動到另一個範圍。

縮放和 LOD

為什麽設置MapView.zoom總是不起作用，為什麽它的值是-1？本節介紹 MapView 縮放和 LOD 的工作原理。Map的 basemap 定義加載視圖時 MapView 的有效 LOD。 LOD 具有 scale 和相應的 zoom 值，可用於導航Map。如果MapView具有有效的有效LOD，則可以在MapView上設置縮放值。在這種情況下，視圖將其轉換為相應的比例，或者如果縮放是小數，則對其進行插值。

如果以下陳述成立，則 MapView 的 constraints.effectiveLODs 將是 null：

• Map沒有 basemap ，或
• 底圖沒有 TileInfo ，
• 並且添加到Map的第一層沒有 TileInfo 。

如果有效LOD 為null，則無法在MapView 上設置zoom，因為無法進行轉換。在這種情況下，縮放值將為-1。設置比例就可以了。為了解決這個問題，可以在初始化時通過調用 TileInfo.create().lods 來定義 MapView 的 constraints.lods 。

const layer = new FeatureLayer({
  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0"
});

// initialize the map without basemap, just add the feature layer to the map
// feature layer does not have tileInfo to derive effectiveLODs from
const map = new Map({
  layers: [layer]
});

// Create a tileInfo instance using the default settings and pass its
// resulting LODs to a MapView's constraints.lods.
const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 3, // this will work because we are creating LODs. Otherwise, it will not work
  constraints: {
    lods: TileInfo.create({
      // create the LODs to match the spatial reference of the view
      spatialReference: viewSpatialReference
    }).lods
  },
  spatialReference: viewSpatialReference
});

MapView 導航

MapView 導航默認啟用，包括鼠標交互，如下表所述。

MapView 使用遊戲手柄和 3DConnexion 設備進行導航

當 view.navigation.gamepad.enabled 設置為 true(默認)時，遊戲手柄和 3Dconnexion 設備(如 SpaceMouse)可用於導航。要在 MapView 中啟用縮放，必須將 view.constraints.snapToZoom 設置為 false(默認為 true )。請參閱GamepadInputDevice 了解支持的設備。

處理事件

當用戶與 MapView 交互時，他們的操作會觸發您可以偵聽和響應的事件。例如，您可以監聽用戶將鼠標移到Map上並顯示鼠標位置的坐標。這稱為pointer-move 事件。有關所有事件的列表，請參閱MapView 事件部分。