Rendszerképsablonok használata

Cikk
08/30/2024

A képek HTML-jelölőkkel és az Azure Maps webes SDK különböző rétegeivel használhatók:

A szimbólumrétegek képikonnal jeleníthetik meg a térkép pontjait. A szimbólumok a vonalak útvonala mentén is megjeleníthetők.
A sokszögrétegek kitöltési minta képpel jeleníthetők meg.
A HTML-jelölők képek és más HTML-elemek használatával renderelhetik a pontokat.

A rétegek jó teljesítményének biztosítása érdekében a renderelés előtt töltse be a képeket a térképkép-sprite erőforrásba. Az IconOptions, a SymbolLayer, előre betölt néhány jelölő képek egy maroknyi színt a térkép kép sprite, alapértelmezés szerint. Ezek a jelölőképek és egyebek SVG-sablonokként érhetők el. Ezek használhatók egyéni méretezésű képek létrehozására, vagy ügyfél elsődleges és másodlagos színként való használatára. Összesen 42 képsablon érhető el: 27 szimbólumikon és 15 sokszög kitöltési minta.

A képsablonok a függvény használatával map.imageSprite.createFromTemplate hozzáadhatók a térképkép-sprite-erőforrásokhoz. Ez a függvény legfeljebb öt paraméter átadását teszi lehetővé;

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

Ez id egy egyedi azonosító, amelyet ön hoz létre. A id rendszer a rendszerképhez rendeli, amikor hozzáadja a térképkép sprite-hez. Ezzel az azonosítóval adhatja meg a rétegekben, hogy melyik képerőforrást szeretné megjeleníteni. Ez templateName adja meg a használni kívánt képsablont. A color beállítás beállítja a kép elsődleges színét, a secondaryColor beállítások pedig a kép másodlagos színét. A scale beállítás skálázza a képsablont, mielőtt alkalmazná a kép sprite-ére. Amikor a rendszerképet alkalmazza a kép sprite-re, PNG-vé alakul át. Az éles renderelés biztosítása érdekében jobb, ha felskálázza a képsablont, mielőtt hozzáadná a sprite-hez, mint egy rétegben.

Ez a függvény aszinkron módon betölti a képet a kép sprite-be. Így visszaad egy ígéretet, amely szerint megvárhatja a függvény befejezését.

Az alábbi kód bemutatja, hogyan hozhat létre egy képet az egyik beépített sablonból, majd használhatja egy szimbólumréteggel.

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

Képsablon használata szimbólumréteggel

Miután betöltött egy képsablont a térképkép-sprite-be, szimbólumként jeleníthető meg egy szimbólumrétegben, ha a kép erőforrás-azonosítójára hivatkozik a image iconOptionsbeállításban.

A beépített ikonsablonmintával rendelkező Szimbólum réteg bemutatja, hogyan teheti ezt meg úgy, hogy egy szimbólumréteget jelenít meg a marker-flat képsablonnal egy tinó elsődleges színével és egy fehér másodlagos színnel, ahogyan az alábbi képernyőképen látható.

A minta forráskódját a Beépített ikonsablon mintakóddal rendelkező Szimbólum réteg című témakörben talál.

Képsablon használata vonalak mentén

Miután betöltött egy képsablont a térképkép-sprite-be, a vonal útvonala mentén jeleníthető meg úgy, hogy hozzáad egy LineString-et egy adatforráshoz, és egy szimbólumréteget használ egy lineSpacingbeállítással, és hivatkozik a képerőforrás azonosítójára a image th iconOptionslehetőségben.

A beépített ikonsablont tartalmazó Vonal réteg bemutatja, hogyan teheti ezt meg. Az alábbi képernyőképen látható módon egy piros vonal jelenik meg a térképen, és egy szimbólumréteget használ a car képsablon használatával, amely egy dodger kék elsődleges színt és egy fehér másodlagos színt tartalmaz. A minta forráskódját a Beépített ikonsablon mintakóddal rendelkező Vonalréteg című témakörben talál.

Tipp.

Ha a képsablon felfelé mutat, állítsa a rotation szimbólumréteg ikonbeállítását 90-es értékre, ha azt szeretné, hogy a vonallal megegyező irányba mutasson.

Képsablon használata sokszögréteggel

Miután betöltött egy képsablont a térképkép-sprite-be, kitöltőmintaként jeleníthető meg egy sokszögrétegben, ha a réteg beállításában a fillPattern kép erőforrás-azonosítójára hivatkozik.

A sokszög kitöltése beépített ikonsablonmintával bemutatja, hogyan jeleníthet meg sokszögréteget a dot képsablon használatával piros elsődleges színnel és áttetsző másodlagos színnel, ahogyan az alábbi képernyőképen látható. A minta forráskódját a sokszög kitöltése beépített ikonsablon-mintakóddal című témakörben talál.

Tipp.

A kitöltési minták másodlagos színének beállításával könnyebben látható, hogy a mögöttes térkép továbbra is biztosítja az elsődleges mintát.

Képsablon használata HTML-jelölővel

A képsablonok a altas.getImageTemplate függvény használatával kérhetők le, és HTML-jelölő tartalmaként használhatók. A sablon átadható a htmlContent jelölő beállításának, majd testre szabható a , secondaryColorés text a colorbeállítások használatával.

