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

發行項
09/28/2024

Azure 地圖服務 Web SDK 提供了空間 IO 模組，其會使用 JavaScript 或 TypeScript 來整合空間資料與 Azure 地圖服務 Web SDK。此課程模組中強大的功能可讓開發人員：

讀取和寫入空間資料。支援的檔案格式包括：KML、KMZ、GPX、GeoRSS、GML、GeoJSON 和 CSV 檔案，其中包含具有空間資訊的資料行。同時也支援 Well-Known TEXT (WKT)。
連線至開放地理空間協會 (OGC) 服務、與 Azure 地圖服務 Web SDK 整合，並將 Web 地圖服務 (WMS) 和 Web 地圖底圖服務 (WMTS) 重疊為地圖上的圖層。如需詳細資訊，請參閱從開放地理空間協會 (OGC) 新增地圖圖層。
查詢 Web 功能服務 (WFS) 中的資料。如需詳細資訊，請參閱連線至 WFS 服務。
重疊包含了樣式資訊的複雜資料集，並讓這些資料集自動呈現。如需詳細資訊，請參閱新增簡單資料圖層。
利用高速 XML 和分隔的檔案讀取器和寫入器類別。如需詳細資訊，請參閱核心 IO 作業。

本指南示範如何整合與使用 Web 應用程式中的空間 IO 模組。

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

警告

只使用來自您信任來源的資料和服務，特別是您從另一個網域參考服務或資料時。空間 IO 模組會採取步驟來將風險降到最低，不過最安全的方法也是從一開始就不要允許任何危險資料進入應用程式。

必要條件

安裝空間 IO 模組

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

Azure 地圖服務空間 IO 模組的全域裝載 Azure CDN。針對此選項，您會在 HTML 檔案的 <head> 元素中加入 JavaScript 的參考。
```
<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">

    <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures 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 模組的 CDN。將下列參考新增至 HTML 檔案的 <head> 元素：
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
初始化 datasource，並將資料來源新增至地圖。初始化 layer，並將資料來源新增至地圖圖層。然後，同時呈現資料來源和圖層。在您向下捲動以查看下一個步驟的完整程式碼之前，請先思考放置資料來源和圖層程式碼片段的最佳位置。回想一下，在以程式設計方式操作地圖之前，我們應該要先等到地圖資源準備就緒。
```
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">

    <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures 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>