Afbeeldingssjablonen gebruiken

Artikel
08/30/2024

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>

Dit id is een unieke id die u maakt. De id afbeelding wordt toegewezen aan de afbeelding wanneer deze wordt toegevoegd aan de sprite van de kaartafbeelding. 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 scale de optie wordt de afbeeldingssjabloon geschaald voordat deze wordt toegepast op de afbeeldingspite. Wanneer de afbeelding wordt toegepast op de afbeeldingspite, wordt deze geconverteerd naar een PNG- bestand. Het is beter om de afbeeldingssjabloon omhoog te schalen voordat u deze toevoegt aan de sprite, dan om deze op te schalen in een laag.

Met deze functie wordt de afbeelding asynchroon in de afbeeldingspite geladen. Het retourneert dus een promise die 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.

Zie symboollaag met ingebouwde voorbeeldsjablooncode voor pictogrammen voor de broncode voor dit voorbeeld.

Een afbeeldingssjabloon op een lijnpad gebruiken

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

De lijnlaag met ingebouwde pictogramsjabloon laat zien hoe u dit doet. Zoals in de volgende schermopname wordt weergegeven, wordt er een rode lijn op de kaart weergegeven en wordt een symboollaag gebruikt met behulp van de car afbeeldingssjabloon met een blauwe primaire kleur van een dodger 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 Veelhoek vullen met ingebouwde voorbeeldcode voor pictogrammensjablonen voor de broncode voor 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 altas.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 HTML-markering met ingebouwde voorbeeldcode voor pictogrammensjablonen voor de broncode voor dit voorbeeld.

Tip

Afbeeldingssjablonen kunnen ook buiten de kaart worden gebruikt. De getImageTemplate funciton retourneert een SVG-tekenreeks met tijdelijke aanduidingen; {color}, , {scale}{secondaryColor}, . {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()`	tekenreeks[]	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 de sjabloon Aangepast pictogram toevoegen aan het voorbeeld van een atlas-naamruimte ziet u hoe u een SVG-sjabloon maakt en deze als herbruikbare pictogramsjabloon toevoegt aan de Azure Maps-web-SDK, zoals wordt weergegeven in de volgende schermafbeelding. Zie Aangepaste pictogramsjabloon toevoegen aan voorbeeldcode van atlasnaamruimte voor de broncode voor dit voorbeeld.

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

marker

markeringsdikte

markeringscirkel

marker-flat

markeringspictogram

pictogram met markeringsdikte

pictogram markeringscirkel

pictogram markeringsvlak

marker-square

marker-square-cluster

markeringspijl

marker-ball-pin

pictogram markeringsplein

pictogram marker-square-cluster

pictogram marker-ball-pin

marker-square-rounded

marker-square-rounded-cluster

flag

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

hexagon-thick

zeshoek-afgerond

zeshoek-afgerond-dik

zeshoekpictogram

hexagon-dik pictogram

hexagon-afgerond pictogram

hexagon-afgerond-dik pictogram

speld

pin-round

afgerond vierkant

afgerond vierkant-dik

speldpictogram

pictogram vastmaken

afgerond vierkantspictogram

afgerond vierkant-dik pictogram

pijl-omhoog

pijl-omhoog-dun

car

autopictogram

Sjablonen voor opvulpatronen voor veelhoeken

controleur

controle gedraaid

Cirkels

cirkels met afstand

pictogram controle

pictogram met gedraaide controle

cirkelpictogram

cirkels- en spatiepictogram

diagonale lijnen omhoog

diagonale lijnen-omlaag

diagonale strepen omhoog

diagonale strepen-omlaag

pictogram diagonale lijnen omhoog

pictogram diagonaal-lijnen-omlaag

pictogram diagonale stripes-up

diagonal-stripes-down pictogram

rasterlijnen

gedraaide rasterlijnen

gedraaide rasterstreepjes

x-fill

pictogram rasterlijnen

pictogram gedraaide rasterlijnen

pictogram gedraaid raster-strepen

pictogram x-fill

zig-zag

zig-zag-verticaal

Punten

zig-zag-pictogram

zig-zag-verticaal pictogram

pictogram puntjes

Vooraf geladen afbeeldingspictogrammen

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

Nu proberen

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