原文来自于
Maps and Views:https://developers.arcgis.com/javascript/latest/guide/maps-and-views/
介绍
地图(Map)是用于管理对图层(layers )和底图(basemaps)的引用的容器。视图(Views)用于显示地图图层并处理用户交互,弹出窗口,窗口小部件和地图位置。
关于地图
地图是从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"
});
了解有关向视图添加小部件的详细信息。