更改底图图层

了解如何更改地图中的底图图层。

底图图层库提供了许多可在地图中使用的底图图层样式，如地形图、街道图和影像。

在本教程中，您将使用 Basemap Toggle 和 BasemapGallery 微件来选择和显示不同的底图图层。

步骤

创建新 Pen

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

添加模块

在 require 语句中，添加 Basemap Toggle 和 BasemapGallery 模块。

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

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: Change the basemap layer</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/views/MapView",

      "geoscene/widgets/BasemapToggle",
      "geoscene/widgets/BasemapGallery"

    ], function(geosceneConfig, Map, MapView, BasemapToggle, BasemapGallery) {
      const map = new Map({
        basemap: "tianditu-vector"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [111.4, 37.9],
        zoom: 4
      });    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

在底图之间切换

在两个底图之间启用选择的一种简单方法是使用 Basemap Toggle 微件。使用该微件可在 tianditu-vector 和 tianditu-image 底图之间切换。

创建 Basemap Toggle 并设置 view。将 nextBasemap 属性设置为 tianditu-image。

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: Change the basemap layer</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/views/MapView",

      "geoscene/widgets/BasemapToggle",
      "geoscene/widgets/BasemapGallery"

    ], function(geosceneConfig, Map, MapView, BasemapToggle, BasemapGallery) {
      const map = new Map({
        basemap: "tianditu-vector"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [111.4, 37.9],
        zoom: 4
      });

      const basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "tianditu-image"
     });

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

将微件添加至 view 的 bottom-right 处。

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: Change the basemap layer</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/views/MapView",

      "geoscene/widgets/BasemapToggle",
      "geoscene/widgets/BasemapGallery"

    ], function(geosceneConfig, Map, MapView, BasemapToggle, BasemapGallery) {

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

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [111.4, 37.9],
        zoom: 4
      });

      const basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "tianditu-image"
     });

      view.ui.add(basemapToggle,"bottom-right");
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

在底图之间切换。

从图库中选择底图

您还可使用 BasemapGallery 微件来选择不同的底图。

创建 BasemapGallery 并在 source 属性中设置 query 以搜索 "Basemaps for Developers" 底图组。

在未来版本中，您无需在使用 API 密钥时设置 source。

Add line.Add line.Add line.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: Change the basemap layer</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/views/MapView",

      "geoscene/widgets/BasemapToggle",
      "geoscene/widgets/BasemapGallery"

    ], function(geosceneConfig, Map, MapView, BasemapToggle, BasemapGallery) {

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

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [111.4, 37.9],
        zoom: 4
      });

      const basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "tianditu-image"
     });

      view.ui.add(basemapToggle,"bottom-right");

      const basemapGallery = new BasemapGallery({
        view: view,
        source: {
          query: {
            title: '"Basemaps for Developers" AND owner:geoscenedev'
          }
        }
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

将微件添加至 view 的 top-right 处。

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: Change the basemap layer</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/views/MapView",

      "geoscene/widgets/BasemapToggle",
      "geoscene/widgets/BasemapGallery"

    ], function(geosceneConfig, Map, MapView, BasemapToggle, BasemapGallery) {

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

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [111.4, 37.9],
        zoom: 4
      });

      const basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "tianditu-image"
     });

      view.ui.add(basemapToggle,"bottom-right");

      const basemapGallery = new BasemapGallery({
        view: view,
        source: {
          query: {
            title: '"Basemaps for Developers" AND owner:geoscenedev'
          }
        }
      });

      view.ui.add(basemapGallery, "top-right"); // 添加至视图

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

运行应用程序

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

您的应用程序中应有两个微件，它们提供不同的方式来选择底图。

下一步是什么？

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

添加矢量切片图层

解决方案

在 CodePen 中查看

估计时间

10 分钟