次の方法で共有

ラスター マップ上にカスタム データをレンダリングする

  • [アーティクル]

この記事では、画像合成機能でマップ静的画像取得コマンドを使う方法について説明します。 画像合成機能では、カスタム データとさまざまなスタイルを含む静的ラスター タイルの取得がサポートされています。

カスタム データの例を次に示します。

  • カスタム プッシュピン
  • ラベル
  • ジオメトリのオーバーレイ

ヒント

Web ページ上にシンプルなマップを表示するには、多くの場合、静的イメージ サービスを使用するよりも、Azure Maps Web SDK を使用する方がコスト効率に優れています。 Web SDK では、マップ タイルを使用します。ユーザーがマップをパンしたりズームしたりしない限り、多くの場合、ブラウザーのキャッシュを使ってマップの読み込みごとにトランザクションのごく一部のみが生成されます。 Azure Maps Web SDK には、パンとズームを無効にするオプションがあります。 また、Azure Maps Web SDK には、静的マップ Web サービスより豊富なデータ視覚化オプションが用意されています。

前提条件

重要

URL の例で、{Your-Azure-Maps-Subscription-key} を、実際の Azure Maps サブスクリプション キーに置き換えてください。

この記事では Bruno アプリケーションを使用していますが、別の API 開発環境も使用できます。

Note

この記事の例では、Gen2 価格レベルの Azure Maps アカウントが必要です。

Azure Maps Gen1 価格レベルの廃止

Gen1 価格レベルは非推奨となり、2026 年 9 月 15 日に廃止されます。 Gen2 価格レベルが Gen1 (S0 と S1 の両方) 価格レベルに取って代わります。 Azure Maps アカウントに Gen1 価格レベルが選択されている場合、廃止前に Gen2 価格レベルに切り替えることができます。切り替えない場合、自動的に更新されます。 詳細については、「Azure Maps アカウントの価格レベルを管理する」を参照してください。

カスタムのピンとラベルを使用して静的画像を取得する

カスタムのピンとラベルを使用して静的画像を取得するには:

  1. Bruno アプリで [新しい要求] を選びます。

  2. 型を [HTTP] に設定します。

  3. 要求の [名前] を入力します (「Get Map Static Image」など)。

  4. GET HTTP URL メソッドを選びます。

  5. 次の URL を入力します。

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=13&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-73.964085, 40.78477&path=lcFF0000|lw2|la0.60|ra700||-122.13230609893799 47.64599069048016&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png

  6. ［作成］ を選択します

  7. 要求 URL の右側に表示される [要求の送信] 矢印を選びます。

    次の画像が返されます。

    ラベル付きのカスタム プッシュピン。

色と不透明度が指定された多角形をレンダリングする

多角形の外観は、path パラメーターのスタイル修飾子を使用して変更できます。

色と不透明度が指定された多角形をレンダリングするには:

  1. Bruno アプリで [新しい要求] を選びます。

  2. 型を [HTTP] に設定します。

  3. 要求の [名前] を入力します (「GET Polygon」など)。

  4. GET HTTP URL メソッドを選びます。

  5. Render Service に次の URL を入力します。

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=15&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.50||-74.03995513916016 40.70090237454063|-74.04082417488098 40.70028420372218|-74.04113531112671 40.70049568385827|-74.04298067092896 40.69899904076542|-74.04271245002747 40.69879568992435|-74.04367804527283 40.6980961582905|-74.04364585876465 40.698055487620714|-74.04368877410889 40.698022951066996|-74.04168248176573 40.696444909137|-74.03901100158691 40.69837271818651|-74.03824925422668 40.69837271818651|-74.03809905052185 40.69903971085914|-74.03771281242369 40.699340668780984|-74.03940796852112 40.70058515602143|-74.03948307037354 40.70052821920425|-74.03995513916016 40.70090237454063&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&center=-74.040701, 40.698666&height=500&Width=500

    次の画像が返されます。

    不透明な多角形をレンダリングします。

カスタム ラベルが付いた円とプッシュピンをレンダリングする

ピンの外観を変更するには、スタイル修飾子を追加します。 たとえば、プッシュピンとそのラベルを大きくまたは小さくするには、sc "スケール スタイル" 修飾子を使用します。 この修飾子は 0 より大きい値を受け取ります。 1 の値が標準のスケールです。 1 より大きい値にするとピンが大きくなり、1 より小さい値にすると小さくなります。 スタイル修飾子について詳しくは、マップ静的画像取得コマンドの Path パラメーターを参照してください。

