使用 Azure 地圖服務空間IO模組

發行項
02/25/2025

Azure 地圖服務空間 IO 模組會使用 JavaScript 或 TypeScript，將空間數據與 Azure 地圖服務 Web SDK 整合。本指南示範如何整合與使用 Web 應用程式中的空間 IO 模組。

您可以使用本課程模組中的強固功能來：

讀取和寫入空間資料。您可以使用檔案格式，包括：
- Keyhole 標記語言（KML）。
- 壓縮的 KML （KMZ）。
- GPS 交換格式（GPX）。
- 地理真正簡單的新聞整合（GeoRSS）。
- 地理標記語言（GML）。
- 地理 JavaScript 物件表示法（GeoJSON）。
- 已知的文字（WKT）。
- 當數據行包含空間資訊時，逗號分隔值（CSV）。
連線至開放地理空間聯盟（OGC）服務，並與 Azure 地圖服務 Web SDK 整合。您也可以將 Web 地圖服務（WMS）和 Web 地圖底圖服務（WMTS）重疊為地圖上的層次。如需詳細資訊，請參閱從開放地理空間協會 (OGC) 新增地圖圖層。
查詢 Web 功能服務 (WFS) 中的資料。如需詳細資訊，請參閱連線至 WFS 服務。
覆疊複雜的數據集，其中包含可以自動轉譯的樣式資訊。如需詳細資訊，請參閱新增簡單資料圖層。
使用高速 XML 和分隔的檔案讀取器和寫入器類別。如需詳細資訊，請參閱核心 IO 作業。

下列影片提供 Azure 地圖服務 Web SDK 中空間 IO 模組的概觀。

警告

請只從您信任的來源使用數據和服務，特別是從另一個網域參考數據時。空間 IO 模組會採取步驟來將風險降到最低，但不論為何，您都不應允許任何危險的數據進入您的應用程式。

必要條件

安裝空間 IO 模組

您可以使用下列兩個選項之一來載入 Azure 地圖服務空間 IO 模組：

第一個選項是針對 Azure 地圖服務 Spatial 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 地圖服務地圖控制項 npm 套件。

實作空間 IO 模組

建立新的 HTML 檔案。

載入 Azure 地圖服務 Web SDK，並初始化地圖控制項。如需詳細資訊，請參閱 Azure 地圖服務地圖控件指南。您的 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 地圖服務空間 IO 模組，並使用 Azure 地圖服務空間 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 地圖服務空間IO模組

必要條件

安裝空間 IO 模組

實作空間 IO 模組

意見反應

其他資源

共用方式為

使用 Azure 地圖服務 空間IO模組

必要條件

安裝空間 IO 模組

實作空間 IO 模組

相關內容

意見反應

其他資源

使用 Azure 地圖服務空間IO模組