ラスター マップ上にカスタム データをレンダリングする
この記事では、画像合成機能でマップ静的画像取得コマンドを使う方法について説明します。 画像合成機能では、カスタム データを含む静的ラスター タイルの取得がサポートされています。
カスタム データの例を次に示します。
- カスタム プッシュピン
- ラベル
- ジオメトリのオーバーレイ
ヒント
Web ページ上にシンプルなマップを表示するには、多くの場合、静的イメージ サービスを使用するよりも、Azure Maps Web SDK を使用する方がコスト効率に優れています。 Web SDK では、マップ タイルを使用します。ユーザーがマップをパンしたりズームしたりしない限り、多くの場合、マップの読み込みごとにトランザクションのごく一部のみが生成されます。 Azure Maps Web SDK には、パンとズームを無効にするオプションがあります。 また、Azure Maps Web SDK には、静的マップ Web サービスより豊富なデータ視覚化オプションが用意されています。
前提条件
この記事では Postman アプリケーションを使用していますが、別の API 開発環境も使用できます。
重要
URL の例で、{Your-Azure-Maps-Subscription-key} を、実際の Azure Maps サブスクリプション キーに置き換えてください。
ラベルとカスタム画像を使ってプッシュピンをレンダリングする
Note
このセクションの手順には、Gen1 または Gen2 価格レベルの Azure Maps アカウントが必要です。 Azure Maps アカウントの Gen1 S0 レベルでは、pins パラメーターのインスタンスが 1 つだけサポートされています。 カスタム画像を利用し、URL 要求で指定されている最大 5 つのプッシュピンをレンダリングできます。
Azure Maps Gen1 価格レベルの廃止
Gen1 価格レベルは非推奨となり、2026 年 9 月 15 日に廃止されます。 Gen2 価格レベルが Gen1 (S0 と S1 の両方) 価格レベルに取って代わります。 Azure Maps アカウントに Gen1 価格レベルが選択されている場合、廃止前に Gen2 価格レベルに切り替えることができます。切り替えない場合、自動的に更新されます。 詳細については、「Azure Maps アカウントの価格レベルを管理する」を参照してください。
カスタムのピンとラベルを使用して静的画像を取得する
カスタムのピンとラベルを使用して静的画像を取得するには:
Postman アプリ内で [新規] を選択します。
[新規作成] ウィンドウで [HTTP 要求] を選択します。
要求の [要求名] を入力します (GET Static Image など)。
GET HTTP メソッドを選択します。
次の URL を入力します。
https://atlas.microsoft.com/map/static/png?subscription-key={Your-Azure-Maps-Subscription-key}&api-version=2022-08-01&layer=basic&style=main&zoom=12¢er=-73.98,%2040.77&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27CentralPark%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png[Send] を選択します。
サービスから次のような画像が返されます。
色と不透明度が指定された多角形をレンダリングする
Note
このセクションの手順には、Gen1 (S1) または Gen2 価格レベルの Azure Maps アカウントが必要です。
多角形の外観は、path パラメーターのスタイル修飾子を使用して変更できます。
色と不透明度が指定された多角形をレンダリングするには:
Postman アプリ内で [新規] を選択します。
[Create New](新規作成) ウィンドウで [HTTP Request](HTTP 要求) を選択します。
要求の [要求名] を入力します (「GET Polygon」など)。
GET HTTP メソッドを選択します。
Render Service に次の URL を入力します。
https://atlas.microsoft.com/map/static/png?api-version=2022-08-01&style=main&layer=basic&sku=S1&zoom=14&height=500&Width=500¢er=-74.040701, 40.698666&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 &subscription-key={Your-Azure-Maps-Subscription-key}サービスから次のような画像が返されます。
カスタム ラベルが付いた円とプッシュピンをレンダリングする
Note
このセクションの手順には、Gen1 (S1) または Gen2 価格レベルの Azure Maps アカウントが必要です。
ピンの外観を変更するには、スタイル修飾子を追加します。 たとえば、プッシュピンとそのラベルを大きくまたは小さくするには、sc "スケール スタイル" 修飾子を使用します。 この修飾子は 0 より大きい値を受け取ります。 1 の値が標準のスケールです。 1 より大きい値にするとピンが大きくなり、1 より小さい値にすると小さくなります。 スタイル修飾子について詳しくは、マップ静的画像取得コマンドの Path パラメーターを参照してください。
カスタム ラベルが付いた円とプッシュピンをレンダリングするには:
Postman アプリ内で [新規] を選択します。
[Create New](新規作成) ウィンドウで [HTTP Request](HTTP 要求) を選択します。
要求の [要求名] を入力します (「GET Polygon」など)。
GET HTTP メソッドを選択します。
Render Service に次の URL を入力します。
https://atlas.microsoft.com/map/static/png?api-version=2022-08-01&style=main&layer=basic&zoom=14&height=700&Width=700¢er=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|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&subscription-key={Your-Azure-Maps-Subscription-key}[Send] を選択します。
サービスから次のような画像が返されます。
次に、
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/png?api-version=2022-08-01&style=main&layer=basic&zoom=14&height=700&Width=700¢er=-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&subscription-key={Your-Azure-Maps-Subscription-key}[Send] を選択します。
サービスから次のような画像が返されます。
同様に、他のスタイル修飾子を変更、追加、および削除することもできます。