Používání šablon obrázků

Článek
08/30/2024

Obrázky je možné použít se značkami HTML a různými vrstvami ve webové sadě SDK služby Azure Maps:

Vrstvy symbolů můžou vykreslovat body na mapě ikonou obrázku. Symboly lze také vykreslit podél cesty čar.
Mnohoúhelníkové vrstvy lze vykreslit pomocí obrázku vzorku výplně.
Značky HTML mohou vykreslovat body pomocí obrázků a dalších prvků HTML.

Aby se zajistil dobrý výkon s vrstvami, načtěte obrázky do prostředku sprite obrázku mapy před vykreslením. IconOptions v symbolu SymbolLayer předem načte několik obrázků značek v několika barvách do spritu obrázku mapy ve výchozím nastavení. Tyto obrázky značek a další jsou k dispozici jako šablony SVG. Dají se použít k vytváření obrázků s vlastními měřítky nebo jako primární a sekundární barva zákazníka. K dispozici jsou celkem 42 šablon obrázků: 27 ikon symbolů a 15 vzorů mnohoúhelníku výplně.

Šablony obrázků je možné přidat do prostředků sprite obrázku mapy pomocí map.imageSprite.createFromTemplate funkce. Tato funkce umožňuje předání až pěti parametrů;

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

Jedná se id o jedinečný identifikátor, který vytvoříte. Obrázek id se přiřadí, když se přidá do spritu obrázku mapy. Pomocí tohoto identifikátoru ve vrstvách určete, který prostředek obrázku se má vykreslit. Určuje templateName , která šablona obrázku se má použít. Tato color možnost nastaví primární barvu obrázku a secondaryColor možnosti nastaví sekundární barvu obrázku. Možnost scale před použitím šablony obrázku na sprit obrázku škáluje. Když se obrázek použije na sprit obrázku, převede se na PNG. Pokud chcete zajistit ostré vykreslování, je lepší vertikálně navýšit kapacitu šablony obrázku před přidáním do spritu, než vertikálně navýšit její kapacitu ve vrstvě.

Tato funkce asynchronně načte obrázek do spritu obrázku. Proto vrátí příslib, který můžete počkat na dokončení této funkce.

Následující kód ukazuje, jak vytvořit obrázek z jedné z předdefinovaných šablon a pak ho použít s vrstvou symbolů.

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'
      }
   }));
});

Použití šablony obrázku s vrstvou symbolů

Po načtení šablony obrázku do spritu obrázku mapy ji můžete vykreslit jako symbol ve vrstvě symbolu odkazováním na ID prostředku obrázku v image možnosti iconOptions.

Vrstva Symbol s předdefinované šablony ikon ukazuje, jak to udělat vykreslením vrstvy symbolů pomocí marker-flat šablony obrázku s teální primární barvou a bílou sekundární barvou, jak je znázorněno na následujícím snímku obrazovky.

Zdrojový kód pro tuto ukázku najdete v části Vrstva symbolů s předdefinovaný vzorový kód šablony ikony.

Použití šablony obrázku podél cesty čar

Jakmile se šablona obrázku načte do spritu obrázku mapy, dá se vykreslit podél cesty řádku přidáním linestringu do zdroje dat a použitím vrstvy symbolů s lineSpacingmožností a odkazováním na ID prostředku obrázku iconOptionsv image možnosti .

Vrstva čáry s předdefinované šablony ikony ukazuje, jak to udělat. Jak je znázorněno na následujícím snímku obrazovky, vykreslí červenou čáru na mapě a použije vrstvu symbolů pomocí car šablony obrázku s modrou primární barvou dodgeru a bílou sekundární barvou. Zdrojový kód pro tuto ukázku najdete v tématu Vrstva řádku s předdefinovaný vzorový kód šablony ikony.

Tip

Pokud šablona obrázku odkazuje, nastavte rotation možnost ikony vrstvy symbolů na 90, pokud chcete, aby odkazovat ve stejném směru jako čára.

Použití šablony obrázku s mnohoúhelníkovou vrstvou

Po načtení šablony obrázku do spritu obrázku mapy je možné ji vykreslit jako vzor výplně v polygonové vrstvě odkazováním na ID prostředku obrázku v fillPattern možnosti vrstvy.

Mnohoúhelník Výplň s předdefinované šablony ikony ukazuje, jak pomocí šablony obrázku dot vykreslit mnohoúhelník s červenou primární barvou a průhlednou sekundární barvou, jak je znázorněno na následujícím snímku obrazovky. Zdrojový kód pro tuto ukázku naleznete v tématu Vyplnění mnohoúhelníku pomocí předdefinované ikony vzorového kódu šablony.

Tip

Nastavení sekundární barvy vzorů výplně usnadňuje zobrazení podkladové mapy i nadále primárním vzorem.

Použití šablony obrázku se značkou HTML

Šablonu obrázku atlas.getImageTemplate lze načíst pomocí funkce a použít ji jako obsah značky HTML. Šablonu lze předat do htmlContent možnosti značky a pak ji přizpůsobit pomocí , colorsecondaryColora text možnosti.

