Verwenden von Imagevorlagen

Artikel
06/28/2023

Bilder können mit HTML-Markern und verschiedenen Ebenen innerhalb des Azure Maps Web SDK verwendet werden:

Symbolebenen können Punkte auf der Karte mit einem Bildsymbol rendern. Symbole können auch entlang eines Linienpfads dargestellt werden.
Polygon Ebenen können mit einem Füllmusterbild gerendert werden.
HTML-Marker können Punkte mithilfe von Bildern und anderen HTML-Elementen rendern.

Um eine gute Leistung bei Ebenen zu gewährleisten, laden Sie die Bilder vor dem Rendern in die Sprite-Ressource des Kartenbilds. Die IconOptions des SymbolLayers laden standardmäßig ein paar Markerbilder in einigen wenigen Farben in das Kartenbild-Sprite vor. Diese und weitere Markerbilder sind als SVG-Vorlagen verfügbar. Sie können zum Erstellen von Images mit benutzerdefinierten Skalen verwendet oder als primäre und sekundäre Farbe des Kunden verwendet werden. Insgesamt werden 42 Bildvorlagen bereitgestellt: 27 Zeichensymbole und 15 Füllmuster für Polygone.

Mithilfe der map.imageSprite.createFromTemplate -Funktion können Bildvorlagen zu den Sprite-Ressourcen des Kartenbilds hinzugefügt werden. Diese Funktion ermöglicht die Übergabe von bis zu fünf Parametern.

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

Die id ist ein eindeutiger Bezeichner, den Sie erstellen. Die id wird dem Bild zugewiesen, wenn es dem Kartenbild-Sprite hinzugefügt wird. Verwenden Sie diesen Bezeichner in den Ebenen, um anzugeben, welche Bildressource gerendert werden soll. Der templateName gibt an, welche Bildvorlage verwendet werden soll. Die Option color legt die Primärfarbe des Bildes und die Optionen secondaryColor die Sekundärfarbe fest. Die Option scale skaliert die Bildvorlage, bevor sie auf den Bild-Sprite angewendet wird. Wenn das Bild auf den Bild-Sprite angewendet wird, wird es in ein PNG umgewandelt. Um ein gestochen scharfes Rendering zu gewährleisten, ist es besser, die Bildvorlage vor dem Hinzufügen zum Sprite zu vergrößern, als sie in einer Ebene zu vergrößern.

Diese Funktion lädt das Bild asynchron in den Bild-Sprite. Daher wird eine Zusage zurückgegeben, dass Sie auf den Abschluss dieser Funktion warten können.

Der folgende Code zeigt, wie Sie ein Bild aus einer der integrierten Vorlagen erstellen und mit einer Symbolebene verwenden können.

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

Verwenden einer Bildvorlage mit einer Symbolebene

Sobald eine Bildvorlage in den Kartenbild-Sprite geladen wurde, kann sie als Symbol in einer Symbolebene gerendert werden, indem auf die Bildressourcen-ID in der Option image der iconOptions verwiesen wird.

Im Beispiel Symbolebene mit integrierter Symbolvorlage wird veranschaulicht, wie Sie dazu eine Symbolebene unter Verwendung der Bildvorlage marker-flat mit einer blaugrünen Primärfarbe und einer weißen sekundären Farbe rendern, wie im folgenden Screenshot gezeigt.

Den Quellcode für dieses Beispiel finden Sie unter Beispielcode für Symbolebene mit integrierter Symbolvorlage.

Verwenden einer Bildvorlage entlang eines Linienpfads

Sobald eine Bildvorlage in den Kartenbild-Sprite geladen wurde, kann sie entlang des Pfades einer Linie gerendert werden, indem ein LineString zu einer Datenquelle hinzugefügt und eine Symbolebene mit einer lineSpacing-Option verwendet wird und indem mit der image-Option von der iconOptions auf die ID der Bildressource verwiesen wird.

