场景 (3D) 简介

字数统计: 1.5k 字
阅读时长: 约 3 分钟
当前版本: 4.29

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

使用地图 ​

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

有关在 2D 中工作的更多信息，请参阅本指南中的地图 (2D)。

新建地图 ​

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

js
const myMap = new Map({ // Create a Map object
    basemap: "tianditu-vector",
    layers: additionalLayers // Optionally, add additional layers collection
});

const sceneView = new SceneView({ // The View for the Map object
    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地图设置的底图和图层、图层样式，以及为每个图层定义的弹出窗口。

注: 在门户中创建Web 地图和Web 场景并通过唯一 ID 加载它们是配置 Map 和 Scene 最快的方法。

引用 WebScene 创建场景 ​

js
const webScene = new WebScene({ // Define the web scene reference
    portalItem: {
        id: "17665b4c5cc743a9b991edfbb2d02a74",
        portal: "https://www.geosceneonline.cn/geoscene" // 默认值，GeoScene Online门户
    }
});

const view = new SceneView({ // Load the web scene
    map: webScene,
    container: "viewDiv"
});

视图 ​

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

创建视图 ​

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

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

js
const sceneView = new SceneView({ // Create SceneView object
    map: myMap,
    container: "sceneViewDiv"
});

设置地图的可见部分 ​

使用 SceneView (3D) 时，可通过定义 camera 属性来设置观察者的位置。视图位置也可在初始化后通过编程方式更新属性来更新。

js
var view = new SceneView({
    camera: {
        position: [
            -122, // 经度
            38, // 纬度
            50000 // 高程，单位米
        ],
        heading: 95, // 相机观察方向
        tilt: 65 // 相机相对于地面的倾斜
    }
});

或者，可以像 MapView 一样，使用 center 和 zoom 或 scale 属性按集设置初始位置。

js
const view = new SceneView({
    center: [ 112, 38 ], // The center of the map as lon/lat
    zoom: 13 // Sets the zoom level of detail (LOD) to 13
});

在显示场景教程中，了解如何创建 3D 视图。

视图平滑移动到新位置 ​

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

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

js
view.goTo( // go to point with a custom animation duration
    { center: [114, 39] },
    { duration: 5000 }
);

与视图交互 ​

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

当用户单击地图时，默认行为是显示已在图层中预先配置的任何弹出窗口。也可通过监听 click 事件并使用 hitTest() 方法查找用户单击处的要素，使用以下代码手动地模拟此行为。

js
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 元素添加至视图。以下代码段演示了添加允许用户搜索地址或地点的微件。

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

 view.ui.add(searchWidget, {
    position: "top-right"
 });

注: 了解有关将添加微件到视图的更多信息。