container view_ArcGIS4Js重要概念1：Map和View

在使用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常用属性

属性类型属性描述allLayersCollection<Layer>管理map中包含底图的所有图层的集合basemapBasemap定义Basemap，用于底图管理groundGround定义Ground，用户管理地形起伏数据，只在三维中可用layersCollection<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常用属性

属性类型属性描述containerHTMLDivElement用户显示地图的div元素的ID值或DOM元素graphicsCollection<Graphic>View 中默认维护一个 Graphic 的集合，方便用来存储用户自定义的图形mapMap负责管理图层的Map对象popupPopup管理View的弹出框，可以用来监听弹出框等操作spatialReferenceSpatialReference管理View的坐标系centerPoint显示范围的中心点坐标extentExtent显示范围highlightOptionsObject管理地图要素选中状态的样式resolutionNumber地图的分辨率scaleNumber地图的比例尺viewpointViewpoint地图显示范围，中心点等信息zoomNumber地图显示层级(LOD)

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

属性类型属性描述cameraCamera查看三维场景的视角，可设置高度、俯仰角等environmentAccessor设置三维场景环境，如日期、是否显示阴影等viewingModeString展示模式，只有local和global,分别表示以平面展示的本地模式和以球体展示的全局模式

• View 常用方法

1. goTo(target, options) -> Promise ：缩放移动地图到以某个目标为地图中心，参数 target 就是要移动到的目标，可以是一个坐标([longitude, latitude])、一个坐标数组、
   Geometry对象 ( Geometry数组)、Graphic对象 ( Graphic数组)、Viewpoint、Camera（三维地图），参数 options 可以设置移动的时间、是否有动画等移动效果。
2. hitTest(screenPoint, options) -> Promise<HitTestResult> : 根据传入的屏幕坐标或者鼠标事件，获取地图图层在该点位下所有的展示的要素，可以用于实现根据屏幕查询要素等功能。
   参数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<Screenshot> : 地图截图，参数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();

总结

本小节主要介绍了View和Map这对基友，也是我们开发中肯定会使用的两对象，文章总结的常用的方法和属性，满足基本的开发是足够的，如果还想深入研究，可以看看两对象的API文档。

View ： https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html

MapView ： https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html

SceneView ： https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html

欢迎关注我的微信公众号，第一时间为您推送相关教程。