显示 Web 场景

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

步骤 ​

创建新 Pen ​

1. 在此之前，先了解显示地图教程 。

添加模块 ​

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

   更多内容

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

   js

       "geoscene/config",
   
       "geoscene/Map",
       "geoscene/MapView",
   
       "geoscene/WebScene",
       "geoscene/views/SceneView",
       "geoscene/widgets/Legend"
   
       ], function(geosceneConfig, WebScene, SceneView, Legend) {

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

加载 web 场景 ​

使用门户项目 ID 创建 WebScene。将Web 场景赋予视图。

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

   js

   const map = new Map ({
       basemap: "tianditu-vector"
   });
   
   const view = new MapView({
       map: map,
       center: [-118.805, 34.027], // Longitude, latitude
       zoom: 13, // Zoom level
       container: "viewDiv" // Div element
   });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

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

   js

   const webscene = new WebScene({
       portalItem: {
           id: "17665b4c5cc743a9b991edfbb2d02a74"
       }
   });

   1
   2
   3
   4
   5
   

创建场景视图 ​

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

   js

   const webscene = new WebScene({
       portalItem: {
           id: "17665b4c5cc743a9b991edfbb2d02a74"
       }
   });
   
   const view = new SceneView({
       container: "viewDiv",
       map: webscene
   });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

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

添加微件 ​

添加 Legend 微件，显示视图中可见图层的图例。

1. 创建 Legend 对象显示图例，将 legend 添加到 view 的右上角 top-right 处。

   js

   const view = new SceneView({
       container: "viewDiv",
       map: webscene
   });
   
   const legend = new Legend ({
       view:view
   });
   
   view.ui.add(legend, "top-right");

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

运行应用程序 ​

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

下一步是什么？ ​

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

• 显示场景