原文来自于
Maps and Views:https://developers.arcgis.com/javascript/latest/guide/maps-and-views/
介绍
地图（Map）是用于管理对图层（layers ）和底图（basemaps）的引用的容器。视图(Views)用于显示地图图层并处理用户交互，弹出窗口，窗口小部件和地图位置。
类关系示意图.png
关于地图
地图是从Map类创建的。Map对象始终传递给View对象。有两个View类用于显示地图：MapView用于2D地图 和 SceneView类用于3D地图。
创建地图
创建地图的一种方法是：Map类在指定一个底图（basemap）和可选的图层集合（layers）时创建类的新实例。
const myMap = new Map({ // 创建一个Map对象
basemap: "streets-vector",
layers: additionalLayers // 可选，添加其他图层集合
});
const mapView = new MapView({ // 新建View对象，Map对象添加到View对象中
map: myMap,
container: "mapDiv"
});
详细了解可以添加到地图的不同类型的图层。
从Web地图或Web场景创建地图
创建地图的第二种方法是：加载Web地图（用于2D地图）或 Web场景（用于3D地图）。
Web地图和Web场景是包含地图或场景设置的JSON结构。这包括底图，图层，图层样式，弹出窗口，图例，标签等的设置。它们通常与ArcGIS Online地图查看器或ArcGIS Online场景查看器以交互方式创建。ArcGIS Online或ArcGIS Enterprise为其分配唯一ID并将其存储为门户项目。
WebMap类和WebScene类可分别通过其独特的ID来访问加载Web地图和Web场景。标识项目的ID可以用在地图查看器和场景查看器或者项目页面中中的URL的参数。默认门户网站是ArcGIS Online，URL是https://www.arcgis.com。如果使用ArcGIS Enterprise，则必须指定门户URL。
例：
https://www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30
当WebMap和WebScene对象加载Web地图和Web场景时，所有设置都会自动应用于Map和Scene。例如，设置底图和图层，应用图层样式，并为每个图层定义弹出窗口。
注意：配置
Map和Scene的最快方法是，以交互方式创建Web地图和Web场景并通过唯一ID加载它们。在创建Web地图”和显示Web地图教程中了解如何创建和加载Web地图。
-
用WebMap创建地图
const webMap = new WebMap({ // 定义Web地图实例
portalItem: {
id: "41281c51f9de45edaf1c8ed44bb10e30",
portal: "https://www.arcgis.com" // 默认值：ArcGIS门户网站
}
});
const view = new MapView({
map: webMap, // 加载Web地图
container: "viewDiv"
});
在显示Web地图教程中了解更多信息。
-
用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"
});
在显示Web场景教程中了解更多信息。
关于视图
视图的主要作用是显示图层，弹出窗口和UI小部件，处理用户交互，以及指定地图应该关注的世界的哪个部分（即地图的“范围”）。
创建视图
有单独的类用于为地图和场景创建视图：MapView和SceneView类。MapView用于显示对象的2D视图，和SceneView用于显示3D视图Map。
要使地图可见，视图对象需要一个Map对象，并且container属性正确引用div元素的id属性。
const mapView = new MapView({ // Create MapView object
map: myMap,
container: "mapViewDiv"
});
const sceneView = new SceneView({ // Create SceneView object
map: myMap,
container: "sceneViewDiv"
});
设置地图的显示内容
创建视图SceneView或MapView时可以通过在设置中心点center和（缩放级别zoom或比例尺scale）属性来设置的初始位置。
const view = new MapView({
center: [ -112, 38 ], // 地图的中心 经度/纬度
zoom: 13 // 将细节的缩放级别（LOD 细节层次（en:Level of detail））设置为13
});
注意：通过以编程方式更新属性，视图初始位置也可以改变。
使用SceneView（3D）时，可以通过定义镜头camera属性来设置观察者的位置。
var view = new SceneView({
camera: {
position: [
-122, // 经度lon
38, // 纬度lat
50000 // 海拔（米）
],
heading: 95, // 相机的罗盘角度
tilt: 65 // 相机相对于地面的倾斜
}
});
了解如何在创建入门应用程序教程中创建2D和3D视图。
将视图设置为新位置的动画
该goTo方法还可以更改视图MapView的位置，而且提供了平滑过渡的附加选项。该技术通常用于地图中心从一个位置“飞行”到另一个位置或者缩放到搜索结果。
该goTo方法可以接受Geometry，Graphic或Viewpoint对象。其他选项可以控制动画。
view.goTo({ // 自定义动画移动到设定的点
target: {
center: [ -114, 39 ]
}, {
duration: 5000
});
});
与视图交互
该视图还负责处理用户交互和显示弹出窗口。该视图为用户交互提供了多个事件处理程序，例如鼠标单击，键盘输入，触摸屏交互，操纵杆和其他输入设备。
当用户单击地图时，默认行为是显示已在图层中预先配置的任何弹出窗口。可以使用以下代码，通过监听click事件并使用该hitTest()方法查找用户单击的功能。
view.popup.autoOpenEnabled = false; // 禁用默认弹出行为
view.on("click", function(event) { // 监听点击事件
view.hitTest(event).then(function (hitTestResults){ // 用户单击的功能实现
if(hitTestResults.results) {
view.popup.open({ // 打开一个弹出窗口以显示结果
location: event.mapPoint,
title: "Hit Test Results",
content: hitTestResults.results.length + "Features Found"
});
}
})
});
将小部件和UI组件添加到视图中
视图也是用于添加窗口小部件和HTML元素的容器。在view.ui提供了一个DefaultUI其用于显示视图的缺省窗口小部件。还可以使用view.ui.add方法将其他窗口小部件和HTML元素添加到视图中。下面的代码片段演示了添加搜索地址或地点的小部件。
var searchWidget = new Search({
view: view
});
// 将搜索小部件添加到视图的右上角
view.ui.add(searchWidget, {
position: "top-right"
});
网友评论