Så här använder du avbildningsmallar

2025-04-11

Bilder kan användas med HTML-markörer och olika lager i Azure Maps Web SDK:

Symbolskikt kan återge punkter på kartan med en bildikon. Symboler kan också återges längs en linjebana.
Polygonskikt kan återges med en fyllningsmönsterbild.
HTML-markörer kan återge punkter med hjälp av bilder och andra HTML-element.

För att säkerställa bra prestanda med lager läser du in bilderna i mappningsbildens sprite-resurs innan du återger dem. IconOptions från SymbolLayer förinstallerar som standard ett par markörbilder i en handfull färger i kartbildens sprite. Dessa markörbilder och mer är tillgängliga som SVG-mallar. De kan användas för att skapa bilder med anpassade skalor eller användas som kundens primära och sekundära färg. Totalt finns det 42 bildmallar: 27 symbolikoner och 15 polygonfyllningsmönster.

Bildmallar kan läggas till i map image sprite-resurser med hjälp map.imageSprite.createFromTemplate av funktionen . Med den här funktionen kan upp till fem parametrar skickas in.

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

id är en unik identifierare som du skapar. id Tilldelas till avbildningen när den läggs till i mappningsbildens sprite. Använd den här identifieraren i lagren för att ange vilken bildresurs som ska återges. Anger templateName vilken bildmall som ska användas. Alternativet color anger den primära färgen på bilden och secondaryColor alternativen anger bildens sekundära färg. Alternativet scale skalar avbildningsmallen innan den tillämpas på bildspriten. När avbildningen tillämpas på bildspriten konverteras den till en PNG. För att säkerställa skarp återgivning är det bättre att skala upp bildmallen innan du lägger till den i sprite än att skala upp den i ett lager.

Den här funktionen läser asynkront in bilden i bildspriten. Därför returnerar den ett löfte om att du kan vänta tills den här funktionen har slutförts.

Följande kod visar hur du skapar en avbildning från en av de inbyggda mallarna och sedan använder den med ett symbollager.

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

Använda en bildmall med ett symbollager

När en bildmall har lästs in i kartbildens sprite kan den återges som en symbol i ett symbollager genom att referera till bildresurs-ID:t i image alternativet iconOptions.

Exemplet på symbolskiktet med den inbyggda ikonmallen visar hur du gör detta genom att återge ett symbolskikt med hjälp av marker-flat bildmallen med en teal primär färg och en vit sekundär färg, som du ser i följande skärmbild.

Källkoden för det här exemplet finns i Exempelkod för symbolskikt med inbyggd ikonmallexempelkod.

Använd en bildmall längs en linjeväg

När en bildmall har lästs in i kartbildens sprite kan den återges längs en linjes bana genom att lägga till en LineString i en datakälla och använda ett symbolskikt med alternativet lineSpacing samt referera till ID:t för bildresursen i image i alternativet iconOptions.

Linjeskiktet med den inbyggda ikonmallen visar hur du gör detta. Som du ser i följande skärmbild renderar den en röd linje på kartan och använder ett symbollager med hjälp av bildmallen car med en dodgerblå primärfärg och en vit sekundär färg. Källkoden för det här exemplet finns i Exempelkod för linjeskikt med inbyggd ikonmall.

Tips

Om bildmallen pekar uppåt anger rotation du ikonalternativet för symbolskiktet till 90 om du vill att det ska peka i samma riktning som linjen.

Använda en bildmall med ett polygonlager

När en bildmall har lästs in i kartbildens sprite kan den återges som ett fyllningsmönster i ett polygonlager genom att referera till bildresurs-ID:t i fillPattern alternativet för lagret.

Exemplet fyll polygon med inbyggd ikonmall visar hur du återger ett polygonskikt med hjälp av dot bildmallen med en röd primär färg och en transparent sekundär färg, som du ser i följande skärmbild. Källkoden för det här exemplet finns i Fyll polygon med inbyggd ikonmallsexempelkod.

Tips

Genom att sätta den sekundära färgen för fyllningsmönster blir det enklare att se den underliggande kartan samtidigt som det primära mönstret bevaras.

Använda en bildmall med en HTML-markör

En bildmall kan hämtas med hjälp av atlas.getImageTemplate funktionen och användas som innehåll i en HTML-markör. Mallen kan skickas till htmlContent alternativet för markören och sedan anpassas med alternativen color, secondaryColoroch text .

HTML-markören med det inbyggda ikonmallexemplet visar detta med hjälp av mallen marker-arrow med en röd primär färg, en rosa sekundär färg och ett textvärde på "00", som du ser i följande skärmbild. Källkoden för det här exemplet finns i HTML-markör med inbyggd ikonmallsexempelkod.

