マップを作成する
この記事では、マップを作成し、マップをアニメーション化する方法を示します。
マップを読み込む
マップを読み込むには、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>'
}
});
次のステップ
この記事で使われているクラスとメソッドの詳細については、次を参照してください。
ご利用のアプリに機能を追加するには、次のコード例を参照してください。