显示 Web 地图

了解如何基于 web 地图显示存储在 GeoScene 中的地图。

Web 地图是存储在 GeoScene Online或GeoScene Portal 中的地图，我们称之为一种项目。Web 地图项目包含有地图的所有配置信息 (以JSON 格式)，如底图图层、数据图层、图层样式和弹出窗口设置。应用程序可以使用其项目 ID 访问和显示 Web 地图。

在本教程中，将加载并显示存储在 GeoSceneS Online 中的一个 web 地图。

步骤

创建新 Pen

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

添加模块

在 require 语句中，删除 Map 模块。添加 WebMap、ScaleBar 和 Legend 模块。

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

Remove 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: 展示WebMap</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/WebMap",
      "geoscene/views/MapView",
      "geoscene/widgets/ScaleBar",
      "geoscene/widgets/Legend"
    ], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {
     const map = new Map ({
       basemap: "tianditu-vector" //Basemap layer service
     });
      const view = new MapView({
        container: "viewDiv",

        map: map,
        center: [-118.80500,34.02700],
        zoom: 13
      });  });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

加载 Web 地图

可使用门户项目 ID 创建 WebMap。Web 地图将传递至视图。

删除创建 Map 的代码。

Remove 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: 展示WebMap</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/WebMap",
      "geoscene/views/MapView",
      "geoscene/widgets/ScaleBar",
      "geoscene/widgets/Legend"
    ], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {
     const map = new Map ({
       basemap: "tianditu-vector" //底图图层服务
     });

      const view = new MapView({
        container: "viewDiv",

        map: map,
        center: [-118.80500,34.02700],
        zoom: 13      });
  });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 WebMap。将 portalItem ID 设置为 2a78a76e9a4144f9873355367ae76e26。

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: 展示WebMap</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/WebMap",
      "geoscene/views/MapView",
      "geoscene/widgets/ScaleBar",
      "geoscene/widgets/Legend"
    ], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {

    geosceneConfig.apiKey = "YOUR_API_KEY";

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

      const webmap = new WebMap({
        portalItem: {
          id: "2a78a76e9a4144f9873355367ae76e26"
        }
      });

      const view = new MapView({
        container: "viewDiv",

        map: map,
        center: [-118.80500,34.02700],
        zoom: 13

        map: webmap

      });

      const scalebar = new ScaleBar({
        view: view
      });

      view.ui.add(scalebar, "bottom-left");

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

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

使用 webmap 元素更新 MapView 中的 map 属性。移除 center 和 zoom 属性，因 Web 地图提供定位信息。

Remove lineRemove lineRemove lineChange 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: 展示WebMap</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/WebMap",
      "geoscene/views/MapView",
      "geoscene/widgets/ScaleBar",
      "geoscene/widgets/Legend"
    ], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {
      const webmap = new WebMap({
        portalItem: {
          id: "2a78a76e9a4144f9873355367ae76e26"
        }
      });

      const view = new MapView({
        container: "viewDiv",

        map: map,
        center: [-118.80500,34.02700],
        zoom: 13

        map: webmap

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

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

添加微件

使用 Legend 和 ScaleBar 微件将多个上下文添加到应用程序中。Legend 微件可显示视图中可见图层的标注和符号。ScaleBar 可以以公制或非公制值显示单位。

创建 ScaleBar。将 scalebar 添加到 view 的 bottom-left。

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: 展示WebMap</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/WebMap",
      "geoscene/views/MapView",
      "geoscene/widgets/ScaleBar",
      "geoscene/widgets/Legend"
    ], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {

    geosceneConfig.apiKey = "YOUR_API_KEY";

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

      const webmap = new WebMap({
        portalItem: {
          id: "2a78a76e9a4144f9873355367ae76e26"
        }
      });

      const view = new MapView({
        container: "viewDiv",

        map: map,
        center: [-118.80500,34.02700],
        zoom: 13

        map: webmap

      });

      const scalebar = new ScaleBar({
        view: view
      });

      view.ui.add(scalebar, "bottom-left");

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

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

创建 Legend 以显示图例信息。将 legend 添加到 view 的 top-right。

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: 展示WebMap</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/WebMap",
      "geoscene/views/MapView",
      "geoscene/widgets/ScaleBar",
      "geoscene/widgets/Legend"
    ], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {

    geosceneConfig.apiKey = "YOUR_API_KEY";

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

      const webmap = new WebMap({
        portalItem: {
          id: "2a78a76e9a4144f9873355367ae76e26"
        }
      });

      const view = new MapView({
        container: "viewDiv",

        map: map,
        center: [-118.80500,34.02700],
        zoom: 13

        map: webmap

      });

      const scalebar = new ScaleBar({
        view: view
      });

      view.ui.add(scalebar, "bottom-left");

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

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

运行应用程序

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

现在，您将看到一个比例尺，以及一个显示 Web 地图所含图层信息的图例。

下一步是什么？

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

显示地图

上一主题添加矢量切片图层下一主题显示 Web 场景 (3D)

解决方案

在 CodePen 中查看

估计时间

10 分钟