ArcGIS开发基础教程（二）：核心概念之Map和View

核心概念之Map和View

Map是用于管理图层和底图引用的容器。View用于显示地图图层并处理用户交互，弹出窗口，小部件和地图位置。通俗来说，可以理解为Map负责地图数据的管理，而View负责处理地图数据的显示及地图与用户之间的交互。

Map介绍

地图是由Map类创建的。Map对象总是被传递给一个View对象。有两个View类用于显示地图：MapView类用于展示2D地图，SceneView类用于展示3D地图。

创建Map

一般方法

创建map的一种方法是建立一个新的Map类的实例，同时指定一个底图和可选的图层集合。

底图与图层类型在后续的章节会详细说明。

const myMap = new Map({                // Create a Map object
  basemap: "streets-vector",
  layers: additionalLayers             // Optionally, add additional layers collection
});

const mapView = new MapView({          // The View for the Map object
  map: myMap,
  container: "mapDiv"
});

通过Web Map或Web Scene

创建map的第二种方式是加载 web map（用于2D地图）或web scene（用于3D地图）。

Web Map和Web Scene是包含地图或场景设置的JSON结构。这包括对底图、图层、图层样式、弹出窗口、图例、标签等的设置。它们通常是通过ArcGIS Online地图查看器或ArcGIS Online场景查看器创建的。ArcGIS Online或ArcGIS Enterprise会给它们分配一个唯一的ID，并将它们存储为portal items。

示例：
https://www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30

• 通过WebMap创建

  const webMap = new WebMap({                        // Define the web map reference
    portalItem: {
      id: "41281c51f9de45edaf1c8ed44bb10e30",
      portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal
    }
  });
  
  const view = new MapView({
    map: webMap,                                     // Load the web map
    container: "viewDiv"
  });
  

• 通过WebScene创建

  const webScene = new WebScene({                    // Define the web scene reference
    portalItem: {
      id: "579f97b2f3b94d4a8e48a5f140a6639b",
      portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal
    }
  });
  
  const view = new SceneView({                       // Load the web scene
    map: webScene,
    container: "viewDiv"
  });
  

View介绍

有单独的类用于创建map和scene的视图：MapView和SceneView类。MapView显示的是Map对象的2D视图，SceneView显示的是3D视图。

创建View

为了使地图可见，view对象需要一个map对象和一个识别div元素或div元素引用的id属性的字符串。

• 创建MapView

  const mapView = new MapView({          // Create MapView object
    map: myMap,
    container: "mapViewDiv"
  });
  

• 创建SceneView

  const sceneView = new SceneView({      // Create SceneView object
    map: myMap,
    container: "sceneViewDiv"
  });
  

设置map的可视范围

MapView和SceneView的初始位置可以在创建视图时通过设置 center 和 zoom 或者 scale属性来设置。

const view = new MapView({
  center: [ -112, 38 ],          // The center of the map as lon/lat
  zoom: 13                      // Sets the zoom level of detail (LOD) to 13
});

视图的位置在初始化后也可以通过更新属性来更新。

当使用SceneView（3D）时，可以通过定义 camera属性来设置观察者的位置。

const view = new SceneView({
  camera: {
    position: [
       -122, // lon
         38, // lat
      50000  // elevation in meters
    ],
    heading: 95, // direction the camera is looking
    tilt: 65 // tilt of the camera relative to the ground
  }
});

将视图通过动画改变位置

MapView的goTo方法也会改变视图的位置，但提供了额外的选项来平稳过渡。这种技术经常被用来从表面上的一个位置 "飞 "到另一个位置，或者放大到搜索结果。
goTo方法可以接受一个Geometry, Graphic, or Viewpoint对象。其他选项可以控制动画效果。

view.goTo({                            // go to point with a custom animation duration
  target: {
      center: [ -114, 39 ]
    }, {
      duration: 5000
  });
});

效果预览：

与视图交互

View还负责处理用户交互和显示弹出窗口。View为用户的交互提供了多个事件处理程序，如鼠标点击、键盘输入、触摸屏互动、摇杆和其他输入设备。

示例：

当用户点击地图时，默认行为是显示图层中已经预先配置好的弹出窗口。这种行为也可以用代码手动实现，即监听点击事件并使用hitTest()方法来寻找用户点击的要素。

view.popup.autoOpenEnabled = false;  // Disable the default popup behavior

view.on("click", function(event) { // Listen for the click event
  view.hitTest(event).then(function (hitTestResults){ 
    // Search for features where the user clicked
    if(hitTestResults.results) {
      view.popup.open({ // open a popup to show some of the results
        location: event.mapPoint,
        title: "Hit Test Results",
        content: hitTestResults.results.length + "Features Found"
      });
    }
  })
});

添加小部件和 UI 组件

view也是一个添加小部件和HTML元素的容器。view.ui提供了一个DefaultUI容器，用来显示视图的默认widget。通过使用view.ui.add方法，也可以将额外的widget和HTML Elements添加到视图中。

演示添加搜索widget：

  var searchWidget = new Search({
    view: view
  });

  // Add the search widget to the top right corner of the view
  view.ui.add(searchWidget, {
    position: "top-right"
  });