Azure Maps の空間 IO モジュールの使用方法

[アーティクル]
10/23/2023

Azure Maps Web SDK には、JavaScript または TypeScript を使用して、空間データを Azure Maps Web SDK に統合する、空間 IO モジュールが用意されています。開発者は、このモジュールの堅牢な機能により、次のことを行うことができます。

空間データの読み取りと書き込み。サポートされているファイル形式は以下の通りです｡空間情報を含む列がある、KML、KMZ、GPX、GeoRSS、GML、CSV ファイル。また、Well-Known Text (WKT) もサポートされています。
Open Geospatial Consortium (OGC) サービスに接続し、Azure Maps Web SDK と統合し、Web Map Service (WMS) と Web Map Tile Service (WMTS) をマップにレイヤーとしてオーバーレイする。詳細については、「Open Geospatial Consortium (OGC) のマップレイヤーを追加する」を参照してください。
Web Feature Service (WFS) でデータを照会する。詳細については、「WFS サービスへの接続」を参照してください。
スタイル情報を含む複雑なデータセットをオーバーレイし、それらが自動的にレンダリングされるようにする。詳細については、「シンプルなデータレイヤーの追加」を参照してください。
高速 XML および区切りファイルリーダーとライタークラスを利用する。詳細については、「コア IO 操作」を参照してください。

このガイドでは、Web アプリケーションに空間 IO モジュールを統合して使用する方法を示します。

この動画では、Azure Maps Web SDK での空間 IO モジュールの概要を示します。

警告

特に別のドメインから参照する場合は、信頼できるソースからのデータとサービスのみを使用します。空間 IO モジュールではリスクを最小限に抑えるための手順を行いますが、最初にアプリケーションに危険なデータを許可しないことが最も安全な方法です。

前提条件

空間 IO モジュールのインストール

Azure Maps 空間 IO モジュールは、次の 2 つのオプションのいずれかを使用して読み込むことができます。

グローバルにホストされている Azure Maps 空間 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 Maps のマップコントロール npm パッケージを使用する方法」を参照してください。

空間 IO モジュールの使用

新しい HTML ファイルを作成します。

Azure Maps Web SDK を読み込んで、マップコントロールを初期化します。詳細については、Azure Maps のマップコントロールガイドに関するページを参照してください。この手順を完了すると、お使いの HTML ファイルは次のようになります。

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensures that IE 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 Maps の空間 IO モジュールを読み込みます。この演習では、Azure Maps 空間 IO モジュール用の CDN を使用します。次の参照を HTML ファイルの <head> 要素に追加します。
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
datasource を初期化し、データソースをマップに追加します。 layer を初期化し、データソースをマップレイヤーに追加します。次いで、データソースとレイヤーの両方をレンダリングします。次の手順で下にスクロールしてコードをすべて表示する前に、データソースとレイヤーコードのスニペットをどこに配置するのが最適か考えます。マップをプログラムで操作する前に、マップのリソースの準備が整うまで待つ必要があったことを思い出してください。
```
var datasource, layer;
```
and
```
//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 ファイルの特徴データを表示する方法を示します。

Note

この例では、Route66Attractions.xml を使用します。

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

    <meta charset="utf-8">

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