如何使用映像範本

  • 文章

影像可以搭配Azure 地圖服務 Web SDK 內的 HTML 標籤和各種圖層使用：

  • 符號圖層可以使用影像圖示來呈現地圖上的點。 符號也可以沿著線條路徑轉譯。
  • 多邊形圖層可以使用填滿圖樣影像來轉譯。
  • HTML 標籤可以使用影像和其他 HTML 元素來轉譯點。

為了確保圖層有良好的效能，請先將影像載入地圖影像 Sprite 資源，再轉譯。 SymbolLayer 的 IconOptions預設會在地圖影像 Sprite 中預先載入幾個色彩的標記影像。 這些標記影像和其他影像可作為 SVG 範本使用。 它們可用來建立具有自訂尺規的影像，或做為客戶主要和次要色彩使用。 總共提供 42 個影像範本：27 個符號圖示和 15 個多邊形填滿圖樣。

您可以使用 函式，將影像範本新增至地圖影像 Sprite 資源 map.imageSprite.createFromTemplate 。 此函式最多允許傳入五個參數;

createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>

id是您建立的唯一識別碼。 當 id 影像新增至地圖影像 Sprite 時，會將 指派給影像。 在圖層中使用此識別碼來指定要轉譯的影像資源。 會 templateName 指定要使用哪一個映射範本。 color選項會設定影像的主要色彩，而 secondaryColor 選項會設定影像的次要色彩。 選項 scale 會先調整映射範本，再將它套用至映射 Sprite。 當影像套用至映射 Sprite 時，它會轉換成 PNG。 為了確保清楚呈現，最好先相應增加影像範本，再將其新增至 Sprite，而不是在圖層中相應增加。

此函式會以非同步方式將映射載入映射 Sprite。 因此，它會傳回 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'
		}
	}));
});

搭配符號圖層使用影像範本

一旦影像範本載入地圖影像 Sprite 中，就可以在 的 選項 iconOptions 中參考影像資源識別碼，將它轉譯為符號圖層中的 image 符號。

下列範例會使用 marker-flat 影像範本搭配藍綠色主要色彩和白色次要色彩來轉譯符號圖層。


沿著線條路徑使用映射範本

將影像範本載入地圖影像 Sprite 之後，即可藉由將 LineString 新增至資料來源並使用符號圖層 lineSpacing 搭配選項，並在 的 選項 iconOptions 中 image 參考影像資源的識別碼，沿著線條的路徑轉譯。

下列範例會在地圖上轉譯粉紅線條，並使用影像範本搭配藍色主要色彩和白色次要色彩的符號圖層 car 。


提示

如果影像範本指向，如果您想要將符號圖層的圖示選項指向與線條相同的方向，請將符號圖層的圖示選項設定 rotation 為 90。

搭配多邊形圖層使用影像範本

一旦影像範本載入地圖影像 Sprite 中，就可以藉由參考圖層選項中的影像資源識別碼，將它轉譯為多邊形圖層中的 fillPattern 填滿圖樣。

下列範例會使用 dot 影像範本搭配紅色主要色彩和透明次要色彩來轉譯多邊形圖層。


提示

設定填滿圖樣的次要色彩，可讓您更輕鬆地看到基礎圖仍會提供主要模式。

搭配 HTML 標籤使用影像範本

您可以使用 函式擷 altas.getImageTemplate 取影像範本，並做為 HTML 標籤的內容。 範本可以傳遞至 htmlContent 標記的選項，然後使用 、 secondaryColor 和 text 選項自訂 color 。

下列範例會 marker-arrow 使用具有紅色主要色彩、粉紅色次要色彩和文字值為 「00」 的範本。


提示

影像範本也可以用於地圖外部。 getImageTemplate funciton 會傳回具有預留位置的 SVG 字串; {color}, {secondaryColor}, {scale}, {text}. 取代這些預留位置值，以建立有效的 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 地圖服務 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 影像會在新增至地圖影像 Sprite 時轉換成 png 影像。 此預留位置可用來在轉換範本之前調整範本，以確保其能清楚呈現。
{text} 與 HTML 標籤搭配使用時要轉譯文字的位置。

下列範例示範如何取得 SVG 範本，並將其新增至 Azure 地圖服務 Web SDK 作為可重複使用的圖示範本。


映射範本清單

下表列出Azure 地圖服務 Web SDK 中目前可用的所有映射範本。 範本名稱在每個映射上方。 根據預設，主要色彩為藍色，而次要色彩為白色。 為了讓次要色彩更容易在白色背景上看到，下列影像會將次要色彩設定為黑色。

符號圖示範本

marker

marker-thick

marker-circle

marker-flat

marker icon

marker-thick icon

marker-circle icon

marker-flat icon


marker-square

marker-square-cluster

marker-arrow

marker-ball-pin

marker-square icon

marker-square-cluster icon

marker-arrow icon

marker-ball-pin icon


marker-square-rounded

marker-square-rounded-cluster

flag

flag-triangle

marker-square-rounded icon

marker-square-rounded-cluster icon

flag icon

flag-triangle icon


三角形

三角形-粗

三角形箭號向上

三角形箭頭向左

triangle icon

triangle-thick icon

triangle-arrow-up icon

triangle-arrow-left icon


六 角

十六邊形-粗

十六邊形圓角

hexagon-rounded-thick

hexagon icon

hexagon-thick icon

hexagon-rounded icon

hexagon-rounded-thick icon


釘選

針腳圓角

rounded-square

rounded-square-粗

pin icon

pin-round icon

rounded-square icon

rounded-square-thick icon


箭頭向上

arrow-up-thin

car

 

arrow-up icon

arrow-up-thin icon

car icon

 

多邊形填滿模式範本

檢查

checker-rotated

圓形

圓圈間距

checker icon

checker-rotated icon

circles icon

circles-spaced icon


對角線向上

對角線-行向下

對角線-stripes-up

對角線-stripes-down

diagonal-lines-up icon

diagonal-lines-down icon

diagonal-stripes-up icon

diagonal-stripes-down icon


格線

rotated-grid-line

rotated-grid-stripes

x-fill

grid-lines icon

rotated-grid-lines icon

rotated-grid-stripes icon

x-fill icon


zig-zag

zig-zag-vertical

點

 

zig-zag icon

zig-zag-vertical icon

dots icon

 


預先載入的影像圖示

地圖會使用 marker 、 pin 和 pin-round 範本，預先將一組圖示預先載入地圖影像 Sprite 中。 下表列出這些圖示名稱及其色彩值。

圖示名稱 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

立即試用工具

使用下列工具，您可以透過各種方式轉譯不同的內建影像範本，並自訂主要和次要色彩和縮放比例。


後續步驟

深入了解本文使用的類別和方法：

ImageSpriteManager

atlas 命名空間

如需可使用映射範本的更多程式碼範例，請參閱下列文章：

新增符號圖層

新增線條圖層

新增多邊形圖層

新增 HTML 標記