イメージ テンプレートの使用方法
画像は、Azure Maps Web SDK 内の HTML マーカーおよび のさまざまなレイヤーで使用できます。
- シンボル レイヤーでは、画像アイコンを使用してマップ上にポイントをレンダリングできます。 線のパスに沿ってシンボルをレンダリングすることもできます。
- 塗りつぶしパターン画像を使用して多角形レイヤーをレンダリングできます。
- HTML マーカーでは、画像やその他の HTML 要素を使用してポイントをレンダリングできます。
レイヤーを使用して良いパフォーマンスを確保するには、レンダリングする前に、画像をマップ画像スプライト リソースに読み込みます。 SymbolLayer の IconOptions では、既定でいくつかの色の数個のマーカー画像をマップ画像スプライトに事前に読み込みます。 これらのマーカー画像などは、SVG テンプレートとして使用できます。 カスタム スケールを使用して画像を作成するために使用したり、顧客の第一および第二の色として使用したりすることができます。 合計で 42 の画像テンプレートが用意されています。27 個の記号アイコンと 15 個の多角形の塗りつぶしパターン。
画像テンプレートをマップ画像スプライト リソースに追加するには、map.imageSprite.createFromTemplate 関数を使用します。 この関数では、最大 5 つのパラメーターを渡すことができます。
createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>
id は、作成する一意の識別子です。 id は、マップ画像スプライトに追加されるときに、画像に割り当てられます。 レイヤーでこの識別子を使用し、レンダリングする画像リソースを指定します。 templateName では、使用する画像テンプレートを指定します。 color オプションでは画像の原色を設定し、secondaryColor オプションでは画像の補色を設定します。 scale オプションでは、画像スプライトに適用する前に画像テンプレートを拡大縮小します。 画像が画像スプライトに適用されると、それが PNG に変換されます。 上質なレンダリングを確保するには、画像テンプレートをレイヤーで拡大するよりも、拡大してからスプライトに追加することをお勧めします。
この関数では、画像が画像スプライトに非同期的に読み込まれます。 したがって、この関数は、それが完了するまで待機できる Promise を返します。
次のコードは、組み込みテンプレートのいずれかから画像を作成し、それをシンボル レイヤーと共に使用する方法を示しています。
map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker-flat', 'teal', '#fff').then(function () {
//Add a symbol layer that uses the custom created icon.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'myTemplatedIcon'
}
}));
});
シンボル レイヤーと共に画像テンプレートを使用する
画像テンプレートをマップ画像スプライトに読み込んだ後は、iconOptions の image オプションで画像リソース ID を参照することで、シンボル レイヤーにシンボルとしてレンダリングすることができます。
組み込みのアイコン テンプレートを含むシンボル レイヤー のサンプルでは、次のスクリーンショットに示すように、marker-flat イメージ テンプレートを使用してシンボル レイヤーを描画し、第一の色が青緑で第二の色が白を使用してこれを行う方法を示します。
このサンプルのソース コードについては、「組み込みのアイコン テンプレートを使用したシンボル レイヤーのサンプル コード」を参照してください。
線のパスに沿って画像テンプレートを使用する
画像テンプレートをマップ画像スプライトに読み込んだ後は、LineString をデータ ソースに追加し、シンボル レイヤーを lineSpacing オプションと共に使用し、iconOptions の image オプションで画像リソースの ID を参照することで、線のパスに沿ってレンダリングすることができます。
組み込みのアイコン テンプレートを含む線レイヤーでは、これを行う方法を示します。 以下のスクリーンショットに示されているように、マップ上でピンク色の線をレンダリングし、第一の色がドジャー ブルーで第二の色が白の car 画像テンプレートを使用して、シンボル レイヤーが使用されています。 このサンプルのソース コードについては、「組み込みのアイコン テンプレートを使用した線レイヤーのサンプル コード」を参照してください。
ヒント
画像テンプレートが上向きの場合は、線と同じ方向を指すようにするには、シンボル レイヤーの rotation アイコン オプションを 90 に設定します。
多角形レイヤーで画像テンプレートを使用する
画像テンプレートをマップ画像スプライトに読み込んだ後は、レイヤーの fillPattern オプションで画像リソース ID を参照することで、多角形レイヤーに塗りつぶしパターンとしてレンダリングすることができます。
次のスクリーンショットに示すように、組み込みのアイコン テンプレートを使用して多角形を塗りつぶすサンプルでは、赤の第一の色と透明な第二の色を持つ dot イメージ テンプレートを使用して、多角形レイヤーをレンダリングする方法を示します。 このサンプルのソース コードについては、「組み込みのアイコン テンプレートを使用した多角形の塗りつぶしのサンプル コード」を参照してください。
ヒント
塗りつぶしパターンの第二の色を設定すると、基のマップでプライマリ パターンが提供されることを確認しやすくなります。
HTML マーカーと共に画像テンプレートを使用する
画像テンプレートは、altas.getImageTemplate 関数を使用して取得できます。また、HTML マーカーのコンテンツとして使用できます。 このテンプレートは、マーカーの htmlContent オプションに渡してから、color、secondaryColor、および text オプションを使用してカスタマイズすることができます。
組み込みのアイコン テンプレートを含む HTML マーカー のサンプルでは、次のスクリーンショットに示すように、赤い第一の色、ピンクの 第二の色、テキスト値が "00" の marker-arrow テンプレートを使用 してこれを示します。 このサンプルのソース コードについては、「組み込みのアイコン テンプレートを使用した HTML マーカーのサンプル コード」を参照してください。
ヒント
画像テンプレートはマップの外でも使用できます。 getImageTemplate 関数からは {color}、{secondaryColor}、{scale}、{text} プレースホルダーのある SVG 文字列が返されます。 これらのプレースホルダーを置換し、有効な SVG 文字列を作成します。 その後、SVG 文字列を HTML DOM に直接追加するか、それをデータ URI に変換し、イメージ タグに挿入できます。 次に例を示します。
//Retrieve an SVG template and replace the placeholder values.
var svg = atlas.getImageTemplate('marker').replace(/{color}/, 'red').replace(/{secondaryColor}/, 'white').replace(/{text}/, '').replace(/{scale}/, 1);
//Convert to data URI for use in image tags.
var dataUri = 'data:image/svg+xml;base64,' + btoa(svg);
再利用可能なカスタム テンプレートを作成する
アプリケーションの異なるモジュール内で同じアイコンを使用する場合、またはさらに画像テンプレートを追加するモジュールを作成する場合、Azure Maps Web SDK からこれらのアイコンを簡単に追加および取得できます。 以下の静的関数は atlas 名前空間で使用します。
| 名前 | 返り値の種類 | 説明 |
|---|---|---|
addImageTemplate(templateName: string, template: string, override: boolean) |
カスタム SVG 画像テンプレートを atlas 名前空間に追加します。 | |
getImageTemplate(templateName: string, scale?: number) |
string | 名前を指定して SVG テンプレートを取得します。 |
getAllImageTemplateNames() |
string[] | 名前を指定して SVG テンプレートを取得します。 |
SVG 画像テンプレートでは、次のプレースホルダー値がサポートされています。
| プレースホルダー | 説明 |
|---|---|
{color} |
第一の色。 |
{secondaryColor} |
補色。 |
{scale} |
SVG 画像は、マップ画像スプライトに追加されると png 画像に変換されます。 このプレースホルダーを使用すると、変換する前にテンプレートを拡大縮小し、きれいにレンダリングされるようにすることができます。 |
{text} |
HTML マーカーと共に使用する場合にテキストを表示する位置。 |
atlas 名前空間へのカスタム アイコン テンプレートの追加サンプルは、SVG テンプレートを取得し、次のスクリーンショットに示すように、再利用可能なアイコン テンプレートとしてAzure Maps Web SDK に追加する方法を示しています。 このサンプルのソース コードについては、「カスタム アイコン テンプレートの atlas 名前空間への追加のサンプル コード」を参照してください。
画像テンプレートの一覧
次の表は、Azure Maps Web SDK 内で現在使用できるすべての画像テンプレートの一覧です。 各画像の上にテンプレート名が示されています。 既定では、第一の色は青であり、第二の色は白です。 白の背景で第二の色を見やすくするために、次の画像では第二の色が黒に設定されています。
シンボル アイコン テンプレート
marker
marker-thick
marker-circle
marker-flat
marker-square
marker-square-cluster
marker-arrow
marker-ball-pin
marker-square-rounded
marker-square-rounded-cluster
フラグ
flag-triangle
triangle
triangle-thick
triangle-arrow-up
triangle-arrow-left
hexagon
hexagon-thick
hexagon-rounded
hexagon-rounded-thick
pin
pin-round
rounded-square
rounded-square-thick
arrow-up
arrow-up-thin
car
多角形塗りつぶしパターン テンプレート
checker
checker-rotated
circles
circles-spaced
diagonal-lines-up
diagonal-lines-down
diagonal-stripes-up
diagonal-stripes-down
grid-lines
rotated-grid-lines
rotated-grid-stripes
x-fill
zig-zag
zig-zag-vertical
dots
事前に読み込まれるイメージ アイコン
マップによって、marker、pin、pin-round テンプレートを使用し、マップ イメージ スプライトに一連のアイコンが事前読み込みされます。 これらのアイコンの名前とその色の値を次の表に示します。
| アイコン名 | color | secondaryColor |
|---|---|---|
marker-black |
#231f20 |
#ffffff |
marker-blue |
#1a73aa |
#ffffff |
marker-darkblue |
#003963 |
#ffffff |
marker-red |
#ef4c4c |
#ffffff |
marker-yellow |
#f2c851 |
#ffffff |
pin-blue |
#2072b8 |
#ffffff |
pin-darkblue |
#003963 |
#ffffff |
pin-red |
#ef4c4c |
#ffffff |
pin-round-blue |
#2072b8 |
#ffffff |
pin-round-darkblue |
#003963 |
#ffffff |
pin-round-red |
#ef4c4c |
#ffffff |
すぐに試せるツール
次のツールを使用すると、さまざまな方法でさまざまな組み込みの画像テンプレートをレンダリングし、原色、補色、およびスケールをカスタマイズできます。
次のステップ
この記事で使われているクラスとメソッドの詳細については、次を参照してください。
画像テンプレートを使用できるコード サンプルの詳細については、次の記事を参照してください。