Značka HTML s předdefinované šablony ikony ukazuje použití marker-arrow šablony s červenou primární barvou, růžovou sekundární barvou a textovou hodnotou 00, jak je znázorněno na následujícím snímku obrazovky. Zdrojový kód pro tuto ukázku najdete v tématu Značka HTML s předdefinovaný vzorový kód šablony ikony.

Tip

Šablony obrázků se dají použít i mimo mapu. Funkce getImageTemplate vrátí řetězec SVG, který má zástupné symboly; {color}, {secondaryColor}, {scale}. {text} Nahraďte tyto zástupné hodnoty a vytvořte platný řetězec SVG. Pak můžete buď přidat řetězec SVG přímo do HTML DOM, nebo ho převést na identifikátor URI dat a vložit ho do značky obrázku. Příklad:

//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);

Vytváření vlastních opakovaně použitelných šablon

Pokud vaše aplikace používá stejnou ikonu v různých modulech nebo pokud vytváříte modul, který přidává další šablony obrázků, můžete tyto ikony snadno přidat a načíst z webové sady SDK služby Azure Maps. V oboru názvů použijte následující statické funkce atlas .

Název	Návratový typ	Popis
`addImageTemplate(templateName: string, template: string, override: boolean)`		Přidá vlastní šablonu obrázku SVG do oboru názvů atlas.
`getImageTemplate(templateName: string, scale?: number)`	string	Načte šablonu SVG podle názvu.
`getAllImageTemplateNames()`	string[]	Načte šablonu SVG podle názvu.

Šablony obrázků SVG podporují následující zástupné hodnoty:

Zástupný symbol	Popis
`{color}`	Primární barva.
`{secondaryColor}`	Sekundární barva.
`{scale}`	Obrázek SVG se při přidání do spritu obrázku mapy převede na obrázek png. Tento zástupný symbol lze použít ke škálování šablony před převodem, aby se zajistilo, že se jasně vykresluje.
`{text}`	Umístění pro vykreslení textu při použití se značkou HTML.

Ukázka přidání vlastní šablony ikony do oboru názvů atlas ukazuje, jak vytvořit šablonu SVG, a přidat ji do webové sady SDK služby Azure Maps jako opakovaně použitelnou šablonu ikony, jak je znázorněno na následujícím snímku obrazovky. Zdrojový kód pro tuto ukázku najdete v tématu Přidání vlastní šablony ikon do ukázkového kódu oboru názvů atlas.

Seznam šablon obrázků

Tato tabulka obsahuje seznam všech šablon obrázků, které jsou aktuálně k dispozici ve webové sadě SDK služby Azure Maps. Název šablony je nad každým obrázkem. Ve výchozím nastavení je primární barva modrá a sekundární barva je bílá. Aby se sekundární barva snadněji zobrazovala na bílém pozadí, mají následující obrázky sekundární barvu nastavenou na černou.

Šablony ikon symbolů

značkovač

silná značka

marker-circle

marker-flat

Ikona značky

Ikona silné značky

Ikona značkového kruhu

Ikona s plochou značkou

marker-square

marker-square-cluster

marker-arrow

marker-ball-pin

ikona marker-square

Marker-square-cluster icon

ikona značkového připínáčku

zaokrouhlená značka-čtverec

marker-square-rounded-cluster

flag

trojúhelník příznaku

Ikona se zaobleným čtvercem značky

Marker-square-rounded-cluster icon

trojúhelník

trojúhelníkový

trojúhelníková šipka nahoru

trojúhelník -šipka doleva

ikona trojúhelníku

Ikona s trojúhelníkem

šestiúhelník

hexagon-thick

šestiúhelník zaokrouhlený

šestnáctkový zaoblený

Ikona šestiúhelníku

Šestiúhelník - silná ikona

Šestiúhelník - zaokrouhlená ikona

Šestiúhelník - zaoblená ikona

špendlík

kolík zaokrouhlený

zaoblený čtverec

zaoblený-čtvercový-tlustý

Ikona připnutí

ikona připínáčku

Ikona zaobleného čtverce

Ikona zaoblená-čtvercová

šipka nahoru

šipka nahoru - tenká

car

ikona auta

Šablony vzorů mnohoúhelníku

kontrolor

checker-rotated

kruhy

kruhy s mezerami

ikona kontroly

Ikona checker-rotated

ikona kruhů

Ikona s mezerami v kruhech

diagonální čáry nahoru

šikmé čáry dolů

diagonální pruhy nahoru

diagonální pruhy dolů

Ikona diagonální čáry nahoru

Ikona diagonálně-čáry dolů

Diagonální pruhy – ikona nahoru

Diagonální pruhy – ikona dolů

mřížka

otočené čáry mřížky

otočené pruhy mřížky

x-fill

Ikona mřížky

Ikona otočené mřížky

X-fill icon

zig-zag

zig-zag-vertical

tečky

Ikona zig-zag

Ikona zig-zag-vertical

ikona tečky

Předinstalované ikony obrázků

Mapa předem načte sadu ikon do spritu obrázku mapy pomocí markerobjektů , pina pin-round šablon. Tyto názvy ikon a jejich hodnoty barev jsou uvedeny v následující tabulce.

název ikony	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`

Vyzkoušejte si ho teď

Pomocí následujícího nástroje můžete různé předdefinované šablony obrázků vykreslit různými způsoby a přizpůsobit primární a sekundární barvy a měřítko.