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

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

• Vrstvy symbolů můžou vykreslovat body na mapě obrázkovou ikonou. Symboly lze také vykreslit podél trasy linií.
• 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 byl zajištěn dobrý výkon s vrstvami, je třeba načíst obrázky do mapového sprite zdroje před vykreslením. IconOptions ve vrstvě SymbolLayer zpravidla předem načte několik obrázků značek v různých barvách do spritu mapového obrázku. Tyto obrázky značek a další jsou k dispozici jako šablony SVG. Mohou být použity k vytváření obrázků s vlastními měřítky nebo jako primární a sekundární barvy pro zákazníka. K dispozici je celkem 42 šablon obrázků: 27 symbolových ikon a 15 výplňových vzorů mnohoúhelníků.

Š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ý obrazový zdroj 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 škáluje šablonu obrázku před jejím použitím na obrázkový sprite. Když se obrázek použije na sprit obrázku, převede se na PNG. Pokud chcete zajistit ostré vykreslování, je lepší zvětšit velikost šablony obrázku před přidáním do spritu, než ji zvětšovat 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 lze ji vykreslit jako symbol ve vrstvě symbolů odkazováním na ID zdroje obrázku v image možnosti iconOptions.

Vrstva Symbol s předdefinovanou šablonou ikon ukazuje, jak toho dosáhnout vykreslením vrstvy symbolů pomocí marker-flat šablony obrázku s modrozelenou 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 ukázkovým kódem pro šablonu vestavěné ikony.

Použijte šablonu obrázku podél linie

Jakmile se šablona obrázku načte do spritu obrázku mapy, může být vykreslena podél linie přidáním LineStringu do zdroje dat, použitím vrstvy symbolů s možností lineSpacing a odkazováním na ID prostředku obrázku v možnosti imageiconOptions.

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

Tip

Pokud šablona obrázku směřuje nahoru, nastavte možnost ikony symbolové vrstvy na rotation na 90, pokud chcete, aby směřovala ve stejném směru jako čára.

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

Po načtení obrazové šablony do obrazového sprite mapy je možné ji zobrazit jako výplňový vzor v polygonové vrstvě pomocí ID obrazového zdroje v možnosti fillPattern vrstvy.

Ukázka Vyplnění mnohoúhelníku s vestavěnou šablonou ikony demonstruje, jak vykreslit vrstvu mnohoúhelníku pomocí šablony obrázku dot 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 části Ukázkový kód vyplnění mnohoúhelníku vestavěnou ikonou.

Tip

Nastavení sekundární barvy vzorů výplně usnadňuje zobrazení podkladové mapy při zachování primárního vzoru.

Použijte šablonu obrázku se značkou HTML

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

Ukázka značky HTML s předdefinovanou šablonou ikony demonstruje 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 části Ukázkový kód značky HTML s vestavěnou šablonou 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 ze sady Azure Maps Web SDK. Použijte následující statické funkce v oboru názvů atlas.

Název	Návratový typ	Popis
addImageTemplate(templateName: string, template: string, override: boolean)		Přidá vlastní šablonu obrázku SVG do jmenného prostoru atlas.
getImageTemplate(templateName: string, scale?: number)	řetězec	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í 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 ukázkovém kódu pro přidání vlastní šablony ikon do 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

kruh značky

plochý marker

značka-čtverec

značka-čtverec-klastr

značka-šipka

značkovač-míč-špendlík

zaokrouhlená značka-čtverec

značka-čtverec-zaoblený-seskupení

vlajka

trojúhelníková vlajka

trojúhelník

trojúhelníkový

trojúhelníková šipka nahoru

trojúhelník -šipka doleva

šestiúhelník

silný šestiúhelník

šestiúhelník zaokrouhlený

šestnáctkový zaoblený

špendlík

kolík zaokrouhlený

zaoblený čtverec

zaoblený-čtvercový-tlustý

šipka nahoru

šipka nahoru - tenká

auto

 

 

Šablony výplňových vzorů mnohoúhelníků

kontrolor

checker-rotated

kruhy

kruhy s mezerami

diagonální čáry směřující nahoru

šikmé čáry dolů

diagonální pruhy nahoru

diagonální pruhy směrem dolů

čáry mřížky

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

otočené pruhy mřížky

x-fill

cikcak

cik-cak vertikální

tečky

 

 

Předinstalované ikony obrázků

Mapa předem načte sadu ikon do obrazového spritu mapy pomocí šablon marker, pin a pin-round. Tyto názvy ikon a jejich hodnoty barev jsou uvedeny v následující tabulce.

název ikony	barva	vedlejší barva
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 nástroj 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.

Další kroky

Další informace o třídách a metodách používaných v tomto článku:

ImageSpriteManager

atlas – obor názvů

Další ukázky kódu, ve kterých je možné použít šablony obrázků, najdete v následujících článcích:

Přidání vrstvy symbolů

Přidejte vrstvu čáry

Přidání polygonové vrstvy

Přidání tvůrců HTML