Die Linienebene mit integrierter Symbolvorlage veranschaulicht dies. Wie der folgende Screenshot zeigt, rendert sie eine rote Linie auf der Karte und verwendet eine Symbolebene unter Verwendung der Bildvorlage car mit einer cyanblauen Primärfarbe und einer weißen Sekundärfarbe. Den Quellcode für dieses Beispiel finden Sie unter Beispielcode für Linienebene mit integrierter Symbolvorlage.

Tipp

Wenn die Bildvorlage nach oben zeigt, stellen Sie die Symboloption rotation der Symbolebene auf 90, wenn Sie möchten, dass sie in die gleiche Richtung wie die Linie zeigt.

Verwenden einer Bildvorlage mit einer Polygonebene

Sobald eine Bildvorlage in den Kartenbild-Sprite geladen wurde, kann sie als ein Füllmuster in einer Polygonebene gerendert werden, indem auf die Bildressourcen-ID in der Option fillPattern der Ebene verwiesen wird.

Das Beispiel Polygon mit integrierten Symbolvorlagen ausfüllen veranschaulicht, wie eine Polygonebene unter Verwendung der Bildvorlage dot mit einer roten Primärfarbe und einer transparenten sekundären Farbe gerendert wird, wie im folgenden Screenshot gezeigt. Den Quellcode für dieses Beispiel finden Sie unter Beispielcode für Füllpolygon mit integrierter Symbolvorlage.

Tipp

Durch das Einstellen der Sekundärfarbe von Füllmustern ist es einfacher zu erkennen, dass die darunterliegende Karte weiterhin das primäre Muster ausgibt.

Verwenden einer Bildvorlage mit einem HTML-Marker

Eine Bildvorlage kann mit der Funktion altas.getImageTemplate abgerufen und als Inhalt eines HTML-Markers verwendet werden. Die Vorlage kann an die Option htmlContent des Markers übergeben und dann mit den Optionen color, secondaryColor und text angepasst werden.

Das Beispiel HTML-Marker mit integrierter Symbolvorlage veranschaulicht dies mithilfe der Vorlage marker-arrow mit einer roten Primärfarbe, einer rosa Sekundärfarbe und einem Textwert von „00“, wie im folgenden Screenshot dargestellt. Den Quellcode für dieses Beispiel finden Sie unter Beispielcode für HTML-Marker mit integrierter Symbolvorlage.

Tipp

Bildvorlagen können auch außerhalb der Karte verwendet werden. Die getImageTemplate-Funktion gibt eine SVG-Zeichenfolge mit Platzhaltern zurück: {color}, {secondaryColor}{scale}, {text}. Ersetzen Sie diese Platzhalterwerte, um eine gültige SVG-Zeichenfolge zu erstellen. Sie können dann entweder die SVG-Zeichenfolge direkt zum HTML-DOM hinzufügen oder sie in einen Daten-URI konvertieren und in ein Bildtag einfügen. Beispiel:

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

Erstellen benutzerdefinierter wiederverwendbarer Vorlagen

Wenn Ihre Anwendung in verschiedenen Modulen dasselbe Symbol verwendet oder wenn Sie ein Modul erstellen, das weitere Bildvorlagen hinzufügt, können Sie diese Symbole ganz einfach über das Azure Maps Web-SDK hinzufügen und abrufen. Verwenden Sie die folgenden statischen Funktionen für den atlas-Namespace.

Name	Rückgabetyp	BESCHREIBUNG
`addImageTemplate(templateName: string, template: string, override: boolean)`		Fügt dem Atlas-Namespace eine benutzerdefinierte SVG-Bildvorlage hinzu.
`getImageTemplate(templateName: string, scale?: number)`	Zeichenfolge	Ruft eine SVG-Vorlage anhand des Namens ab.
`getAllImageTemplateNames()`	string[]	Ruft eine SVG-Vorlage anhand des Namens ab.

SVG-Bildvorlagen unterstützen die folgenden Platzhalterwerte:

Platzhalter	BESCHREIBUNG
`{color}`	Die Primärfarbe.
`{secondaryColor}`	Die Sekundärfarbe.
`{scale}`	Das SVG-Bild wird in ein PNG-Bild konvertiert, wenn es dem Kartenbild-Sprite hinzugefügt wird. Dieser Platzhalter kann verwendet werden, um eine Vorlage vor der Konvertierung zu skalieren, um sicherzustellen, dass sie deutlich gerendert wird.
`{text}`	Die Position, an der Text gerendert werden soll, wenn er mit einem HTML-Marker verwendet wird.

Im Beispiel Hinzufügen einer benutzerdefinierten Symbolvorlage zum Atlas-Namespace wird veranschaulicht, wie Sie eine SVG-Vorlage verwenden und sie dem Azure Maps-Web-SDK als wiederverwendbare Symbolvorlage hinzufügen, wie im folgenden Screenshot gezeigt. Den Quellcode für dieses Beispiel finden Sie unter Hinzufügen einer benutzerdefinierten Symbolvorlage zum Beispielcode des Atlas-Namespaces.

Liste der Bildvorlagen

Die Tabelle listet alle derzeit im Azure Maps Web SDK verfügbaren Bildvorlagen auf. Der Vorlagenname steht oberhalb jedes Bilds. Standardmäßig ist die Primärfarbe Blau und die Sekundärfarbe Weiß. Um die Sekundärfarbe auf weißem Hintergrund besser sichtbar zu machen, sind die folgenden Bilder mit der Sekundärfarbe Schwarz versehen.

Symbolvorlagen

Marker

Marker-Dick

Marker-Kreismarker

Marker-Flach

marker icon

marker-thick icon

marker-circle icon

marker-flat icon

Marker-Quadrat

Marker-Quadrat-Cluster

Marker-Pfeil

Marker-Ball-Pin

marker-square icon

marker-square-cluster icon

marker-ball-pin icon

Marker-quadratisch-gerundet

Marker-Quadrat-gerundet-Cluster

Flag

Flagge-Dreieck

marker-square-rounded icon

marker-square-rounded-cluster icon

Dreieck

Dreieck-dick

Dreieck-Pfeil-hoch

Dreieck-Pfeil-links

triangle icon

triangle-thick icon

Hexagon

Hexagon-dick

Hexagon-gerundet

Hexagon-gerundet-dick

hexagon icon

hexagon-thick icon

hexagon-rounded icon

hexagon-rounded-thick icon

Pin-rund

Gerundetes Quadrat

Gerundetes Quadrat-dick

pin icon

pin-round icon

rounded-square icon

rounded-square-thick icon

Pfeil-hoch

Pfeil-hoch-dünn

Auto

car icon

Vorlagen für Polygonfüllmuster

Schachbrettmuster

Schachbrettmuster-gedreht

Kreise

Kreise-Abstand

checker icon

checker-rotated icon

circles icon

circles-spaced icon

Diagonal-Linien-hoch

Diagonal-Linien-runter

Diagonal-Streifen-hoch

Diagonal-Streifen-runter

diagonal-lines-up icon

diagonal-lines-down icon

diagonal-stripes-up icon

diagonal-stripes-down icon

Rasterlinien

Gedrehte Rasterlinien

Gedrehte Rasterstreifen

Füllung Kreuz

grid-lines icon

rotated-grid-lines icon

rotated-grid-stripes icon

x-fill icon

Zickzack

Zickzack-vertikal

Punkte

zig-zag icon

zig-zag-vertical icon

dots icon

Vorab geladene Bildsymbole

Die Karte lädt eine Reihe von Symbolen mithilfe der Vorlagen marker, pin und pin-round in das Kartenbild-Sprite. Diese Symbolnamen und ihre Farbwerte sind in der folgenden Tabelle aufgeführt.

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

Tool „Jetzt testen“

Mit dem folgenden Tool können Sie die verschiedenen integrierten Bildvorlagen auf verschiedene Weise rendern und die Primär- und Sekundärfarben sowie die Skalierung anpassen.