在使用ArcGIS for JS 4.x中，View 和 Map 这两货是一对好基友，都是成双成对出现使用的，在开发地图应用中肯定会使用它们两的。 Map 负责管理地图中的各种图层数据（包括底图），
View 负责Map中图层、微件、弹出框等展示以及处理地图点击等用户交互。总的来说View负责和用户打交道，Map负责提供数据给View。

Map 的使用

Map 用来管理地图中的所有图层，可以进行添加图层、移除图层等操作。Map的实例总是传递给View使用，当然一个Map可以给多个View使用，这样就可以通过一个Map 管理多个View的显示的图层。Map的构造函数接收一个包含Map属性的对象或者不接任何参数进行实例化。

// 加载 Map and MapView 模块
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  // 实例化Map对象
  var myMap = new Map({
    basemap: 'streets'
  });
  //实例化一个 MapView 对象 (用来展示二维地图) 将Map传递给它
  var view = new MapView({
    map: myMap
  });
});

Map 有两个子类，分别为WebMap和WebScene，这两货都可以加载在ArcGIS Online或ArcGIS Enterprise portal配置好的地图，WebMap负责加载二维地图供View 子类MapView使用，WebScene负责加载三维场景给
View子类 SceneView使用。创建WebMap和WebScene很简单，所以如果我们服务端配的是ArcGIS Online或ArcGIS Enterprise portal，可以现在上面配置地图，然后再用ArcGIS for Js进行加载，会少写不少代码，如果服务端
没配这么高大上的，那就还是乖乖的用 Map把图层加载进去。

/**
 * 使用WebMap
 */
const webMap = new WebMap({                        
  portalItem: {
    id: "41281c51f9de45edaf1c8ed44bb10e30",
    portal: "https://www.arcgis.com"  //默认情况是连接ArcGIS Online，如需连接ArcGIS Enterprise portal，改为对应地址
  }
});
const view = new MapView({// 加载webMap
  map: webMap,                                     
  container: "viewDiv"
});

/**
 * WebScene
 */
const webScene = new WebScene({    
  portalItem: {
    id: "579f97b2f3b94d4a8e48a5f140a6639b",
    portal: "https://www.arcgis.com"  //默认情况是连接ArcGIS Online，如需连接ArcGIS Enterprise portal，改为对应地址
  }
});

const view = new SceneView({  // 加载webMap
  map: webScene,
  container: "viewDiv"
});
  • Map常用属性

属性

类型

属性描述

allLayers

Collection<Layer>

管理map中包含底图的所有图层的集合

basemap

Basemap

定义Basemap，用于底图管理

ground

Ground

定义Ground，用户管理地形起伏数据，只在三维中可用

layers

Collection<Layer>

管理map中除了底图之外的其他业务图层

  • Map 常用方法

方法

返回值

方法描述

add(layer, index)

无

添加业务图层，参数index指定插入的顺序值，默认为插入到最后（显示在最上层）

addMany(layers, index)

无

批量添加业务图层，参数layers为图层数组，参数index指定插入的顺序值，默认为插入到最后（显示在最上层）

findLayerById(layerId)

Layer

根据图层的ID值，查找对应的图层

remove(layer)

Layer

移除传入的图层

removeAll()

Layer[]

移除所有业务图层，返回被移除的图层数组

removeMany(layers)

Layer[]

批量移除图层，返回被移除的图层数组

reorder(layer, index)

Layer

改变指定图层的排列位置

可以看出，Map 对象的属性和方法基本都是围绕图层管理，我们在开发中也是主要使用Map进行图层管理。

View 的使用

View 主要负责同用户交互，展示地图、弹出框、微件，指定显示范围，监听点击事件等。 View 有两子类，分别为 MapView (用于显示二维地图) 和 SceneView （用于显示三维地图），
我们也都是通过实例化两子类来创建二维地图和三维地图。

const mapView = new MapView({// 创建 MapView 
  map: myMap,
  container: "mapViewDiv" //页面中用于显示二维地图div元素的ID
});
const sceneView = new SceneView({// 创建 SceneView
  map: myMap,
  container: "sceneViewDiv"//页面中用于显示三维地图div元素的ID
});

当然我们在实例化MapView 或 SceneView 时可以在传递对象中设置初始属性，例如设置center和zoom可以控制地图初始化时候的中心点和显示层级。

