更改底图图层

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

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

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

步骤

创建新 Pen

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

添加模块

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

   更多信息

   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
   67
       require([
         "geoscene/config",
         "geoscene/Map",
         "geoscene/views/MapView",
   
         "geoscene/widgets/BasemapToggle",
         "geoscene/widgets/BasemapGallery"
   
       ], function(geosceneConfig, Map, MapView, BasemapToggle, BasemapGallery) {
    

   展开

在底图之间切换

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

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

   展开

   代码块使用深色

                                                                      

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

   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
   67
         const view = new MapView({
           container: "viewDiv",
           map: map,
           center: [111.4,37.9],
           zoom: 4
         });
   
         const basemapToggle = new BasemapToggle({
           view: view,
           nextBasemap: "tianditu-image"
        });
   
    

   展开

2. 将微件添加至 view 的 bottom-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
   67
         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");
    

   展开

3. 在底图之间切换。

从图库中选择底图

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

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

   更多信息

   在未来版本中，使用 API 密钥时将不再需要设置 source。

   展开

   代码块使用深色

                                                                      

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

   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
   67
         view.ui.add(basemapToggle,"bottom-right");
   
         const basemapGallery = new BasemapGallery({
           view: view,
           source: {
             query: {
               title: '"Basemaps for Developers" AND owner:geoscenedev'
             }
           }
         });
   
    

   展开

2. 将微件添加至 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
   67
         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"); // Add to the view
    

   展开

运行应用程序

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

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

下一步是什么？

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

• 添加矢量切片图层