Så här använder du avbildningsmallar

Artikel
08/30/2024

Bilder kan användas med HTML-markörer och olika lager i Azure Maps webb-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ända en bildmall längs en linjesökväg

När en bildmall har lästs in i kartbildens sprite kan den återges längs sökvägen till en rad genom att lägga till en LineString i en datakälla och använda ett symbolskikt med ett lineSpacingalternativ och genom att referera till ID:t för bildresursen image i alternativet iconOptionsför .

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.

Dricks

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.

Dricks

Om du anger den sekundära färgen för fyllningsmönster blir det enklare att se den underliggande kartan, vilket fortfarande ger det primära mönstret.

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.

Dricks

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 ikonerna från Azure Maps webb-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 webb-SDK som en återanvändbar ikonmall, 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 webb-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

markör-tjock

markörcirkel

marker-flat

markörikon

markörtjock ikon

ikon för markörcirkel

markör-platt ikon

markör-kvadrat

marker-square-cluster

markörpil

marker-ball-pin

ikon för markör-kvadrat

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

triangeltjock

triangelpil uppåt

triangel-pil-vänster

triangelikon

triangeltjock ikon

sexhörning

hexagon-thick

sexhörningsrundad

sexhörningsrundad tjock

hexagonikon

hexagon-tjock ikon

hexagon-rundad ikon

hexagon-rundad tjock ikon

knappnål

pin-round

rundad kvadrat

rundad-kvadrat-tjock

pin-ikon

knappnålsikon

rundad fyrkantsikon

rundad fyrkantstjock ikon

pil-up

pil-upp-tunn

car

bilikon

Mallar för polygonfyllningsmönster

kontrollant

checker-roterad

cirklar

cirklar med blanksteg

checker-ikon

checker-roterad ikon

cirkelikon

cirkelavståndsikon

diagonal-lines-up

diagonala linjer nedåt

diagonal-stripes-up

diagonal-stripes-down

diagonal-lines-up ikon

diagonal-lines-down-ikon

diagonal-stripes-up-ikon

diagonal-stripes-down-ikon

rutnätslinjer

roterade rutnätslinjer

rotated-grid-stripes

x-fill

rutnätsradsikon

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-vertical ikon

punktikon

Förinlästa bildikoner

Kartan förinstallerar en uppsättning ikoner i mappningsbildens sprite med hjälp av markermallarna , pinoch pin-round . Dessa ikonnamn och deras färgvärden visas i följande tabell.

ikonnamn	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`