Afbeeldingssjablonen gebruiken

2025-04-17

Afbeeldingen kunnen worden gebruikt met HTML-markeringen en verschillende lagen in de Azure Maps Web SDK:

Symboollagen kunnen punten op de kaart weergeven met een afbeeldingspictogram. Symbolen kunnen ook langs een lijnpad worden weergegeven.
Polygoonlagen kunnen worden weergegeven met een opvulpatroonafbeelding.
HTML-markeringen kunnen punten weergeven met behulp van afbeeldingen en andere HTML-elementen.

Om goede prestaties met lagen te garanderen, laadt u de afbeeldingen in de spriteresource van de kaartafbeelding voordat u deze weert. IconOptions, van de SymbolLayer, laadt standaard een aantal markeringsafbeeldingen in een handvol kleuren in de sprite van de kaartafbeelding. Deze markeringsafbeeldingen en meer zijn beschikbaar als SVG-sjablonen. Ze kunnen worden gebruikt voor het maken van afbeeldingen met aangepaste schalen of worden gebruikt als primaire en secundaire kleur van een klant. In totaal zijn er 42 afbeeldingssjablonen beschikbaar: 27 symboolpictogrammen en 15 polygoonvulpatronen.

Afbeeldingssjablonen kunnen worden toegevoegd aan de sprite-resources van de kaartafbeelding met behulp van de map.imageSprite.createFromTemplate functie. Met deze functie kunnen maximaal vijf parameters worden doorgegeven;

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

De id is een unieke identificatie die u maakt. De id wordt toegewezen aan de afbeelding wanneer deze wordt toegevoegd aan de sprite voor kaartafbeeldingen. Gebruik deze id in de lagen om op te geven welke afbeeldingsresource moet worden weergegeven. Hiermee templateName geeft u op welke afbeeldingssjabloon moet worden gebruikt. Met color de optie stelt u de primaire kleur van de afbeelding in en met de secondaryColor opties wordt de secundaire kleur van de afbeelding ingesteld. Met de optie scale wordt de afbeeldingssjabloon geschaald voordat deze wordt toegepast op de sprite-afbeelding. Wanneer de afbeelding wordt toegepast op de afbeeldingssprite, wordt deze geconverteerd naar een PNG-bestand. Het is beter om de afbeeldingssjabloon te vergroten voordat u deze aan de sprite toevoegt, in plaats van deze te vergroten in een laag.

Met deze functie wordt de afbeelding asynchroon in de afbeeldingssprite geladen. Het retourneert dus een Promise waarop u kunt wachten tot deze functie is voltooid.

De volgende code laat zien hoe u een afbeelding maakt op basis van een van de ingebouwde sjablonen en deze vervolgens gebruikt met een symboollaag.

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

Een afbeeldingssjabloon gebruiken met een symboollaag

Zodra een afbeeldingssjabloon in de sprite van de kaartafbeelding is geladen, kan deze worden weergegeven als een symbool in een symboollaag door te verwijzen naar de resource-id van de afbeelding in de image optie van de iconOptionsafbeelding.

De symboollaag met een ingebouwd voorbeeld van een pictogramsjabloon laat zien hoe u dit doet door een symboollaag weer te geven met behulp van de marker-flat afbeeldingssjabloon met een teale primaire kleur en een witte secundaire kleur, zoals wordt weergegeven in de volgende schermopname.

Voor de broncode voor dit voorbeeld, zie Symboollaag met ingebouwde sjablooncode voor pictogrammen.

Een afbeeldingssjabloon op een lijnpad gebruiken

Zodra een afbeeldingssjabloon is geladen in de sprite van de kaartafbeelding, kan deze langs het pad van een lijn worden weergegeven door een LineString toe te voegen aan een gegevensbron en een symboollaag met een lineSpacing-optie te gebruiken en te verwijzen naar de id van de afbeeldingsresource in de image-optie van de iconOptions.

