显示 Web 场景

Web 场景是以项目形式存储在 GeoScene Online 中的场景。Web 场景项目包含场景的所有配置设置 (JSON 格式)，如范围、底图、数据图层和样式。应用程序可以使用其项目 ID 访问和显示 Web 场景。

在本教程中，您将访问和显示存储在 GeoScene Online 中的预配置 Web 场景 。

步骤

创建新 Pen

1. 要开始使用，请完成显示地图教程 或 使用此 Pen。

1. 代码块使用深色

       

   更改行

添加模块

1. 在 require 语句中，删除 Map 和 MapView 模块。添加 WebScene、SceneView 和 Legend 模块。

   更多信息

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

   展开

   代码块使用深色

                                                                     

   移除行移除行添加行。添加行。添加行。更改行

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
         "geoscene/config",
   
         "geoscene/Map",
         "geoscene/MapView",
   
         "geoscene/WebScene",
         "geoscene/views/SceneView",
         "geoscene/widgets/Legend"
   
       ], function(geosceneConfig, WebScene, SceneView, Legend) {
    

   展开

加载 web 场景

可使用门户项目 ID 创建 WebScene。Web 场景将传递至视图。

1. 删除创建 Map 和 MapView 的代码。

   展开

   代码块使用深色

                                                                     

   移除行移除行移除行移除行移除行移除行移除行移除行移除行移除行

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
        geosceneConfig.apiKey = "YOUR_API_KEY";
   
         const map = new Map ({
           basemap: "tianditu-vector"
         });
   
         const view = new MapView({
             map: map,
             center: [116, 39], // Longitude, latitude
             zoom: 5, // Zoom level
             container: "viewDiv" // Div element
           });
   
    

   展开

2. 创建 WebScene。使用其门户项目 ID 加载 Web 场景。

   展开

   代码块使用深色

                                                                     

   添加行。添加行。添加行。添加行。添加行。

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
        geosceneConfig.apiKey = "YOUR_API_KEY";
   
         const webscene = new WebScene({
           portalItem: {
             id: "b463bfabddc94c8598c43d9190d20c98"
           }
         });
    

   展开

创建场景视图

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

   展开

   代码块使用深色

                                                                     

   添加行。添加行。添加行。添加行。

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
         const webscene = new WebScene({
           portalItem: {
             id: "b463bfabddc94c8598c43d9190d20c98"
           }
         });
   
         const view = new SceneView({
           container: "viewDiv",
           map: webscene
         });
    

   展开

2. 在右上角，单击运行以验证 Web 地图是否已成功加载并显示。

添加微件

使用 Legend 微件将多个上下文添加到应用程序中。Legend 微件可显示视图中可见图层的标注和符号。

1. 创建 Legend 以显示要素信息。将 legend 添加到 view 的 top-right 处。

   展开

   代码块使用深色

                                                                     

   添加行。添加行。添加行。添加行。添加行。

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
         const view = new SceneView({
           container: "viewDiv",
           map: webscene
         });
   
         const legend = new Legend ({
           view:view
         });
   
         view.ui.add(legend, "top-right");
    

   展开

运行应用程序

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

下一步是什么？

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

• 显示地图