你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

使用 Azure Maps 空间 IO 模块

项目
02/28/2025

Azure Maps 空间 IO 模块使用 JavaScript 或 TypeScript 将空间数据与 Azure Maps Web SDK 集成。本指南演示了如何在 Web 应用程序中集成和使用空间 IO 模块。

你可以使用此模块的强大功能来：

读取和写入空间数据。可以使用的文件格式包括：
- Keyhole 标记语言 (KML)。
- 压缩 KML (KMZ)。
- GPS 交换格式 (GPX)。
- 地理简易信息聚合 (GeoRSS)。
- 地理标记语言 (GML)。
- 地理 JavaScript 对象表示法 (GeoJSON)。
- Well-Known Text (WKT)。
- 逗号分隔值 (CSV)（列包含空间信息时）。
连接到开放地理空间信息联盟 (OGC) 服务并与 Azure Maps Web SDK 集成。也可以覆盖 Web 地图服务 (WMS) 和 Web 地图图块服务 (WMTS)，将这两种服务作为地图图层使用。有关详细信息，请参阅从开放地理空间信息联盟 (OGC) 添加地图层。
在 Web 地理要素服务 (WFS) 中查询数据。有关详细信息，请参阅连接到 WFS 服务。
覆盖包含样式信息且可自动呈现的复杂数据集。有关详细信息，请参阅添加简单的数据层。
使用高速 XML 和带分隔符的文件读取器和编写器类。有关详细信息，请参阅核心 IO 操作。

以下视频概述了 Azure Maps Web SDK 中的空间 IO 模块。

警告

仅使用可信来源的数据和服务，尤其是从其他域引用数据时更应如此。空间 IO 模块会采取步骤将风险降到最低，但无论如何不应允许应用程序使用任何危险数据。

先决条件

安装空间 IO 模块

可以使用以下两个选项之一，加载 Azure Maps 空间 IO 模块：

第一个选项是针对 Azure Maps 空间 IO 模块使用全局托管的 Azure 内容分发网络。在 HTML 文件的 <head> 元素中，使用以下脚本标记来添加引用：
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
第二个选项是在本地加载 azure-maps-spatial-io 的源代码，并将其与应用一起托管。此程序包还包括了 TypeScript 定义。运行以下命令安装包：
```
npm install azure-maps-spatial-io
```
使用导入声明将模块添加到源文件中：
```
import * as spatial from "azure-maps-spatial-io";
```
若要了解详细信息，请参阅如何使用 Azure Maps 地图控件 npm 包。

实现空间 IO 模块

创建新的 HTML 文件。

加载 Azure Maps Web SDK 并初始化地图控件。有关详细信息，请参阅 Azure Maps 地图控件指南。 HTML 文件应如下所示：

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that the web page looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.js"></script>

    <script type='text/javascript'>

        var map;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function() {

                // Write your code here to make sure it runs once the map resources are ready.

            });
        }
    </script>
</head>

<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>

</html>

加载 Azure Maps 空间 IO 模块，并使用 Azure Maps 空间 IO 模块的内容分发网络。向 HTML 文件的 <head> 元素添加以下引用：
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
初始化数据源，并将其添加到地图。
初始化简单数据层，并将数据源添加到其中。
呈现数据层。

在继续向下滚动以查看完整代码之前，请先决定放置数据源和图层代码片段的最佳位置。等待地图资源准备就绪，然后以编程方式操作地图。

var datasource, layer;

找到放置代码片段的最佳位置。

//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering the data.
layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

HTML 代码应如下所示。此示例代码演示如何在地图上显示 XML 文件的特征数据。

注意

此示例使用 Route66Attractions.xml。

<!DOCTYPE html>
<html>
<head>
    <title>Spatial IO Module Example</title>

    <meta charset="utf-8">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that the web page looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.js"></script>

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function() {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read an XML file from a URL or pass in a raw XML string.
                atlas.io.read('Route66Attractions.xml').then(r => {
                    if (r) {
                        //Add the feature data to the data source.
                        datasource.add(r);

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({
                                bounds: r.bbox,
                                padding: 50
                            });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload='GetMap()'>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>

请记住要将 <Your Azure Maps Key> 替换为订阅密钥。 HTML 文件应包含如下所示的图像：

本文仅介绍空间 IO 模块的众多功能之一。若要了解其他功能，请阅读以下指南：

通过

使用 Azure Maps 空间 IO 模块

先决条件

安装空间 IO 模块

实现空间 IO 模块

反馈

其他资源

通过

使用 Azure Maps 空间 IO 模块

先决条件

安装空间 IO 模块

实现空间 IO 模块

相关内容

反馈

其他资源