const view = new MapView({
  center: [ -112, 38 ], // 设置中心点
  zoom: 13     //设置初始显示层级
});


var view = new SceneView({
  camera: {//设置三维查看视角
    position: [
       -122, // 精度
         38, // 纬度
      50000  // 高度
    ],
    heading: 95, //俯仰角
    tilt: 65 // 倾斜角
  }
});
  • View常用属性

属性

类型

属性描述

container

HTMLDivElement

用户显示地图的div元素的ID值或DOM元素

graphics

Collection<Graphic>

View 中默认维护一个 Graphic 的集合，方便用来存储用户自定义的图形

map

Map

负责管理图层的Map对象

popup

Popup

管理View的弹出框，可以用来监听弹出框等操作

spatialReference

SpatialReference

管理View的坐标系

center

Point

显示范围的中心点坐标

extent

Extent

显示范围

highlightOptions

Object

管理地图要素选中状态的样式

resolution

Number

地图的分辨率

scale

Number

地图的比例尺

viewpoint

Viewpoint

地图显示范围，中心点等信息

zoom

Number

地图显示层级(LOD)

MapView常用属性基本跟以上表格差不多，但SceneView还有几个特有常用属性

属性

类型

属性描述

camera

Camera

查看三维场景的视角，可设置高度、俯仰角等

environment

Accessor

设置三维场景环境，如日期、是否显示阴影等

viewingMode

String

展示模式，只有local和global,分别表示以平面展示的本地模式和以球体展示的全局模式

  • View 常用方法
  1. goTo(target, options) -> Promise ：缩放移动地图到以某个目标为地图中心，参数 target 就是要移动到的目标，可以是一个坐标([longitude, latitude])、一个坐标数组、
    Geometry对象 ( Geometry数组)、Graphic对象 ( Graphic数组)、Viewpoint、Camera（三维地图），参数 options 可以设置移动的时间、是否有动画等移动效果。
  2. hitTest(screenPoint, options) -> Promise : 根据传入的屏幕坐标或者鼠标事件，获取地图图层在该点位下所有的展示的要素，可以用于实现根据屏幕查询要素等功能。
    参数screenPoint，可接受一个屏幕坐标或者一个鼠标事件，参数 options 可以设置查询的时候包含哪些类型图层或者排除哪些类型图层，以下Demo实现了，根据地图点击的事件，查询 myLayer 图层
    在点击点的要素信息。
// 监听地图点击事件
view.on("click", function (event) {
//使用屏幕点击事件进行查询
view.hitTest(event).then(function (response) {
    if (response.results.length) {
    var graphic = response.results.filter(function (result) {
        //判断要素所属的图层是否为 myLayer
        return result.graphic.layer === myLayer;
    })[0].graphic;

    // do something with the result graphic
    console.log(graphic.attributes);
    }
});
});
  1. on(type, handler) -> Object : 注册监听地图事件，参数 type表示地图事件例如 click（点击事件）、blur（鼠标滑动事件）等，handler为事件触发的回调函数，返回值是一个对象，调用返回值的
    remove()方法，可以移除事件监听。
//监听点击事件
var clickEvt= view.on("click", function(event){
  // 获取点击点坐标
  console.log(event.mapPoint);
});

//移除监听点击事件
clickEvt.remove();
  1. takeScreenshot(options) -> Promise : 地图截图，参数options可以设置截图的格式、质量、大小等参数。
// 截图大小
var options = {
  width: 200,
  height: 200
};

//进行截图
view.takeScreenshot(options).then(function(screenshot) {
  //将截图显示到页面上
  var imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
  1. toMap(screenPoint) -> Point : 将屏幕坐标转为地图坐标
  2. toScreen(point) -> ScreenPoint ： 将地图坐标转为屏幕坐标
  3. when(callback, errback) -> Promise ： 监听 View 的初始化，两参数都是回调函数，初始化完成时执行 callback 回调，失败时执行 errback 回调。
  4. watch(path, callback) -> WatchHandle : 只要是继承Accessor的类都有此方法，是API中非常重要也是我们经常用的一个方法，可用于监听对象任何属性的变化。
//监听比例尺编号
var handle = mapview.watch("scale", function(newValue, oldValue, propertyName, target) {
  console.log(propertyName + " changed from " + oldValue + " to " + newValue);
});
//移除监听
handle.remove();