简介 地图是对图层和底图引用管理的容器。视图是用来显示地图图层，处理用户交互、弹出窗口、微件和地图定位等功能的类。
使用地图 地图由 MapMap 对象传递给 View 对象。有两个 View 类可用于显示地图：用于 2D 地图的 MapScene
新建地图 创建地图的一种方法是创建 Map底图 和可选的图层集合 。
1
2
3
4
5
6
7
8
9
const myMap = new Map ({ // Create a Map object
basemap : "tianditu-vector" ,
layers : additionalLayers // Optionally, add additional layers collection
});
const mapView = new MapView({ // The View for the Map object
map : myMap,
container : "mapDiv"
});
了解可以添加到地图中的不同类型的图层 。
从 Web 地图或 Web 场景创建地图 创建地图的另一种方法是加载 Web 地图 (用于 2D 地图) 或 Web 场景 (用于 3D 地图)。
Web 地图和 Web 场景是包含地图或场景设置的 JSON 结构。它们包含了对底图、图层、图层样式、弹出窗口、图例、标注等的定义。它们通常是使用地图查看器场景查看器交互创建的。GeoScene Online 或 GeoScene Enterprise 会为它们分配一个唯一的ID，并将其存储为门户项目 。
WebWeb项目页面 的 URL 中标识。默认门户为 GeoScene Online，其 URL 为 https:。如果使用 GeoScene Enterprise，则需指定门户 URL。
示例： https:
当 Web 和 Web 对象加载 web 地图和 web 场景时，所有设置都会自动应用到 Map 和 Scene 中。例如，设置底图和图层，应用图层样式，并为每个图层定义弹出窗口。
注： 交互创建 web 地图和 web 场景并通过唯一 ID 加载它们是配置 Map 和 Scene 的最快方法。
从 WebMap 创建地图
1
2
3
4
5
6
7
8
9
10
11
const webMap = new WebMap({ // Define the web map reference
portalItem : {
id : "2a78a76e9a4144f9873355367ae76e26" ,
portal : "https://www.geosceneonline.cn/geoscene" // Default: The GeoScene Online Portal
}
});
const view = new MapView({
map : webMap, // Load the web map
container : "viewDiv"
});
在显示 web 地图 教程中了解更多信息。
从 WebScene 创建场景
1
2
3
4
5
6
7
8
9
10
11
const webScene = new WebScene({ // Define the web scene reference
portalItem : {
id : "b463bfabddc94c8598c43d9190d20c98" ,
portal : "https://www.geosceneonline.cn/geoscene" // Default: The GeoScene Online Portal
}
});
const view = new SceneView({ // Load the web scene
map : webScene,
container : "viewDiv"
});
在显示 web 场景 教程中了解更多信息。
使用视图 视图的主要作用是显示图层、弹出窗口和 UI 微件，处理与用户的交互，并指定地图应关注世界的哪一部分 (即地图的“范围”)。
创建视图 用于创建地图视图和场景视图的类分别是：MapSceneMap 显示 Map 对象的 2D 视图，Scene 显示 3D 视图。
要使地图可见，视图对象需要一个 Map 对象和一个用于标识 div 元素或 div 元素引用的 id 属性的 String。
1
2
3
4
const mapView = new MapView({ // Create MapView object
map : myMap,
container : "mapViewDiv"
});
1
2
3
4
const sceneView = new SceneView({ // Create SceneView object
map : myMap,
container : "sceneViewDiv"
});
设置地图的可见部分 Map 和 Scene 的初始位置可在创建视图时通过设置 center 和 zoom 或 scale 属性来设置。
1
2
3
4
const view = new MapView({
center : [ 116 , 39 ], // The center of the map as lon/lat
zoom : 13 // Sets the zoom level of detail (LOD) to 13
});
注： 视图位置也可在初始化后通过编程方式更新属性来更新。
使用 Scene (3D) 时，可通过定义 camera
1
2
3
4
5
6
7
8
9
10
11
var 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
}
});
在显示地图 和显示场景 教程中，了解如何创建 2D 和 3D 视图。
将视图动画到一个新位置 Map 的 g
g 方法可接受 Geometry、Graphic 或 Viewpoint
1
2
3
4
5
6
7
view.goTo({ // go to point with a custom animation duration
target : {
center : [ 114 , 39 ]
}, {
duration : 5000
});
});
与视图交互 视图还负责处理用户交互和显示弹出窗口。视图为用户交互提供了多个事件处理程序 ，例如鼠标单击、键盘输入、触摸屏交互、操纵杆和其他输入设备。
当用户单击地图时，默认行为是显示已在图层中预先配置 的任何弹出窗口。也可通过监听 click 事件并使用 hit
1
2
3
4
5
6
7
8
9
10
11
12
13
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"
});
}
})
});
了解有关视图事件 和手动配置弹出窗口 的更多信息。
视图也是覆盖微件 和 HTML 元素 的容器。view.ui 提供了一个 DefaultUI 容器，用于显示视图的默认微件。也可使用 view.ui.add 方法将其他微件和 HTML 元素添加至视图。以下代码段演示了添加允许用户搜索地址或地点的微件。
1
2
3
4
5
6
7
8
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"
});
了解有关将添加微件 到视图的更多信息。