A beépített ikonsablonmintával rendelkező HTML-jelölő ezt marker-arrow piros elsődleges színnel, rózsaszín másodlagos színnel és "00" szöveges értékkel szemlélteti, ahogyan az alábbi képernyőképen látható. A minta forráskódját a beépített ikonsablon mintakódját tartalmazó HTML-jelölőben talál.

Tipp.

A képsablonok a térképen kívül is használhatók. A getImageTemplate funciton egy helyőrzőkkel rendelkező SVG-sztringet ad vissza; {color}, {secondaryColor}, {scale}. {text} Cserélje le ezeket a helyőrző értékeket érvényes SVG-sztring létrehozásához. Ezután hozzáadhatja az SVG-sztringet közvetlenül a HTML DOM-hoz, vagy átalakíthatja adat URI-vá, és beszúrhatja egy képcímkébe. Példa:

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

Egyéni újrafelhasználható sablonok létrehozása

Ha az alkalmazás ugyanazt az ikont használja a különböző modulokon belül, vagy ha olyan modult hoz létre, amely további képsablonokat ad hozzá, egyszerűen hozzáadhatja és lekérheti ezeket az ikonokat az Azure Maps webes SDK-ból. Használja a következő statikus függvényeket a atlas névtérben.

Név	Visszatérési típus	Leírás
`addImageTemplate(templateName: string, template: string, override: boolean)`		Egyéni SVG-képsablont ad hozzá az atlasz névteréhez.
`getImageTemplate(templateName: string, scale?: number)`	húr	SvG-sablon lekérése név alapján.
`getAllImageTemplateNames()`	sztring[]	SvG-sablon lekérése név alapján.

Az SVG-képsablonok a következő helyőrző értékeket támogatják:

Helyőrző	Leírás
`{color}`	Az elsődleges szín.
`{secondaryColor}`	A másodlagos szín.
`{scale}`	Az SVG-rendszerkép png képpé alakul a térképkép sprite-hez való hozzáadásakor. Ezzel a helyőrzővel skálázhat egy sablont, mielőtt átalakítanák, hogy egyértelműen megjelenjen.
`{text}`	A szöveg html-jelölővel való használata esetén megjelenítendő hely.

Az Egyéni ikonsablon hozzáadása az atlasz névtérmintájához bemutatja, hogyan készíthet SVG-sablont, és hogyan adhat hozzá az Azure Maps webes SDK-hoz újrafelhasználható ikonsablonként, ahogyan az alábbi képernyőképen látható. A minta forráskódját az Egyéni ikonsablon hozzáadása az Atlas névtérmintához című témakörben találhatja meg.

Képsablonok listája

Ez a táblázat az Azure Maps webes SDK-ban jelenleg elérhető összes képsablont felsorolja. A sablon neve minden kép felett szerepel. Alapértelmezés szerint az elsődleges szín kék, a másodlagos szín pedig fehér. A másodlagos szín fehér háttéren való megjelenítésének megkönnyítése érdekében az alábbi képeken a másodlagos szín fekete színre van állítva.

Szimbólum ikonsablonok

könyvjelző

jelölő vastag

jelölőkarika

jelölő lapos

jelölő ikon

jelölő vastag ikonja

jelölőkarika ikon

jelölő-lapos ikon

jelölő négyzet

jelölő négyzetfürt

jelölő-nyíl

jelölőlabda-kitűző

jelölő négyzet ikon

marker-square-cluster icon

marker-ball-pin icon

jelölő négyzetesen lekerekített

marker-square-rounded-cluster

flag

jelölőháromszög

jelölő négyzetesen lekerekített ikon

marker-square-rounded-cluster icon

háromszög

háromszög vastag

háromszög-nyíl felfelé

háromszög-nyíl-balra

háromszög ikon

háromszög-vastag ikon

hatszög

hexagon vastag

hatszögletű

hatszögletű lekerekített vastag

hatszög ikon

hexagon vastag ikon

hatszögletű lekerekített ikon

hatszögletű lekerekített vastag ikon

gombostű

pin-round

kerekített négyzet

lekerekített négyzetes vastag

rögzítés ikon

gombostűs ikon

lekerekített négyzet ikon

lekerekített négyzetes vastag ikon

nyíl felfelé

felfelé mutató nyíl

autó

autó ikon

Sokszög kitöltési mintasablonok

Ellenőrző

ellenőrző elforgatva

Körök

körökre osztva

ellenőrző ikon

ellenőrző elforgatott ikonja

körök ikon

circles-spaced icon

átlós vonallal felfelé

átlós vonalak lefelé

átlós sávok felfelé

átlós sávok lefelé

átlós vonallal felfelé ikon

átlós vonallal lefelé ikon

átlós-csíkos felfelé ikon

átlós-csíkos lefelé ikon

rácsvonalak

elforgatott rácsvonalak

rotált rácscsíkok

x-fill

rácsvonalak ikon

rotált rácsvonalak ikon

rotált rácscsíkok ikon

x-fill ikon

zig-zag

zig-zag-vertical

Pontok

zig-zag ikon

zig-zag-vertical ikon

pont ikon

Előre betöltött képikonok

A térkép előre betölti az ikonok egy készletét a térképek kép sprite-jába a , pinés pin-round a markersablonok használatával. Ezek az ikonnevek és színértékük az alábbi táblázatban láthatók.

ikon neve	szín	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`

Próbálja ki most eszköz

Az alábbi eszközzel különböző módokon jelenítheti meg a különböző beépített képsablonokat, és testre szabhatja az elsődleges és a másodlagos színeket és a méretezést.