显示地图

字数统计: 1.1k 字
阅读时长: 约 2 分钟
当前版本: 4.29

了解如何创建和显示包括底图图层的地图。

地图由地理数据图层组成。地图包含一个底图图层，以及一个或多个数据图层。地图的位置、缩放级别和显示范围通过地图视图设置。本教程介绍了如何使用矢量底图图层创建和显示地图。本教程中的地图和代码可用作其他 2D 教程的基础。

步骤 ​

创建新 Pen ​

  1. 打开 CodePen，新建一个用于制图应用程序的 Pen。

添加 HTML ​

定义 HTML 内容，创建一个地图，该地图的宽高分别为 Web 浏览器窗口的宽度和高度。

  1. 在 CodePen > HTML 中，添加 HTML 和 CSS，创建一个包含 viewDiv 元素的页面。viewDiv 元素用于显示地图，设置它的宽度和高度分别为浏览器的全宽度和高度。

    更多内容

    CodePen 中是不需要输入 <!DOCTYPE html> 标签的。但如果您要在其他编辑器或是本地服务器上运行页面，需要手动在 HTML 页面顶部添加该标签。

    html
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>GeoScene Maps SDK 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 ​

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

    html
    <style>
    html,
    body,
    \#viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
</style>

<link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.29/"></script>

添加模块 ​

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

  1. 在HTML <head> 标签中，添加 <script> 标签和 require 语句，加载 Map 和 MapView 模块。或者直接在 CodePen > JS 面板添加JavaScript 代码。添加时，删除示例代码的 <script> 标签。

    html
    <link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css">
<script src="https://js.geoscene.cn/4.29/"></script>

<script>
    require(["geoscene/config", "geoscene/Map", "geoscene/views/MapView"], function(geosceneConfig, Map, MapView) {

    });
</script>

创建地图 ​

定义 Map， 设置底图图层。

  1. 返回至 CodePen。

  2. 创建 Map 对象，设置其 basemap 属性值为 tianditu-vector。

    html
    <script>
    require(["geoscene/config", "geoscene/Map", "geoscene/views/MapView"], function(geosceneConfig, Map, MapView) {

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

创建地图视图 ​

定义 MapView 类，设置地图及其显示范围。

  1. 新建 MapView ，设置其 map 属性值为上一步创建的 Map 对象。设置视图中心点和地图显示比例， center 属性设置为 111.4,37.9，zoom 属性设置为 4。container 属性设置为 viewDiv ，保存刷新则可显示地图。

    MapView 对象控制地图显示。center 和 zoom 用来确定地图的位置和加载时显示的缩放级别。

    zoom 值的范围通常介于 0-20 之间：0 表示离地球表面最远，20 表示最接近。

    MapView 还支持许多事件，比如 click 和 double-click。通过这些事件可以更改地图的位置、查找图层中的要素。

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

const view = new MapView({
    map: map,
    center: [111.4, 37.9], // Longitude, latitude
    zoom: 4, // Zoom level
    container: "viewDiv" // Div element
});

运行应用程序 ​

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

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

下一步是什么？ ​

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