Wie man Bildvorlagen verwendet

2024-08-30

Bilder können mit HTML-Markern und verschiedenen Ebenen im 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.
Polygonflächen können mit einem Bild eines Füllmusters 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 das PNG-Format 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 Sie eine Bildvorlage entlang eines Linienpfads

Sobald eine Bildvorlage in den Kartenbild-Sprite geladen wurde, lässt sie sich entlang des Pfades einer Linie rendern. Dazu fügt man einen LineString zu einer Datenquelle hinzu und verwendet eine Symbolebene mit der lineSpacing-Option, wobei auf die ID der Bildressource in der image-Option von iconOptions 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 Sie eine Bildvorlage mit einer Polygon-Schicht

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 atlas.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 dasselbe Symbol in verschiedenen Modulen verwendet oder wenn Sie ein Modul erstellen, das weitere Bildvorlagen hinzufügt, können Sie diese Symbole ganz einfach aus dem 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.

Das Beispiel zum Hinzufügen von benutzerdefinierten Symbolen zum Atlasnamespace veranschaulicht, wie sie eine SVG-Vorlage erstellen und 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

In dieser Tabelle sind alle Derzeit im Azure Maps Web SDK verfügbaren Bildvorlagen aufgeführt. 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

Markersymbol

Symbol „Marker-Dick“

Symbol „Marker-Kreis“

Symbol „Marker-Flach“

Marker-Quadrat

Marker-Quadrat-Cluster

Marker-Pfeil

Marker-Ball-Pin

Symbol „Marker-Quadrat“

Symbol „Marker-Quadrat-Cluster“

Symbol „Marker-Ball-Pin“

Marker-quadratisch-gerundet

Marker-Quadrat-gerundet-Cluster

Flag

Flagge-Dreieck

Symbol „Marker-quadratisch-gerundet“

Symbol „Marker-Quadrat-gerundet-Cluster“

Dreieck

Dreieck-dick

Dreieck-Pfeil-hoch

Dreieck-Pfeil-links

Symbol „Dreieck“

Symbol „Dreieck-dick“

Hexagon

Hexagon-dick

Hexagon-gerundet

Hexagon-gerundet-dick

Symbol „Hexagon“

Symbol „Hexagon-dick“

Symbol „gerundetes Sechseck“

Symbol eines dick abgerundeten Hexagons

Pin-rund

Gerundetes Quadrat

Gerundetes Quadrat-dick

Symbol „Pin“

Symbol „Pin-rund“

Symbol „Gerundetes Quadrat“

Symbol „Gerundetes Quadrat-dick“

Pfeil-hoch

Pfeil-hoch-dünn

Auto

Auto-Symbol

Vorlagen für Polygonfüllmuster

Schachbrettmuster

Schachbrettmuster-gedreht

Kreise

Kreise-Abstand

Symbol „Schachbrettmuster“

Symbol „Schachbrettmuster-gedreht“

Symbol „Kreise“

Symbol „Kreise-Abstand“

Diagonal-Linien-hoch

Diagonal-Linien-runter

Diagonal-Streifen-hoch

Diagonal-Streifen-runter

Symbol „Diagonal-Linien-hoch“

Symbol „Diagonallinien nach unten“

Symbol „Diagonal-Streifen-hoch“

Symbol „Diagonal-Streifen-runter-runter“

Rasterlinien

Gedrehte Rasterlinien

Gedrehte Rasterstreifen

Füllung Kreuz

Symbol „Rasterlinien“

Symbol „Gedrehte Rasterlinien“

Symbol „Gedrehte Rasterstreifen“

Symbol „Füllung Kreuz“

Zickzack

Zickzack-vertikal

Punkte

Symbol „Zickzack“

Symbol „Zickzack-vertikal“

Symbol „Punkte“

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.