显示 Web 地图

了解使用 web 地图显示存储在 GeoScene Online 或 GeoScene Enterprise 中的地图。

Web 地图是存储在 GeoScene Online 或 GeoScene Enterprise 中的项目。Web 地图项目包含地图的配置信息 (JSON 格式)，如底图图层、数据图层、图层样式和弹出窗口等信息。应用程序可以通过其项目 ID 访问和显示 Web 地图。

在本教程中，演示加载并显示存储在 GeoScene Online 中的web 地图。

步骤

创建新 Pen

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

添加模块

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

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

   展开

   代码块使用深色

                                                                      

   移除行添加行。添加行。添加行。更改行

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

   展开

加载 web 地图

使用门户项目 ID 创建 WebMap。然后将Web 地图赋予视图。

1. 删除创建 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
     <script>
       require([
         "geoscene/config",
         "geoscene/Map",
         "geoscene/WebMap",
         "geoscene/views/MapView",
         "geoscene/widgets/ScaleBar",
         "geoscene/widgets/Legend"
       ], function(geosceneConfig, WebMap, MapView, ScaleBar, Legend) {
   

   展开

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

   展开

   代码块使用深色

                                                                      

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

   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 webmap = new WebMap({
           portalItem: {
             id: "2a78a76e9a4144f9873355367ae76e26"
           }
         });
   
   

   展开

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

   展开

   代码块使用深色

                                                                      

   移除行移除行移除行更改行

   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 webmap = new WebMap({
           portalItem: {
             id: "2a78a76e9a4144f9873355367ae76e26"
           }
         });
   
         const view = new MapView({
           container: "viewDiv",
   
           map: map,
           center: [-118.80500,34.02700],
           zoom: 13
   
           map: webmap
   
         });
   

   展开

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

添加微件

添加 Legend 和 ScaleBar微件。Legend 微件显示视图中可见图层的图例。ScaleBar 以公制或非公制值显示比例尺。

1. 创建 ScaleBar。将 scalebar 添加到 view 的左下角 bottom-left 。

   展开

   代码块使用深色

                                                                      

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

   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: webmap
   
         });
   
         const scalebar = new ScaleBar({
           view: view
         });
   
         view.ui.add(scalebar, "bottom-left");
   
   

   展开

2. 创建 Legend。将 legend 添加到 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
         const scalebar = new ScaleBar({
           view: view
         });
   
         view.ui.add(scalebar, "bottom-left");
   
       const legend = new Legend ({
           view: view
         });
         view.ui.add(legend, "top-right");
   

   展开

运行应用程序

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

现在，左下角有个比例尺，右上角有地图的图例信息。

下一步是什么？

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

• 显示地图