显示地图

该教程展示创建和显示具有底图图层的地图。

地图由地理数据图层组成。地图包含一个底图图层，以及一个或多个数据图层。地图视图是用来展示地图的，通过设置位置和缩放级别可以显示地图的指定区域。

本教程介绍了如何使用矢量底图图层创建和显示地图。

在开始之前，我们强烈建议您阅读并了解如何使用正确的国家地图。

本教程中的地图和代码是其他 2D 教程的起点。

创建新 Pen

转至 CodePen，为您的制图应用程序创建新 Pen。

添加 HTML

定义 HTML 页面以创建一个地图，地图的大小采用 web 浏览器窗口的宽度和高度。

在 CodePen > HTML 中，添加 HTML 和 CSS 来创建一个带有 viewDiv 元素的页面。viewDiv 元素用于显示地图，其 CSS 设置样式，使用浏览器的全宽度和高度。

<!DOCTYPE html> 标签在 CodePen 中不是必需的。如果使用不同的编辑器或在本地服务器上运行页面，请确保将此标记添加到 HTML 页面的顶部。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.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: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

引用 API

在 <head> 标签中，添加对API的 CSS 文件和 JS 库的引用。

>
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: Display a map</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>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

添加模块

GeoScene JS API 提供 AMD 模块。采用 require 语句中引用 Map 和 MapView 模块。

在 <head> 标签中，添加 <script> 标签和 AMD require 语句以加载 Map 和 MapView 模块。

如果将 JavaScript 代码添加到 CodePen > JS 面板而不是 HTML 面板。需移除 <script> 标记。

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: Display a map</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/Map", "geoscene/views/MapView"], function (Map, MapView) {
      });
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

创建地图

定义 Map 并设置底图图层。

返回至 CodePen。

在 require 语句中，创建新的 Map 并设置底图属性，该例子中将 basemap 属性设置为 tianditu-vector 底图图层服务。

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: Display a map</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"], function (geosceneConfig,Map, MapView) {

        const map = new Map({
          basemap: "tianditu-vector" // 底图图层服务
        });

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

      });
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

创建地图视图

使用 MapView 类设置地图的显示。

创建 MapView 并设置 map 属性。

MapView 会显示地图的内容。center 和 zoom 属性会确定地图的位置和加载时显示的缩放级别。

zoom 属性可设置地图的缩放级别。取值的范围通常为 0-20：0 离地球表面最远，而 20 最近。某些底图图层可以支持最多 23 级的缩放级别。

MapView 还支持许多种触发事件，例如 click 和 double-click。可以使用这些事件来更改地图的位置或在图层中查找要素。

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: Display a map</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"], function (geosceneConfig,Map, MapView) {

        const map = new Map({
          basemap: "tianditu-vector" // 底图图层服务
        });

        const view = new MapView({
          map: map,
          center: [116, 39], // 经度，纬度
          zoom: 5, // 缩放级别
          container: "viewDiv" // Div 元素
        });

      });
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

运行应用程序

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

地图应显示以北京为中心的矢量底图图层。

下一步是什么？

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

上一主题常见问题解答下一主题显示场景 (3D)

GeoScene API for JavaScript

显示地图

解决方案

估计时间