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 事件部分。