显示 Web 场景

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

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

步骤

创建新 Pen

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

添加模块

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

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Remove lineRemove lineAdd line.Add line.Add line.Change line
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 展示WebScene</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23"></script>
  <script>
    require([

      "geoscene/config",

      "geoscene/Map",
      "geoscene/MapView",

      "geoscene/WebScene",
      "geoscene/views/SceneView",
      "geoscene/widgets/Legend"

    ], function(geosceneConfig,WebScene, SceneView, Legend) {

     geosceneConfig.apiKey = "YOUR_API_KEY";

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

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

      const view = new SceneView({
        container: "viewDiv",
        map: webscene
      });

      const legend = new Legend ({
        view:view
      });

      view.ui.add(legend, "top-right");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

加载 Web 场景

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

删除创建 Map 和 MapView 的代码。

Remove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove line
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 展示WebScene</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23"></script>
  <script>
    require([

      "geoscene/config",

      "geoscene/Map",
      "geoscene/MapView",

      "geoscene/WebScene",
      "geoscene/views/SceneView",
      "geoscene/widgets/Legend"

    ], function(geosceneConfig,WebScene, SceneView, Legend) {


      const map = new Map ({
        basemap: "tianditu-vector"
      });

      const view = new MapView({
          map: map,
          center: [-118.805, 34.027], // 经度、纬度
          zoom: 13, // 缩放级别
          container: "viewDiv" // Div 元素
        });

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

      const view = new SceneView({
        container: "viewDiv",
        map: webscene
      });

      const legend = new Legend ({
        view:view
      });

      view.ui.add(legend, "top-right");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

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

Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 展示WebScene</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23"></script>
  <script>
    require([

      "geoscene/config",

      "geoscene/Map",
      "geoscene/MapView",

      "geoscene/WebScene",
      "geoscene/views/SceneView",
      "geoscene/widgets/Legend"

    ], function(geosceneConfig,WebScene, SceneView, Legend) {


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

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

      const view = new SceneView({
        container: "viewDiv",
        map: webscene
      });

      const legend = new Legend ({
        view:view
      });

      view.ui.add(legend, "top-right");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建场景视图

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

Add line.Add line.Add line.Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 展示WebScene</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23"></script>
  <script>
    require([

      "geoscene/config",

      "geoscene/Map",
      "geoscene/MapView",

      "geoscene/WebScene",
      "geoscene/views/SceneView",
      "geoscene/widgets/Legend"

    ], function(geosceneConfig,WebScene, SceneView, Legend) {

     geosceneConfig.apiKey = "YOUR_API_KEY";

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

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

      const view = new SceneView({
        container: "viewDiv",
        map: webscene
      });

      const legend = new Legend ({
        view:view
      });

      view.ui.add(legend, "top-right");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

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

添加微件

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

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

Add line.Add line.Add line.Add line.Add line.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 展示WebScene</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23"></script>
  <script>
    require([

      "geoscene/config",

      "geoscene/Map",
      "geoscene/MapView",

      "geoscene/WebScene",
      "geoscene/views/SceneView",
      "geoscene/widgets/Legend"

    ], function(geosceneConfig,WebScene, SceneView, Legend) {

     geosceneConfig.apiKey = "YOUR_API_KEY";

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

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

      const view = new SceneView({
        container: "viewDiv",
        map: webscene
      });

      const legend = new Legend ({
        view:view
      });

      view.ui.add(legend, "top-right");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

运行应用程序

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

下一步是什么？

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

上一主题显示 Web 地图数据查询要素图层 (SQL)

解决方案

在 CodePen 中查看

估计时间

10 分钟