Tips

Bildmallar kan också användas utanför kartan. funktionen getImageTemplate returnerar en SVG-sträng som har platshållare. {color}, {secondaryColor}, {scale}, . {text} Ersätt dessa platshållarvärden för att skapa en giltig SVG-sträng. Du kan sedan antingen lägga till SVG-strängen direkt i HTML DOM eller konvertera den till en data-URI och infoga den i en bildtagg. Till exempel:

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

Skapa anpassade återanvändbara mallar

Om programmet använder samma ikon i olika moduler eller om du skapar en modul som lägger till fler bildmallar kan du enkelt lägga till och hämta dessa ikoner från Azure Maps Web SDK. Använd följande statiska funktioner i atlas namnområdet.

Name	Returtyp	beskrivning
`addImageTemplate(templateName: string, template: string, override: boolean)`		Lägger till en anpassad SVG-avbildningsmall i atlasnamnområdet.
`getImageTemplate(templateName: string, scale?: number)`	sträng	Hämtar en SVG-mall efter namn.
`getAllImageTemplateNames()`	string[]	Hämtar en SVG-mall efter namn.

SVG-avbildningsmallar stöder följande platshållarvärden:

Platshållare	beskrivning
`{color}`	Den primära färgen.
`{secondaryColor}`	Den sekundära färgen.
`{scale}`	SVG-avbildningen konverteras till en png-bild när den läggs till i kartbildens sprite. Den här platshållaren kan användas för att skala en mall innan den konverteras för att säkerställa att den återges tydligt.
`{text}`	Platsen där text återges när den används med en HTML-markör.

Exemplet Lägg till anpassad ikon i atlasnamnområdet visar hur du tar en SVG-mall och lägger till den i Azure Maps Web SDK som en mall för återanvändbara ikoner, som du ser i följande skärmbild. Källkoden för det här exemplet finns i Lägg till mall för anpassad ikon i atlasnamnområdets exempelkod.

Lista över bildmallar

Den här tabellen visar alla bildmallar som för närvarande är tillgängliga i Azure Maps Web SDK. Mallnamnet är ovanför varje bild. Som standard är den primära färgen blå och den sekundära färgen är vit. För att göra den sekundära färgen lättare att se på en vit bakgrund har följande bilder den sekundära färgen inställd på svart.

Symbolikonmallar

markör

tjock markör

markörcirkel

platt markör

markörikon

tycktuschnikonen

ikon för markörcirkel

markör-platt ikon

markör-kvadrat

markörfyrkantkluster

markörpil

markör-boll-nål

markörkvadrat-ikon

ikon för marker-square-cluster

ikon för marker-ball-pin

markör-kvadrat-rundad

marker-square-rounded-cluster

flag

flagga-triangel

markör-kvadrat-rundad ikon

ikon för marker-square-rounded-cluster

triangel

triangelns tjocklek

uppåtpekande triangelpil

triangel-pil-vänster

triangelikon

tjock triangelikon

sexhörning

hexagon-thick

sexhörningsrundad

sexhörningsrundad tjock

hexagonikon

hexagon-tjockt symbol

hexagon-rundad ikon

hexagon-rundad tjock ikon

knappnål

pinrunda

rundad kvadrat

rundad-kvadrat-tjock

pin-ikon

knappnålsikon

rundad fyrkantsikon

avrundad kvadrat-tjock ikon

pil upp

pil-upp-tunn

bil

bil ikon

Mallar för polygonfyllningsmönster

kontrollant

schackmönstrad och roterad

cirklar

cirklar jämnt fördelade

checker-ikon

checker-roterad ikon

cirkelikon

ikoner med cirklar

diagonala linjer upp

diagonala linjer nedåt

diagonala ränder uppåt

diagonala ränder ner

diagonal-lines-up ikon

diagonal-lines-down-ikon

ikon för diagonala ränder upp

ikon med diagonala ränder nedåt

rutnätslinjer

roterade rutnätslinjer

roterade rutnätsränder

x-fill

rutnätslinjeikon

ikon för roterade rutnätslinjer

ikon för roterade rutnätsränder

x-fyllningsikon

zig-zag

zig-zag-vertical

Prickar

zig-zag-ikon

zig-zag-vertikal ikon

prickikon

Förinlästa bildikoner

Kartan förladdar en uppsättning ikoner i kartans bildsprite med hjälp av mallarna marker, pin och pin-round. Dessa ikonnamn och deras färgvärden visas i följande tabell.

ikonnamn	färg	sekundärfärg
`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`