De lijnlaag met ingebouwde pictogramsjabloon laat zien hoe u dit doet. Zoals getoond in de volgende screenshot, wordt er een rode lijn op de kaart weergegeven en wordt een symboollaag gebruikt met de car afbeeldingssjabloon, met een dodgerblauwe primaire kleur en een witte secundaire kleur. Zie Regellaag met ingebouwde voorbeeldcode voor pictogramsjablonen voor de broncode voor dit voorbeeld.

Tip

Als de afbeeldingssjabloon verwijst, stelt u de rotation pictogramoptie van de symboollaag in op 90 als u wilt dat deze in dezelfde richting wijst als de lijn.

Een afbeeldingssjabloon gebruiken met een veelhoeklaag

Zodra een afbeeldingssjabloon in de kaartafbeeldingsspite is geladen, kan deze worden weergegeven als een opvulpatroon in een polygoonlaag door te verwijzen naar de resource-id van de afbeelding in de fillPattern optie van de laag.

In het voorbeeld van de sjabloon voor opvulling met ingebouwde pictogramsjablonen ziet u hoe u een polygoonlaag kunt weergeven met behulp van de dot afbeeldingssjabloon met een rode primaire kleur en een transparante secundaire kleur, zoals wordt weergegeven in de volgende schermopname. Zie Voorbeeldcode voor veelhoek vullen met ingebouwde pictogrammensjabloon voor de broncode van dit voorbeeld.

Tip

Als u de secundaire kleur van opvulpatronen instelt, is het eenvoudiger om de onderliggende kaart nog steeds het primaire patroon te bieden.

Een afbeeldingssjabloon gebruiken met een HTML-markering

Een afbeeldingssjabloon kan worden opgehaald met behulp van de atlas.getImageTemplate functie en wordt gebruikt als de inhoud van een HTML-markering. De sjabloon kan worden doorgegeven aan de optie van de htmlContent markering en vervolgens aangepast met behulp van de color, secondaryColoren text opties.

De HTML-markering met een ingebouwd pictogramsjabloonvoorbeeld laat dit zien met behulp van de marker-arrow sjabloon met een rode primaire kleur, een roze secundaire kleur en een tekstwaarde van '00', zoals wordt weergegeven in de volgende schermopname. Zie de broncode voor het voorbeeld HTML Marker met ingebouwde iconensjabloon.

Tip

Afbeeldingssjablonen kunnen ook buiten de kaart worden gebruikt. De functie getImageTemplate retourneert een SVG-tekenreeks met tijdelijke aanduidingen: {color}, {secondaryColor}, {scale}, {text}. Vervang deze tijdelijke aanduidingen om een geldige SVG-tekenreeks te maken. Vervolgens kunt u de SVG-tekenreeks rechtstreeks toevoegen aan de HTML DOM of deze converteren naar een gegevens-URI en deze invoegen in een afbeeldingstag. Voorbeeld:

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

Aangepaste herbruikbare sjablonen maken

Als uw toepassing hetzelfde pictogram in verschillende modules gebruikt of als u een module maakt waarmee meer afbeeldingssjablonen worden toegevoegd, kunt u deze pictogrammen eenvoudig toevoegen en ophalen uit de Azure Maps Web SDK. Gebruik de volgende statische functies in de atlas naamruimte.

Naam	Retourtype	Beschrijving
`addImageTemplate(templateName: string, template: string, override: boolean)`		Hiermee voegt u een aangepaste SVG-afbeeldingssjabloon toe aan de atlasnaamruimte.
`getImageTemplate(templateName: string, scale?: number)`	tekenreeks	Hiermee haalt u een SVG-sjabloon op naam op.
`getAllImageTemplateNames()`	string[]	Hiermee haalt u een SVG-sjabloon op naam op.

SVG-afbeeldingssjablonen ondersteunen de volgende waarden voor tijdelijke aanduidingen:

