Share via


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

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 モジュールの使用

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

  2. 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>
    
  3. Azure Maps の空間 IO モジュールを読み込みます。 この演習では、Azure Maps 空間 IO モジュール用の CDN を使用します。 次の参照を HTML ファイルの <head> 要素に追加します。

    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
    
  4. 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);
    
  5. 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>
    
  6. <Your Azure Maps Key> は、実際のサブスクリプション キーで置き換えてください。 HTML ファイルに次の図のような結果が表示されます。

    Screenshot showing the Spatial Data sample in a map.

次のステップ

ここで説明した機能は、空間 IO モジュールで使用できる多数の機能のうちの 1 つにすぎません。 下記のガイドを参照して、空間 IO モジュールのその他の機能の使用方法を学習してください。

以下の Azure Maps 空間 IO のドキュメントを参照してください。