マップを作成する

[アーティクル]
06/22/2023

この記事では、マップを作成し、マップをアニメーション化する方法を示します。

マップを読み込む

マップを読み込むには、Map クラスの新しいインスタンスを作成します。マップを初期化するときに、マップをレンダリングするための DIV 要素 ID を渡し、マップの読み込み時に使用するオプションのセットを渡します。 atlas 名前空間で既定の認証情報が指定されていない場合は、マップの読み込み時にマップオプションでこの情報を指定する必要があります。マップでは、パフォーマンス向上のために複数のリソースが非同期的に読み込まれます。そのため、マップインスタンス作成後に、ready または load イベントをマップにアタッチし、マップと対話するコードをイベントハンドラーに追加します。 ready イベントは、プログラムで対話するのに十分なリソースがマップに読み込まれるとすぐに発生します。 load イベントは、初期マップビューの読み込みが完全に完了した後で発生します。

同じページで複数のマップを読み込むこともできます。同じページで複数のマップを読み込むサンプルコードについては Azure Maps サンプルの「複数のマップ」をご覧ください。このサンプルのソースコードについては、複数のマップのソースコードを参照してください。

マップのスナップグリッドを示すスクリーンショット。

ヒント

同じページで複数のマップを使用する場合は、同じまたは異なる認証と言語設定を使用できます。

世界の 1 つのコピーを表示する

ワイド画面でマップをズームアウトすると、世界の複数のコピーが水平方向に表示されます。このオプションは一部のシナリオには適していますが、他のアプリケーションでは、世界の 1 つのコピーを表示する方が適しています。この動作は、マップの renderWorldCopies オプションを false に設定することで実装されます。

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

マップオプション

マップを作成するときに、マップの機能をカスタマイズするために渡すことができる、以下のような各種オプションがあります。

CameraOptions と CameraBoundOptions は、マップに表示する領域を指定するために使用します。
ServiceOptions は、マップを機能強化するサービスとマップとの対話方法を指定するために使用します。
StyleOptions は、マップのスタイル設定とレンダリング方法を指定するために使用します。
UserInteractionOptions は、ユーザーによるマップの操作時にマップがどのようになるかを指定するために使用します。

これらのオプションは、setCamera、setServiceOptions、setStyle、および setUserInteraction の各関数を使用してマップを読み込んだ後に更新することもできます。

マップカメラの制御

マップのカメラを使用してマップの表示領域を設定する方法が 2 つあります。マップの読み込み時にカメラのオプションを設定できます。または、マップが読み込まれた後の任意の時点で setCamera オプションを呼び出して、プログラムによってマップビューを更新できます。

カメラの設定

マップカメラは、マップキャンバスのビューポートに表示される内容を制御します。カメラオプションは、初期化時にマップオプションに渡すか、マップの setCamera 関数に渡すことができます。

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

中心やズームレベルなどのマップのプロパティは、CameraOptions プロパティの一部です。

カメラ境界の設定

境界ボックスを使用して、マップカメラを更新できます。境界ボックスがポイントデータから計算された場合、アイコンのサイズを考慮するために、カメラオプションでピクセルパディング値を指定すると役立つ場合がよくあります。このピクセルパディングにより、ポイントがマップビューポートに収まらなくなるのを防ぐことができます。

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

次のコードでは、new atlas.Map() によって Map オブジェクトが構築されます。 CameraBoundsOptions などの Map プロパティは、Map クラスの setCamera 関数を介して定義できます。境界とパディングのプロパティは、setCamera を使用して設定します。

マップビューをアニメーション化する

マップのカメラオプションを設定するときに、アニメーションオプションを設定することもできます。これらのオプションでは、カメラの移動に必要なアニメーションの種類と継続時間を指定します。

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

次のコードでは、最初のコードブロックでマップが作成され、中心とズームのマップスタイルが設定されます。 2 番目のコードブロックでは、アニメーションボタンのクリックイベントハンドラーが作成されます。このボタンが選択されると、setCamera 関数が呼び出され、CameraOptions と AnimationOptions にはランダムな値が指定されます。