カスタム ラベルが付いた円とプッシュピンをレンダリングするには:

  1. Bruno アプリで [新しい要求] を選びます。

  2. 型を [HTTP] に設定します。

  3. 要求の [名前] を入力します (「GET Polygon」など)。

  4. GET HTTP URL メソッドを選びます。

  5. Render Service に次の URL を入力します。

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|sc1|al0.66|lc003C62|co002D62||'Microsoft Corporate Headquarters'-122.14131832122801 47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935 47.64452336193245&height=700&Width=700

  6. ［作成］ を選択します

  7. 要求 URL の右側に表示される [要求の送信] 矢印を選びます。

    次の画像が返されます。

    カスタム プッシュピンが付いた円をレンダリングします。

  8. 次に、co スタイル修飾子を変更して、プッシュピンの色を変更します。 pins パラメーターの値 (pins=default|la15+50|al0.66|lc003C62|co002D62|) を見ると、現在の色が #002D62 であることがわかります。 色を #41d42a に変更するには、#002D62 を #41d42a に置き換えます。 pins パラメーターは pins=default|la15+50|al0.66|lc003C62|co41D42A| になりました。 要求は次の URL のようになります。

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co41D42A||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&height=700&Width=700

  9. ［作成］ を選択します

  10. 要求 URL の右側に表示される [要求の送信] 矢印を選びます。

    次の画像が返されます。

    更新されたプッシュピンで円をレンダリングします。

同様に、他のスタイル修飾子を変更、追加、および削除することもできます。

トラフィック レイヤーを追加する

道路ベースマップ上にトラフィック レイヤーがレンダリングされた静的画像を取得するには、trafficLayer パラメーターを使用します。 次の例は、トラフィック レイヤーとラベル付きピンがあるマップを示しています。

  1. Bruno アプリで [新しい要求] を選びます。

  2. 型を [HTTP] に設定します。

  3. 要求の [名前] を入力します (「Get Map Static Image - traffic layer」など)。

  4. GET HTTP URL メソッドを選びます。

  5. 次の URL を入力します。

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center= -0.122427, 51.500867&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700&trafficLayer=microsoft.traffic.relative.main

  6. ［作成］ を選択します

  7. 要求 URL の右側に表示される [要求の送信] 矢印を選びます。

    次の画像が返されます。

    トラフィック レイヤーと

濃い灰色のスタイルを使用してマップを作成する

濃い灰色のスタイルが適用された静的画像を取得するには、TilesetId パラメーターを microsoft.base.darkgrey に設定します。

  1. Bruno アプリで [新しい要求] を選びます。

  2. 型を [HTTP] に設定します。

  3. 要求の [名前] を入力します (「Get Map Static Image - dark gray style」など)。

  4. GET HTTP URL メソッドを選びます。

  5. 次の URL を入力します。

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.base.darkgrey&api-version=2024-04-01&language=en-us&center=-95.360200,29.753452&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700

  6. ［作成］ を選択します

  7. 要求 URL の右側に表示される [要求の送信] 矢印を選びます。

次の画像が返されます。

タイルセット ID パラメーターを microsoft.base.darkgrey に設定することで作成された濃い灰色のスタイルを示すマップのスクリーンショット。

TilesetId パラメーターを使って実現できるさまざまなスタイルの詳細については、「Render - Get Map Tileset」REST API ドキュメントの「TilesetId」を参照してください。

画像スタイルを使用してマップを作成する

画像スタイルが適用された静的画像を取得するには、TilesetId パラメーターを microsoft.imagery に設定します。

  1. Bruno アプリで [新しい要求] を選びます。

  2. 型を [HTTP] に設定します。

  3. 要求の [名前] を入力します (「Get Map Static Image - imagery style」など)。

  4. GET HTTP URL メソッドを選びます。

  5. 次の URL を入力します。

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.imagery&api-version=2024-04-01&language=en-us&center=-43.176141,-22.965458&height=700&Width=700

  6. ［作成］ を選択します

  7. 要求 URL の右側に表示される [要求の送信] 矢印を選びます。

    次の画像が返されます。

    タイルセット ID パラメーターを microsoft.imagery に設定することで作成された画像スタイルを示すマップのスクリーンショット。

TilesetId パラメーターを使って実現できるさまざまなスタイルの詳細については、「Render - Get Map Tileset」REST API ドキュメントの「TilesetId」を参照してください。

次のステップ

Render - マップ静的画像取得