显示场景

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

了解如何创建和显示具有底图图层和高程的场景。

场景由底图图层和数据图层构成，它支持三维地理数据图层。场景能实现真实世界中景观、实体、建筑物和其他 3D 对象的可视化。场景视图负责场景的显示，控制视图的中心位置、倾斜和角度。 在本教程中，将使用地形底图图层和世界高程图层创建并显示长白山的场景。场景和代码可用作其他 3D 教程的基础。

步骤 ​

创建新 Pen ​

  1. 打开 CodePen，新建一个用于制图应用程序的 Pen。

添加 HTML ​

定义 HTML 页面，创建一个场景，该场景使用浏览器窗口的全宽度和高度。

  1. 在 CodePen > HTML 中，添加 HTML 和 CSS ，创建一个包含 viewDiv 元素的页面。

    更多内容

    HTML 将创建一个具有页面全宽度和高度的场景。viewDiv 元素用于显示场景，通过 CSS 设置它的宽度和高度分别为浏览器的全宽度和高度。

    注: CodePen 中是不需要输入 <!DOCTYPE html> 标签的。但如果您要在其他编辑器或是本地服务器上运行页面，需要手动在 HTML 页面顶部添加该标签。

    html
    
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>GeoScene Maps SDK for JavaScript Tutorials: Display a scene</title>
        <style>
        html, body, \#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        </style>
    </head>
    <body>
        <div id="viewDiv"></div>
    </body>
</html>

引用 API ​

  1. 在 <head> 标签中，添加对 CSS 文件和 JS 库的引用。

    html
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>GeoScene Maps SDK for JavaScript Tutorials: Display a scene</title>
        <style>
            html, body, \#viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>

        <link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css">
        <script src="https://js.geoscene.cn/4.29/"></script>

    </head>
    <body>
        <div id="viewDiv"></div>
    </body>
</html>

添加模块 ​

GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

  1. 在HTML中添加 <script> 标签和 require 语句，加载 Map 和 SceneView 模块。或者直接在CodePen > JS 面板中添加 JavaScript 代码。添加时，删除示例代码的 <script> 标签。

    html
    
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>GeoScene Maps SDK for JavaScript Tutorials: Display a scene</title>
        <style>
            html, body, \#viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>

        <link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css">
        <script src="https://js.geoscene.cn/4.29/"></script>

        <script>
            require([
                "geoscene/config",
                "geoscene/Map",
                "geoscene/views/SceneView"
                ], function(geosceneConfig, Map, SceneView) {

            });
        </script>

    </head>
    <body>
        <div id="viewDiv"></div>
    </body>
</html>

创建场景 ​

新建 Map 类，指定底图图层和高程表面。场景使用高程图层中的信息来确定地图渲染的 ground (表面) 高度。

  1. 返回至 CodePen。

  2. 创建 Map 并将 basemap 属性设置为 tianditu-image，将 ground 属性设置为 world-elevation。

    js
                const map = new Map({
                basemap: "tianditu-image", //Basemap layer service
                ground: "world-elevation", //Elevation service
            });

创建场景视图 ​

新建 SceneView 类，设置要绘制的 map，定义相机位置 camera ，它是影响 SceneView 可见范围的一个点；设置tilt 属性，它指相机指向表面的角度数。

  1. 创建 SceneView。设置 container、map 和 camera 属性。

    js
                const map = new Map({
                basemap: "tianditu-image", //Basemap layer service
                ground: "world-elevation", //Elevation service
            });

            const view = new SceneView({
            container: "viewDiv",
            map: map,
                camera: {
                    position: {
                        x: 128.0522605138008, //Longitude
                        y: 41.847540077153155, //Latitude
                        z: 9260 //Meters
                    },
                    tilt: 65
                }
            });

运行应用程序 ​

在 CodePen 中，运行代码以显示地图。

场景视图应显示长白山的地形底图图层和高程图层。

下一步是什么？ ​

要了解如何使用其他API 功能，请参阅以下教程：