<!DOCTYPE html>
 <html>
 <head>

    <!-- 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.min.js"></script>
  
  
    <script type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

「マップをアニメーション化」というラベルの付いたマップを示すスクリーンショット。このボタンを押すとマップが拡大または縮小します。

要求の変換

マップコントロールによって行われた HTTP 要求を変更できると便利な場合があります。次に例を示します。

パスワードで保護されたサービスに対して、タイル要求にヘッダーを追加する。
プロキシサービスを介して要求を実行するように URL を変更する。

マップのサービスオプションには transformRequest があります。これを使用すると、マップによって行われるすべての要求を、それらが行われる前に変更することができます。 transformRequest オプションは、2 つのパラメーター (文字列の URL と、要求の使用目的を示すリソースの種類の文字列) を受け取る関数です。この関数は、RequestParameters の結果を返す必要があります。

transformRequest: (url: string, resourceType: string) => RequestParameters

要求変換を使用する場合は、少なくとも RequestParameters プロパティを含む url オブジェクトを返す必要があります。 RequestParameters オブジェクトに含めることができるプロパティを次に示します。

オプション	Type	説明
body	string	POST 要求本文。
資格情報	`'same-origin'` \| `'include'`	クロスオリジン要求 (COR) の資格情報の設定を指定するために使用します。クロスオリジン要求で Cookie を送信するには、"include" を使用します。
headers	object	要求と共に送信されるヘッダー。このオブジェクトは、文字列値のキーと値のペアです。
method	`'GET'` \| `'POST'` \| `'PUT'`	実行する要求の種類。既定値は `'GET'` です。
型	`'string'` \| `'json'` \| `'arrayBuffer'`	POST 応答本文の形式。
url	string	要求する URL。

マップに追加するコンテンツに最も関連するリソースの種類を次の表に示します。

リソースの種類	説明
Image	SymbolLayer または ImageLayer で使用するイメージの要求。
source	TileJSON 要求などのソース情報の要求。基本マップスタイルからの一部の要求では、ソース情報の読み込み時にこのリソースの種類も使用されます。
並べて表示	タイルレイヤー (ラスターまたはベクター) からの要求。
WFS	空間 IO モジュール内の `WfsClient` から OGC Web Feature Service への要求。詳細については、「WFS サービスへの接続」を参照してください。
WebMapService	空間 IO モジュール内の `OgcMapLayer` から WMS または WMTS サービスへの要求。詳細については、「Open Geospatial Consortium (OGC) のマップレイヤーを追加する」を参照してください。

基本マップスタイルに関連する要求変換を通じて渡されるリソースの種類は、StyleDefinitions、Style、SpriteImage、SpriteJSON、Glyphs、Attribution であり、これらは通常は無視されます。

次の例では、ユーザー名とパスワードをヘッダーとして要求に追加して、https://example.com サイトへのすべての要求を変更する方法を示します。

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

次のステップ

この記事で使われているクラスとメソッドの詳細については、次を参照してください。

Map

CameraOptions

AnimationOptions

ご利用のアプリに機能を追加するには、次のコード例を参照してください。

マップのスタイルを変更する

マップにコントロールを追加する

コードサンプル

次の方法で共有

マップを作成する

マップを読み込む

世界の 1 つのコピーを表示する

マップオプション

マップカメラの制御

カメラの設定

カメラ境界の設定

マップビューをアニメーション化する

要求の変換

次のステップ

フィードバック

その他のリソース

次の方法で共有

マップを作成する

マップを読み込む

世界の 1 つのコピーを表示する

マップ オプション

マップ カメラの制御

カメラの設定

カメラ境界の設定

マップ ビューをアニメーション化する

要求の変換

次のステップ

フィードバック

その他のリソース

マップオプション

マップカメラの制御

マップビューをアニメーション化する