Plaatsaanduiding	Beschrijving
`{color}`	De primaire kleur.
`{secondaryColor}`	De secundaire kleur.
`{scale}`	De SVG-afbeelding wordt geconverteerd naar een PNG-afbeelding wanneer deze wordt toegevoegd aan de sprite van de kaartafbeelding. Deze tijdelijke aanduiding kan worden gebruikt om een sjabloon te schalen voordat deze wordt geconverteerd om ervoor te zorgen dat deze duidelijk wordt weergegeven.
`{text}`	De locatie om tekst weer te geven wanneer deze wordt gebruikt met een HTML-markering.

In het voorbeeld "Aangepaste pictogramsjabloon toevoegen aan de atlas naamruimte" wordt gedemonstreerd hoe u een SVG-sjabloon neemt en deze als herbruikbare pictogramsjabloon toevoegt aan het Azure Maps Web SDK, zoals te zien in de onderstaande schermopname. Zie voor de broncode van dit voorbeeld Voeg een aangepaste pictogramsjabloon toe aan de voorbeeldcode van de atlasnaamruimte.

Lijst met afbeeldingssjablonen

Deze tabel bevat alle afbeeldingssjablonen die momenteel beschikbaar zijn in de Azure Maps Web SDK. De sjabloonnaam staat boven elke afbeelding. De primaire kleur is standaard blauw en de secundaire kleur is wit. Om de secundaire kleur gemakkelijker te zien op een witte achtergrond, hebben de volgende afbeeldingen de secundaire kleur ingesteld op zwart.

Symboolpictogramsjablonen

markeerstift

stift-dik

markeercirkel

platte marker

markeerpictogram

dikke marker-pictogram

icoon markeer cirkel

marker-plat pictogram

markeervierkant

markervierkant-cluster

markeringspijl

markeerbalpin

marker vierkant pictogram

marker-square-cluster icoon

marker-ball-pin-icoon

markeer-vierkant-afgerond

markeer-vierkant-afgerond-cluster

vlag

vlag-driehoek

pictogram met vierkante markering

pictogram voor markerings-vierkant-afgerond cluster

driehoek

driehoek-dik

driehoek-pijl-omhoog

driehoek-pijl-links

driehoekpictogram

driehoek-dik pictogram

zeshoek

zeshoek-dik

afgeronde zeshoek

zeshoek-afgerond-dik

zeshoekpictogram

hexagon-dikgedrukt icoon

hexagon-afgerond pictogram

ronde dikke zeshoek icoon

speld

pinronde

vierkant met afgeronde hoeken

afgerond vierkant-dik

speldpictogram

pictogram vastmaken

afgerond vierkantspictogram

afgerond vierkant-dik pictogram

omhoog-pijl

pijl-omhoog-smal

auto

auto-icoon

Sjablonen voor veelhoekige opvulpatronen

controleur

controle gedraaid

Cirkels

cirkels met tussenruimte

pictogram controle

pictogram met gedraaide controle

cirkelpictogram

icon met verspreide cirkels

diagonale lijnen omhoog

diagonale lijnen-omlaag

diagonale strepen naar boven

diagonale strepen omlaag

diagonale lijnen omhoog icoon

pictogram met diagonale lijnen naar beneden

pictogram diagonale strepen omhoog

diagonal-stripes-down pictogram

rasterlijnen

gedraaide rasterlijnen

gedraaide rasterstrepen

x-fill

rasterlijnenpictogram

gedraaide-rastrijnenicoon

icoon gedraaide rasterstrepen

pictogram x-fill

zig-zag

zig-zag-verticaal

Punten

zig-zag-pictogram

zig-zag-verticaal pictogram

puntjes pictogram

Vooraf geladen icoontjes

De kaart laadt een set pictogrammen vooraf in de kaartafbeeldingsspite met behulp van de marker, pinen pin-round sjablonen. Deze pictogramnamen en de bijbehorende kleurwaarden worden weergegeven in de volgende tabel.

pictogramnaam	color	secundaire kleur
`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`

Probeer nu het hulpmiddel

Met het volgende hulpprogramma kunt u de verschillende ingebouwde afbeeldingssjablonen op verschillende manieren weergeven en de primaire en secundaire kleuren en schaal aanpassen.