简介
地图是管理图层和底图对象的容器。视图是用于控制地图图层显示、处理用户交互、弹出窗口、微件和地图定位等功能的对象。
地图
地图由 Map 类创建。 视图由 View 类创建，Map对象是创建视图时用到的参数。显示 2D 地图使用 MapView 视图类，显示 3D 地图使用 SceneView 视图类。
新建地图
创建地图的一种方式是新建一个 Map 类，并指定它的底图和图层集合，其中图层集合是可选参数。
1
2
3
4
5
6
7
8
9
const myMap = new Map({ //创建一个地图对象
basemap: "tianditu-vector",
layers: additionalLayers // 添加图层集合，可选
});
const mapView = new MapView({ // 地图对象对应的视图
map: myMap,
container: "mapDiv"
});
通过 Web 地图或 Web 场景创建地图
创建地图的另一种方法是通过加载 web 地图 ( 2D ) 或 web 场景 ( 3D )。
Web 地图和 Web 场景是GeoScene Online 或 GeoScene Enterprise中描述地图或场景的JSON 对象。该对象包括了对地图或场景的底图、图层、图层样式、弹出窗口、图例、标注等属性的设置。这些设置通常通过地图查看器或场景查看器配置。在GeoScene Online 或 GeoScene Enterprise中，该JSON对象被存储为一个门户项目，并具有唯一的项目ID。
Web 地图和 Web 场景通过WebMap 和 WebScene 类创建，需要指定门户地址和项目ID。项目 ID 在地图查看器和场景查看器或项目页面的 URL 中查看。门户默认为 GeoScene Online，地址为 https://www.geosceneonline.cn/geoscene。如果使用 GeoScene Enterprise，则需指定门户地址。
当 WebMap 和 WebScene 对象加载 Web 地图和 Web 场景时，所有设置都会自动应用到 Map 和 Scene 中。例如，Web地图设置的底图和图层、图层样式，以及为每个图层定义的弹出窗口。
引用 WebMap 创建地图
1
2
3
4
5
6
7
8
9
10
11
const webMap = new WebMap({ // 引用webmap定义地图对象
portalItem: {
id: "2a78a76e9a4144f9873355367ae76e26",
portal: "https://www.geosceneonline/geoscene" // 默认值，GeoScene Online门户
}
});
const view = new MapView({
map: webMap, // 加载webmap
container: "viewDiv"
});
引用 WebScene 创建场景
1
2
3
4
5
6
7
8
9
10
11
const webScene = new WebScene({ // 引用webscene定义地图对象
portalItem: {
id: "17665b4c5cc743a9b991edfbb2d02a74",
portal: "https://www.geosceneonline/geoscene" // 默认值，GeoScene Online门户
}
});
const view = new SceneView({ // 加载Web场景
map: webScene,
container: "viewDiv"
});
视图
视图的主要作用是显示图层、弹出窗口和 UI 微件，处理用户交互，设置地图显示范围。
创建视图
创建视图的类有两个：MapView 和 SceneView 。MapView 对应地图视图，显示 Map 对象的二维视图，SceneView 是场景视图，显示三维视图。
创建视图需要指定一个 Map 对象和一个代表 div 元素的 String 参数，可以是 div 元素的id ，也可以是 div 的引用。
1
2
3
4
const mapView = new MapView({ // 创建MapView对象
map: myMap,
container: "mapViewDiv"
});
1
2
3
4
const sceneView = new SceneView({ // 创建SceneView 对象
map: myMap,
container: "sceneViewDiv"
});
设置地图显示范围
MapView 和 SceneView 的初始范围可在创建视图时通过 center 和 zoom 或 scale 属性来设置。
1
2
3
4
const view = new MapView({
center: [ -112, 38 ], // 地图中心点的经纬度
zoom: 13 // 设置地图显示级别为13
});
使用 SceneView (3D) 时，可通过定义 camera 来设置视角位置。
1
2
3
4
5
6
7
8
9
10
11
var view = new SceneView({
camera: {
position: [
-122, // 经度
38, // 纬度
50000 // 高程，单位米
],
heading: 95, // 相机观察方向
tilt: 65 // 相机相对于地面的倾斜
}
});
视图平滑移动到新位置
MapView 还提供了 goTo 方法来更改视图的位置，可以平滑移动至新位置。一般用在“飞”到某个位置或者缩放到搜索结果范围的效果上。
goTo 方法到达的位置，可以是一个 Geometry、Graphic 或 Viewpoint 对象。其他属性用于控制动画效果。
1
2
3
4
view.goTo( // 平移到一个点，动画持续时间为5秒
{ center: [-114, 39] },
{ duration: 5000 }
);
视图交互
视图负责处理用户交互和弹出窗口显示。它为用户交互提供了多个事件处理程序，例如鼠标单击、键盘输入、触摸屏交互、操纵杆和其他输入设备交互。
用户单击地图的默认行为是显示图层中预先配置的弹出窗口。这个事件行为我们还可以通过监听 click 来实现，单击时使用 hitTest() 方法查找用户单击处的要素，然后弹出窗口。
1
2
3
4
5
6
7
8
9
10
11
12
13
view.popupEnabled = false; // 取消默认的窗口弹出
view.on("click", function(event) { // 添加鼠标单击事件
view.hitTest(event).then(function (hitTestResults){ // 查询点击处的要素
if(hitTestResults.results) {
view.openPopup({ // 打开弹窗，显示结果
location: event.mapPoint,
title: "测试选中结果",
content: "选中" + hitTestResults.results.length });
}
})
});
视图也是覆盖微件和 HTML 元素的容器。view.ui 提供了一个 DefaultUI 容器，用于显示视图的默认微件。使用 view.ui.add 方法可以将其他微件和 HTML 元素添加至视图。以下代码段演示了添加允许用户搜索地址或地点的微件。
1
2
3
4
5
6
7
8
var searchWidget = new Search({
view: view
});
// 将查找微件添加到视图右上角
view.ui.add(searchWidget, {
position: "top-right"
});