地图 (2D) 简介

地图是管理图层和底图对象的容器。视图是用于控制地图图层显示、处理用户交互、弹出窗口、微件和地图定位等功能的对象。

使用地图 ​

地图由Map类创建。 视图由View类创建，Map对象是创建视图时用到的参数。显示 2D 地图使用MapView视图类，显示 3D 地图使用SceneView 类。

有关在 3D 中工作的更多信息，请参阅本指南中的场景 (3D)。

新建地图 ​

创建地图的一种方式是新建一个Map 类,并指定它的底图和图层集合，其中图层集合是可选参数。

const myMap = new Map({ //创建一个地图对象
    basemap: "tianditu-vector",
    layers: additionalLayers // 添加图层集合，可选
});

const mapView = new MapView({ // 地图对象对应的视图
    map: myMap,
    container: "mapDiv"
});

通过 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 创建地图 ​

const webMap = new WebMap({ // 引用webmap定义地图对象
    portalItem: {
        id: "2a78a76e9a4144f9873355367ae76e26",
        portal: "https://www.geosceneonline.cn/geoscene" // 默认值，GeoScene Online门户
    }
});

const view = new MapView({
    map: webMap, 
    container: "viewDiv"
});

视图 ​

视图的主要作用是显示图层、弹出窗口和 UI 微件，处理用户交互，设置地图显示范围。

创建视图 ​

创建视图的类有两个：MapView 和 SceneView 类。MapView 对应地图视图，显示 Map 对象的 2D 视图，SceneView 是场景视图，显示三维视图。

创建视图需要指定一个 Map 对象和一个代表 div 元素的String参数，可以是 div 元素的 id ，也可以是 div 对象的引用。

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

设置地图可视范围 ​

MapView 和 SceneView 的初始范围可在创建视图时通过 center 和 zoom 或 scale 属性来设置。视图位置也可在初始化后通过编程方式更新属性来更新。

const view = new MapView({
    center: [ 112, 38 ],          // 地图中心点的经纬度
    zoom: 13                      // 设置地图显示级别为13
});

在显示地图教程中，了解如何创建 2D 视图。

视图平滑移动到新位置 ​

MapView 还提供了 goTo 方法来更改视图的位置，可以平滑移动至新位置。一般用在“飞”到某个位置或者缩放到搜索结果范围的效果上。

goTo 方法到达的位置，可以是一个 Geometry、Graphic 或 Viewpoint 对象。其他属性用于控制动画效果。

view.goTo( // 平移到一个点，动画持续时间为5秒
 { center: [114, 39] },
 { duration: 5000 }
);

与视图交互 ​

视图负责处理用户交互和弹出窗口显示。它为用户交互提供了多个事件处理程序，例如鼠标单击、键盘输入、触摸屏交互、操纵杆和其他输入设备交互。

用户单击地图的默认行为是显示图层中预先配置的弹出窗口。这个事件行为我们还可以通过监听 click 来实现，单击时使用 hitTest() 方法查找用户单击处的要素，然后弹出窗口。

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 
            });
        }
    })
});

在视图中添加微件和UI组件 ​

视图也是覆盖微件和 HTML 元素的容器。view.ui 提供了一个 DefaultUI 容器，用于显示视图的默认微件。也可使用 view.ui.add 方法将其他微件和 HTML 元素添加至视图。以下代码段演示了添加允许用户搜索地址或地点的微件。

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

  // 将查找微件添加到视图右上角
 view.ui.add(searchWidget, {
    position: "top-right"
 });