Best Practices für das Azure Maps-Web-SDK

In diesem Dokument liegt der Fokus auf Best Practices für das Azure Maps-Web-SDK. Viele der beschriebenen bewährten Methoden und Optimierungen können jedoch auch auf alle anderen Azure Maps-SDKs angewendet werden.

Das Azure Maps-Web-SDK bietet eine leistungsstarke Canvas für das Rendern von großen räumlichen Datasets auf viele verschiedene Arten. Manchmal gibt es mehrere Möglichkeiten, Daten auf die gleiche Weise zu rendern. In diesen Fällen bietet jedoch abhängig von der Größe des Datasets und der gewünschten Funktionalität möglicherweise eine Methode eine bessere Leistung als die anderen. In diesem Artikel werden Best Practices sowie Tipps und Tricks hervorgehoben, mit denen Sie die Leistung maximieren und eine hohe Benutzerfreundlichkeit erzielen können.

Allgemein sollten Sie, wenn Sie die Leistung der Karte verbessern möchten, nach Möglichkeiten suchen, die Anzahl der Ebenen und Quellen sowie die Komplexität der verwendeten Datasets und Renderingstile zu reduzieren.

Bewährte Sicherheitsmethoden

Weitere Informationen zu bewährten Sicherheitsmethoden finden Sie unter Bewährte Methoden für die Authentifizierung.

Verwenden der aktuellen Versionen von Azure Maps

Für die Azure Maps SDKs und alle von diesen SDKs verwendeten externen Abhängigkeitsbibliotheken werden regelmäßige Sicherheitstests durchgeführt. Alle bekannten Sicherheitsprobleme werden zeitnah behoben und die Behebungen für Produktionsumgebungen veröffentlicht. Wenn Ihre Anwendung auf die aktuelle Hauptversion der gehosteten Version des Azure Maps Web SDK verweist, werden automatisch alle Nebenversionsupdates abgerufen, die sicherheitsrelevante Fixes enthalten.

Wenn Sie das Azure Maps Web SDK selbst über das npm-Modul hosten, stellen Sie sicher, dass die Datei package.json das Caretzeichen (^) in Kombination mit der Versionsnummer des Azure Maps-npm-Pakets enthält, damit auf die aktuelle Nebenversion verwiesen wird.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

Tipp

Verwenden Sie immer die neueste Version des npm-Azure Maps-Steuerelements. Weitere Informationen finden Sie in der npm-Dokumentation unter azure-maps-control.

Optimieren des anfänglichen Ladens von Karten

Beim Laden einer Webseite sollte so schnell wie möglich mit dem Rendern von Inhalten begonnen werden, damit dem Benutzer kein leerer Bildschirm angezeigt wird.

Ansehen des ready-Ereignisses für Karten

Analog dazu ist es häufig wünschenswert, beim anfänglichen Laden der Karte die darauf befindlichen Daten so schnell wie möglich zu laden, damit Benutzer*innen keine leere Karte sehen. Da die Karte Ressourcen asynchron lädt, müssen Sie warten, bis die Karte bereit für Interaktionen ist, bevor Sie versuchen, Ihre eigenen Daten darauf zu rendern. Es gibt zwei Ereignisse, auf die Sie warten können, das load- und das ready-Ereignis. Das Ladeereignis wird ausgelöst, nachdem die Karte das Laden der anfänglichen Kartenansicht beendet hat und alle Kartenkacheln geladen wurden. Wenn die Fehlermeldung „Format wurde noch nicht vollständig geladen“ angezeigt wird, sollten Sie das load-Ereignis verwenden und warten, bis das Format vollständig geladen ist.

Das ready-Ereignis wird ausgelöst, wenn die für eine Interaktion mit der Karte mindestens erforderlichen Kartenressourcen geladen wurden. Genauer gesagt, wird das Ereignis ready ausgelöst, wenn die Karte die Formatdaten zum ersten Mal lädt. Das ready-Ereignis kann oft bereits nach der Hälfte der für das load-Ereignis benötigten Zeit ausgelöst werden, wodurch Sie schneller mit dem Laden Ihrer Daten in die Karte beginnen können. Vermeiden Sie zu diesem Zeitpunkt Änderungen am Stil oder der Sprache der Karte, da dadurch das erneute Laden einer Formatvorlage ausgelöst werden kann.

Lazy Loading des Azure Maps-Web-SDK

Wenn die Karte nicht sofort benötigt wird, laden Sie das Azure Maps Web SDK per Lazy Loading („verzögertes Laden“), bis es benötigt wird. Dadurch wird das Laden der JavaScript- und CSS-Dateien, die das Azure Maps-Web-SDK verwendet, so lange verzögert, bis diese benötigt werden. Ein häufiges Szenario hierfür ist das Laden der Karte auf einer Registerkarte oder in einem Flyoutpanel, die bzw. das beim Laden der Seite nicht angezeigt wird.

Im Codebeispiel Karte verzögert laden wird gezeigt, wie Sie das Laden des Azure Maps-Web-SDK verzögern, bis auf eine Schaltfläche geklickt wird. Den Quellcode finden Sie unter Beispielcode „Karte verzögert laden“.

Hinzufügen eines Platzhalters für die Karte

Wenn das Laden der Karte aufgrund von Netzwerkeinschränkungen oder anderen Prioritäten in Ihrer Anwendung eine Weile dauern kann, ziehen Sie das Hinzufügen eines kleinen Hintergrundbilds zur Karte div als Platzhalter für die Karte in Betracht. Dadurch wird an der ansonsten leeren Stelle, an der die Karte div geladen wird, während des Ladevorgangs etwas angezeigt.

Festlegen des anfänglichen Kartenstils und der Kameraoptionen bei der Initialisierung

Häufig möchten Apps die Karte mit einem bestimmten Ort oder Stil laden. Manchmal warten Entwickler*innen, bis die Karte geladen wurde, (oder auf das ready-Ereignis) und verwenden dann die Funktion setCamera oder setStyle der Karte. Hierdurch dauert es häufig länger, bis die gewünschte anfängliche Kartenansicht angezeigt wird, da vor dem Laden der für die gewünschte Kartenansicht erforderlichen Ressourcen erst viele andere Ressourcen standardmäßig geladen werden müssen. Ein besserer Ansatz besteht darin, die gewünschten Kartenkamera- und Stiloptionen bei der Initialisierung der Karte an diese zu übergeben.

Optimieren von Datenquellen

Das Web-SDK verfügt über zwei Datenquellen:

• GeoJSON-Quelle: Diese DataSource-Klasse verwaltet Rohdaten für Orte lokal im GeoJSON-Format. Sie ist gut geeignet für kleine bis mittlere Datasets (mehr als hunderttausend Features).
• Vektorkachelquelle: Die VectorTileSource-Klasse lädt Daten, die als Vektorkacheln für die aktuelle Kartenansicht formatiert sind, basierend auf dem Kartenkachelsystem. Sie eignet sich hervorragend für große bis sehr große Datasets (Millionen oder Milliarden von Features).

Verwenden von kachelbasierten Lösungen für große Datasets

Wenn Sie mit größeren Datasets mit Millionen von Features arbeiten, ist die empfohlene Methode für eine optimale Leistung, die Daten über eine serverseitige Lösung wie einen Dienst für Vektor- oder Rasterbildkacheln zur Verfügung zu stellen.
Vektorkacheln sind so optimiert, dass nur die angezeigten Daten geladen werden, wobei die Geometrien auf den Fokusbereich der Kachel zugeschnitten und so generalisiert werden, dass die Auflösung der Karte zum Zoomfaktor der Kachel passt.

Die Azure Maps Creator-Plattform ruft Daten im Vektorkachelformat ab. Für andere Datenformate können Tools wie Tippecanoe verwendet werden. Weitere Informationen zur Verwendung von Vektorkacheln finden Sie in der Mapbox-Infodatei awesome-vector-tiles auf GitHub.

Ebenfalls möglich ist das Erstellen eines benutzerdefinierten Diensts, der Datasets auf Serverseite als Rasterbildkacheln rendert. In diesem Fall können die Daten mit der TileLayer-Klasse im Karten-SDK geladen werden. Dies bietet eine außergewöhnlich gute Leistung, da die Karte nur höchstens ein paar Dutzend Bilder laden und verwalten muss. Es gibt jedoch einige Einschränkungen bei der Verwendung von Rasterkacheln, da die Rohdaten nicht lokal verfügbar sind. Häufig ist für Interaktionen ein sekundärer Dienst erforderlich, z. B. um herauszufinden, auf welche Form ein Benutzer geklickt hat. Außerdem ist die Dateigröße einer Rasterkachel oft größer als die einer komprimierten Vektorkachel, die generalisierte und für den jeweiligen Zoomfaktor optimierte Geometrien enthält.

Weitere Informationen zu Datenquellen finden Sie unter Erstellen einer Datenquelle.

Kombinieren mehrerer Datasets in einer einzelnen Vektorkachelquelle

Je weniger Datenquellen die Karte verwalten muss, desto schneller kann sie alle anzuzeigenden Features verarbeiten. Bei Kachelquellen kann insbesondere durch das Kombinieren zweier Vektorkachelquellen die Anzahl der HTTP-Anforderungen für das Abrufen der Kacheln halbiert und die Gesamtdatenmenge etwas verringert werden, da es nur einen Dateiheader gibt.

Zum Kombinieren mehrerer Datasets in einer einzelnen Vektorkachelquelle können Tools wie Tippecanoe verwendet werden. Datasets können zu einer einzelnen Featuresammlung zusammengefasst oder auf verschiedene Ebenen innerhalb der Vektorkachel aufgeteilt werden, die Quellebenen genannt werden. In diesem Fall würden Sie beim Verbinden einer Vektorkachelquelle mit einer Renderingebene die Quellebene angeben, die die Daten enthält, die Sie mit der Ebene rendern möchten.

Reduzieren der Anzahl der Canvasaktualisierungen aufgrund von Datenaktualisierungen

Es gibt mehrere Möglichkeiten für das Hinzufügen oder Aktualisieren von Daten in einer DataSource-Klasse. In der folgenden Liste sind die verschiedenen Methoden zusammen mit einigen Überlegungen zur Sicherstellung einer guten Leistung aufgeführt.

• Die add-Funktion für Datenquellen kann verwendet werden, um einer Datenquelle ein oder mehrere Features hinzuzufügen. Bei jedem Aufruf dieser Funktion wird eine Aktualisierung der Kartencanvas ausgelöst. Wenn Sie viele Features hinzufügen, kombinieren Sie sie in einem Array oder einer Featuresammlung, und übergeben Sie sie so einmal der Funktion statt ein Dataset mit einer Schleife zu durchlaufen und die Funktion für jedes Feature einzeln aufzurufen.
• Die setShapes-Funktion für Datenquellen kann verwendet werden, um alle Formen in einer Datenquelle zu überschreiben. Im Hintergrund werden hierbei die clear- und die add-Funktion für Datenquellen kombiniert, und die Kartencanvas wird nur einmal aktualisiert statt zweimal, was schneller geht. Stellen Sie sicher, dass Sie diese Funktion verwenden, wenn Sie alle Daten in einer Datenquelle aktualisieren möchten.
• Die importDataFromUrl-Funktion für Datenquellen kann verwendet werden, um eine GeoJSON-Datei über eine URL in eine Datenquelle zu laden. Sobald die Daten heruntergeladen wurden, werden sie an die add-Funktion für Datenquellen übergeben. Wenn die GeoJSON-Datei in einer anderen Domäne gehostet wird, stellen Sie sicher, dass die andere Domäne domänenübergreifende Anforderungen (Cross Domain Requests, CORs) unterstützt. Wenn dies nicht der Fall ist, ziehen Sie das Kopieren der Daten in eine lokale Datei in Ihrer Domäne oder das Erstellen eines Proxydiensts in Betracht, für den CORs aktiviert sind. Wenn die Datei groß ist, sollten Sie in Erwägung ziehen, diese in eine Vektorkachelquelle zu konvertieren.
• Wenn Features mit der Shape-Klasse umschlossen werden, lösen die Funktionen addProperty, setCoordinates und setProperties für die Form alle ein Aktualisieren der Datenquelle und der Kartencanvas aus. Alle von der getShapes- und getShapeById-Funktion für Datenquellen zurückgegebenen Features werden automatisch mit der Shape-Klasse umschlossen. Wenn Sie mehrere Formen aktualisieren möchten, können Sie diesen Vorgang beschleunigen, indem Sie die Formen mit der toJson-Funktion für Datenquellen in das JSON-Format konvertieren, die GeoJSON-Datei bearbeiten und anschließend diese Daten an die setShapes-Funktion für Datenquellen übergeben.

Vermeiden von unnötigen Aufrufen der clear-Funktion für Datenquellen

Durch das Aufrufen der clear-Funktion der DataSource-Klasse wird eine Aktualisierung der Kartencanvas ausgelöst. Wenn die clear-Funktion mehrmals in einer Zeile aufgerufen wird, kann es zu einer Verzögerung kommen, während die Karte darauf wartet, dass die einzelnen Aktualisierungen ausgeführt werden.

Dies ist ein gängiges Szenario bei Anwendungen, die die Datenquelle löschen, neue Daten herunterladen, die Datenquelle noch mal löschen und dann die neuen Daten der Datenquelle hinzufügen. Je nach gewünschter Benutzerfreundlichkeit sind die folgenden Alternativen besser geeignet.

• Löschen Sie die Daten, bevor Sie die neuen Daten herunterladen, und übergeben Sie dann die neuen Daten an die add- oder setShapes-Funktion für Datenquellen. Wenn dies das einzige Dataset auf der Karte ist, ist die Karte leer, während die neuen Daten heruntergeladen werden.
• Laden Sie die neuen Daten herunter, und übergeben Sie sie an die setShapes-Funktion für Datenquellen. Dadurch werden alle Daten auf der Karte ersetzt.

Entfernen nicht verwendeter Features und Eigenschaften

Wenn Ihr Dataset Features enthält, die in Ihrer App nicht verwendet werden, entfernen Sie sie. Entfernen Sie ebenso alle Eigenschaften für Features, die nicht benötigt werden. Dies hat mehrere Vorteile:

• Die Datenmenge, die heruntergeladen werden muss, wird verringert.
• Die Anzahl der beim Rendern der Daten in einer Schleife zu durchlaufenden Features wird verringert.
• Manchmal kann es hilfreich sein, datengesteuerte Ausdrücke und Filter zu vereinfachen oder zu entfernen. So muss zur Renderingzeit weniger verarbeitet werden.

Wenn Features über zahlreiche Eigenschaften oder Inhalte verfügen, kann eine deutlich bessere Leistung erzielt werden, wenn der Datenquelle nur die für das Rendering benötigten Eigenschaften oder Inhalte hinzugefügt werden und zum Abrufen weiterer Eigenschaften oder Inhalte bei Bedarf eine separate Methode oder ein separater Dienst verwendet wird. Wenn Sie z. B. eine einfache Karte haben, die Orte auf einer Karte anzeigt, wird bei Auswahl eine Reihe von detaillierten Inhalten angezeigt. Wenn Sie datengesteuerte Stile verwenden möchten, um anzupassen, wie die Orte auf der Karte gerendert werden, laden Sie nur die benötigten Eigenschaften in die Datenquelle. Wenn Sie die ausführlichen Inhalte anzeigen möchten, verwenden Sie die ID des Features, um die weiteren Inhalte separat abzurufen. Wenn die Inhalte auf Serverseite gespeichert werden, können Sie die beim anfänglichen Laden der Karte herunterzuladende Datenmenge stark verringern, indem Sie einen Dienst zum asynchronen Abrufen verwenden.

Darüber hinaus kann durch das Reduzieren der Anzahl signifikanter Stellen in den Koordinaten von Features die Datengröße deutlich reduziert werden. Es ist nicht unüblich, dass Koordinaten zwölf oder mehr Dezimalstellen enthalten. Allerdings bieten sechs Dezimalstellen bereits eine Genauigkeit von ungefähr 0,1 Metern, was oft schon genauer als nötig für den Ort ist, für den die Koordinaten stehen. (Sechs Dezimalstellen werden empfohlen, wenn mit kleinen Standortdaten gearbeitet wird, wie z. B. Gebäudegrundrisse im Innenbereich). Die Verwendung von mehr als sechs Dezimalstellen wirkt sich wahrscheinlich nicht darauf aus, wie die Daten gerendert werden, und sorgt dafür, dass der Benutzer mehr Daten herunterladen muss, ohne dass dies irgendwelche Vorteile bietet.

Eine Liste mit nützlichen Tools für die Arbeit mit GeoJSON-Daten finden Sie hier.

Verwenden einer separaten Datenquelle für sich schnell ändernde Daten

Manchmal müssen Daten auf einer Karte schnell aktualisiert werden, z. B. wenn Liveupdates für gestreamte Daten oder Features mit Animationen angezeigt werden. Beim Aktualisieren einer Datenquelle durchläuft die Rendering-Engine die Datenquelle mit Schleifen und rendert alle darin enthaltenen Features. Verbessern Sie die Gesamtleistung, indem Sie statische Daten und sich schnell ändernde Daten in verschiedene Datenquellen aufteilen. Dadurch verringert sich die Anzahl der bei jeder Aktualisierung neu gerenderten Features.

Wenn Vektorkacheln mit Livedaten verwendet werden, kann für eine Unterstützung von Updates einfach der expires-Antwortheader verwendet werden. Standardmäßig laden Vektorkachelquellen und Rasterkachelebenen die Kacheln am expires-Datum automatisch neu. Die Kartenkacheln für Verkehrsfluss und Verkehrsereignisse verwenden dieses Feature, um sicherzustellen, dass auf der Karte Verkehrsinfos in Echtzeit angezeigt werden. Sie können dieses Feature deaktivieren, indem Sie den Kartendienst refreshExpiredTiles auf false festlegen.

Anpassen der Puffer- und Toleranzoptionen in GeoJSON-Datenquellen

Die DataSource-Klasse konvertiert Rohdaten für Orte in lokale Vektorkacheln für direktes Rendering. Diese lokalen Vektorkacheln schneiden die Rohdaten auf die Grenzen des Kachelbereichs mit etwas Puffer zu, um ein reibungsloses Rendering zwischen Kacheln sicherzustellen. Je kleiner der Wert für die Option buffer ist, desto weniger überlappende Daten werden in den lokalen Vektorkacheln gespeichert und desto besser ist die Leistung, desto mehr ändern sich jedoch auch die Renderingartefakte. Probieren Sie verschiedene Werte für diese Option aus, um die richtige Mischung aus Leistung und so wenig Renderingartefakten wie möglich zu finden.

Die DataSource-Klasse verfügt auch über eine tolerance-Option, die zusammen mit dem Douglas-Peucker-Vereinfachungsalgorithmus verwendet wird, um die Auflösung von Geometrien für Renderingzwecke zu verringern. Durch das Erhöhen dieses Toleranzwerts wird die Auflösung von Geometrien verringert, was zu einer besseren Leistung führt. Probieren Sie verschiedene Werte für diese Option aus, um die richtige Mischung aus Geometrieauflösung und Leistung für Ihr Dataset zu finden.

Festlegen der Option für den maximalen Zoomfaktor für GeoJSON-Datenquellen

Die DataSource-Klasse konvertiert Rohdaten für Orte in lokale Vektorkacheln für direktes Rendering. Dies erfolgt standardmäßig bis zu einem Zoomfaktor von 18. Wenn weiter gezoomt wird, verwendet die Klasse die Daten aus den für den Zoomfaktor 18 generierten Kacheln. Dies funktioniert gut für die meisten Datasets, bei denen bei einem so hohen Zoomfaktor eine hohe Auflösung erforderlich ist. Wenn Sie jedoch mit Datasets arbeiten, bei denen beim Anzeigen eher nicht so weit gezoomt wird (z. B. wenn Polygone für Staaten oder Provinzen angezeigt werden), werden durch das Festlegen der Option minZoom auf einen niedrigeren Wert (z. B. 12) der Umfang der Berechnungen und der Generierung lokaler Kacheln sowie der von der Datenquelle genutzte Arbeitsspeicher verringert, und die Leistung wird verbessert.

Minimieren der GeoJSON-Antwort

Wenn Sie entweder über einen Dienst oder durch das Laden einer Flatfile GeoJSON-Daten von einem Server laden, stellen Sie sicher, dass die Daten minimiert werden, sodass nicht benötigte Leerzeichen entfernt werden, die die Downloadgröße unnötig erhöhen.

Zugreifen auf GeoJSON-Rohdaten über eine URL

Das Speichern von GeoJSON-Objekten in JavaScript-Code ist möglich. Hierfür wird jedoch mehr Arbeitsspeicher benötigt, da Kopien davon in der Variablen, die Sie für dieses Objekt erstellt haben, sowie in der Datenquelleninstanz gespeichert werden, die es in einem separaten Worker verwaltet. Machen Sie stattdessen das GeoJSON-Objekt über eine URL für Ihre App verfügbar. Bei dieser Vorgehensweise lädt die Datenquelle eine einzelne Kopie der Daten direkt in ihren Worker.

Optimieren der Renderingebenen

Azure Maps stellt verschiedene Ebenen für das Rendern von Daten auf einer Karte bereit. Dank zahlreicher Optimierungsmöglichkeiten können Sie diese Ebenen an Ihr Szenario anpassen und die Leistung sowie die allgemeine Benutzerfreundlichkeit erhöhen.

Einmaliges Erstellen und Wiederverwenden von Ebenen

Das Azure Maps Web SDK ist datengesteuert. Daten werden an Datenquellen gesendet, die mit Renderingebenen verbunden sind. Wenn Sie die Daten auf der Karte ändern möchten, aktualisieren Sie die Daten in der Datenquelle, oder ändern Sie die Stiloptionen einer Ebene. Das geht oft schneller, als bei jeder Änderung die Ebenen zu entfernen und dann neu zu erstellen.

Inbetrachtziehen der Verwendung einer Blasenebene statt einer Symbolebene

Die Blasenebene rendert Punkte als Kreise auf der Karte, deren Radius und Farbe leicht über datengesteuerte Ausdrücke festgelegt werden kann. Da der Kreis eine einfache Form ist, die von WebGL gezeichnet werden kann, ist die Rendering-Engine in der Lage, ihn schneller zu rendern als eine Symbolebene, die ein Bild laden und rendern muss. Der Leistungsunterschied zwischen diesen beiden Renderingebenen wird deutlich, wenn Zehntausende von Punkten gerendert werden.

Sparsames Verwenden von HTML-Markern und Pop-ups

Im Gegensatz zu den meisten Ebenen in der Azure Maps-Websteuerung, die für das Rendering WebGL nutzen, verwenden HTML-Marker und Pop-ups zum Rendern herkömmliche DOM-Elemente. Je mehr HTML-Marker und Pop-ups einer Seite hinzugefügt werden, desto mehr DOM-Elemente gibt es folglich. Wenn ein paar Hundert HTML-Marker oder Pop-ups hinzugefügt wurden, kann die Leistung sich verschlechtern. Ziehen Sie daher bei größeren Datasets entweder ein Clustering Ihrer Daten oder die Verwendung einer Symbol- oder Blasenebene in Betracht.

Im Codebeispiel Popup mit mehreren Pins wiederverwenden wird gezeigt, wie Sie ein einzelnes Popup erstellen und wiederverwenden, indem Sie den Inhalt und die Position aktualisieren. Den Quellcode finden Sie unter Beispielcode „Popup mit mehreren Pins wiederverwenden“.

Wenn nur ein paar wenige Punkte auf der Karte gerendert werden müssen, sind jedoch die einfacheren HTML-Marker möglicherweise vorzuziehen. Darüber hinaus können HTML-Marker bei Bedarf leicht ziehbar gemacht werden.

Kombinieren von Ebenen

Die Karte kann Hunderte von Ebenen rendern. Je mehr Ebenen es gibt, desto länger dauert jedoch das Rendern einer Szene. Eine Strategie zur Reduzierung der Anzahl der Ebenen ist das Kombinieren von Ebenen, die ähnliche Stile verwenden oder für die datengesteuerte Stile verwendet werden können.

Angenommen, Sie verfügen über ein Dataset, in dem alle Features über die Eigenschaft isHealthy verfügen, die den Wert true oder false aufweisen kann. Für die Erstellung einer Blasenebene, die basierend auf dieser Eigenschaft verschiedene farbige Blasen rendert, gibt es mehrere Möglichkeiten. Diese sind in der folgenden Liste aufsteigend nach Leistungsfähigkeit geordnet aufgeführt:

• Teilen Sie die Daten basierend auf dem Wert für isHealthy auf zwei Datenquellen auf, und fügen Sie eine Blasenebene mit einer hartcodierten Farboption für jede Datenquelle an.
• Verwenden Sie für alle Daten eine gemeinsame Datenquelle, und erstellen Sie zwei Blasenebenen mit einer hartcodierten Farboption sowie einen Filter, der auf der Eigenschaft isHealthy basiert.
• Verwenden Sie für alle Daten eine gemeinsame Datenquelle, und erstellen Sie nur eine Blasenebene mit dem Stilausdruck case für die Farboption, der auf der Eigenschaft isHealthy basiert. Hier sehen Sie ein Codebeispiel zur Veranschaulichung.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

Erstellen flüssiger Animationen auf Symbolebenen

Für Symbolebenen ist die Konflikterkennung standardmäßig aktiviert. Diese soll sicherstellen, dass sich keine zwei Symbole überlappen. Für Icons und Texte auf einer Symbolebene stehen zwei Optionen zur Verfügung:

• allowOverlap: Hiermit wird angegeben, ob das Symbol sichtbar ist, wenn es mit anderen Symbolen in Konflikt steht.
• ignorePlacement: Hiermit wird angegeben, ob die anderen Symbole mit diesem Symbol in Konflikt stehen können sollen.

Beide Optionen sind standardmäßig auf false festgelegt. Wenn Sie ein Symbol animieren, werden die Berechnungen der Konflikterkennung für jeden Frame der Animation ausgeführt, was die Animation verlangsamen und sie weniger flüssig aussehen lassen kann. Legen Sie für eine flüssigere Animation beide Optionen auf true fest.

Der Beispielcode Einfache Symbolanimation zeigt, wie Sie eine Symbolebene auf einfache Weise animieren können. Den Quellcode für dieses Beispiel finden Sie unter Beispielcode für einfache Symbolanimation.

Angeben des Zoomfaktorbereichs

Wenn Ihre Daten eines der folgenden Kriterien erfüllen, geben Sie die minimale und maximale Zoomstufe der Ebene an, damit die Rendering-Engine sie überspringen kann, wenn sie außerhalb des Zoomstufenbereichs liegt.

• Wenn die Daten aus einer Vektorkachelquelle stammen, sind häufig Quellebenen für verschiedene Datentypen nur für einen bestimmten Zoomfaktorbereich verfügbar.
• Wenn Sie eine Kachelebene verwenden, die nicht über Kacheln für alle Zoomstufen von 0 bis 24 verfügt, und Sie möchten, dass sie nur in den Stufen gerendert wird, in denen sie Kacheln hat, und nicht versucht, fehlende Kacheln mit Kacheln aus anderen Zoomstufen aufzufüllen.
• Sie möchten eine Ebene nur für bestimmte Zoomfaktoren rendern. Alle Ebenen verfügen über die Optionen minZoom und maxZoom, bei der die Ebene zwischen diesen Zoomstufen nach der Logik maxZoom > zoom >= minZoom gerendert wird.

Beispiel

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

Angeben von Grenzen für Kachelebenen und Zoombereichen für Quellen

Standardmäßig laden Kachelebenen Kacheln für die gesamte Erde. Wenn der Kacheldienst jedoch nur über Kacheln für einen bestimmten Bereich verfügt, versucht die Karte, Kacheln außerhalb dieses Bereichs zu laden. Hierbei wird eine Anforderung für jede Kachel gesendet und auf eine entsprechende Antwort gewartet. Dadurch können andere Anforderungen der Karte blockiert werden, was das Rendern anderer Ebenen verlangsamen kann. Wenn Grenzen für eine Kachelebene angegeben werden, führt dies dazu, dass die Karte nur Kacheln innerhalb dieses Begrenzungsrahmens anfordert. Aus demselben Grund sollten Sie den minimalen und maximalen Zoomfaktor für die Quelle angeben, wenn die Kachelebene nur in einem bestimmten Bereich von Zoomfaktoren verfügbar ist.

Beispiel

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

Verwenden des leeren Kartenstils bei nicht sichtbarer Basiskarte

Wenn eine Ebene über die Karte gelegt wird, die die Basiskarte vollständig verdeckt, ziehen Sie in Erwägung, den Kartenstil auf blank oder blank_accessible festzulegen, damit die Basiskarte nicht gerendert wird. Ein gängiges Szenario für dieses Vorgehen ist, wenn die Basiskarte mit einer Kachel mit der gesamten Erde überdeckt wird, für die keine Deckkraft eingestellt werden kann oder die über keine transparenten Bereiche verfügt.

Flüssiges Animieren für Bild- oder Kachelebenen

Wenn Sie Animationen für eine Reihe von Bild- oder Kachelebenen auf der Karte erstellen möchten, geht das Erstellen einer Ebene für jede Bild- oder Kachelebene und Ändern der Deckkraft oft schneller als das Aktualisieren der Quelle einer einzelnen Ebene in jedem Animationsframe. Das Ausblenden einer Ebene, indem die Deckkraft auf null (0) festgelegt wird, und Einblenden einer neuen Ebene durch Festlegen der Deckkraft auf einen höheren Wert als null ist schneller als das Aktualisieren der Quelle auf der Ebene. Alternativ kann die Sichtbarkeit der Ebenen ein- oder ausgeschaltet werden. Stellen Sie hierbei jedoch sicher, dass Sie die Ausblendedauer der Ebene auf Null festlegen. Andernfalls wird die Ebene beim Anzeigen entsprechend animiert, was zu einem Flimmerneffekt führt, da die vorherige Ebene ausgeblendet ist, bevor die neue Ebene sichtbar wird.

Optimieren der Logik für die Konflikterkennung für Symbolebenen

Die Symbolebene verfügt über die beiden sowohl für Icons als auch für Texte verfügbaren Optionen allowOverlap und ignorePlacement. Mit diesen wird angegeben, ob das Icon oder der Text eines Symbols über etwas gelegt oder von etwas verdeckt werden kann. Wenn dies auf false festgelegt ist, führt die Symbolebene beim Rendern jedes Punkts Berechnungen aus, um festzustellen, ob dieser mit anderen, bereits gerenderten Symbolen auf der Ebene in Konflikt steht. Ist dies der Fall, wird das kollidierende Symbol nicht gerendert. So kann gut die Übersichtlichkeit der Karte verbessert und die Anzahl gerenderter Objekte reduziert werden. Wenn Sie diese Optionen auf false festlegen, wird diese Konflikterkennungslogik übersprungen, und alle Symbole werden auf der Karte gerendert. Passen Sie diese Option an, um die beste Kombination aus Leistung und Benutzererlebnis zu erzielen.

Clustering großer Datasets mit Datenpunkten

Wenn Sie mit großen Datasets mit Datenpunkten arbeiten, stellen Sie möglicherweise fest, dass sich bei bestimmten Zoomfaktoren viele der gerenderten Punkte überlappen und nur teilweise sichtbar sind, wenn überhaupt. Beim Clustering werden Punkte, die nah beieinander liegen, gruppiert und als einzelner Clusterpunkt dargestellt. Wenn der Benutzer auf der Karte zoomt, werden die Punkte im Cluster wieder einzeln angezeigt. Dadurch kann die Menge der Daten, die gerendert werden müssen, deutlich reduziert werden, die Karte wirkt weniger unordentlich, und die Leistung wird ebenfalls verbessert. Die DataSource-Klasse verfügt über Optionen für ein lokales Clustering von Daten. Viele Tools, die Vektorkacheln generieren, verfügen ebenfalls über Clusteringoptionen.

Durch das Vergrößern des Clusterradius können Sie die Leistung außerdem weiter verbessern. Je größer der Clusterradius ist, desto weniger geclusterte Punkte gibt es, auf die geachtet werden muss und die gerendert werden müssen. Weitere Informationen finden Sie unter Clustering von Punktdaten im Web SDK.

Verwenden gewichteter geclusterter Wärmebilder

Auf der Wärmebildebene können problemlos Zehntausende von Datenpunkten gerendert werden. Bei größeren Datasets sollten Sie das Aktivieren des Clusterings für die Datenquelle und die Verwendung eines kleinen Clusterradius in Erwägung ziehen und die Clustereigenschaft point_count als Gewicht für das Wärmebild verwenden. Wenn der Clusterradius nur ein paar Pixel groß ist, gibt es nur wenige visuelle Unterschiede auf dem gerenderten Wärmebild. Durch die Verwendung eines größeren Clusterradius wird die Leistung verbessert, die Auflösung des gerenderten Wärmebilds wird jedoch möglicherweise verringert.

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

Weitere Informationen finden Sie unter Clustering und Wärmebildebene.

Verwenden kleiner Bildressourcen

Bilder können dem Kartenbildsprite zum Rendern von Icons auf einer Symbolebene oder Mustern auf einer Polygonebene hinzugefügt werden. Verwenden Sie hierfür kleine Bilder, um die Datenmenge, die heruntergeladen werden muss, sowie den von diesen Bildern genutzten Platz im Kartenbildsprite zu minimieren. Wenn Sie eine Symbolebene verwenden, die das Icon mithilfe der Option size skaliert, verwenden Sie ein Bild, das die für das Anzeigen auf der Karte geplante Maximalgröße aufweist und nicht mehr. Dadurch wird sichergestellt, dass das Symbol mit einer hohen Auflösung bei minimaler Ressourcennutzung gerendert wird. Darüber hinaus kann auch SVG als kleineres Dateiformat für einfache Symbolbilder verwendet werden.

Optimieren von Ausdrücken

Datengesteuerte Stilausdrücke bieten Flexibilität und Leistungsfähigkeit für das Filtern und Formatieren von Daten auf der Karte. Es gibt viele Möglichkeiten, Ausdrücke zu optimieren. Nachfolgend finden Sie einige Tipps.

Verringern der Komplexität von Filtern

Filter durchlaufen alle Daten in einer Datenquelle mit einer Schleife, und Sie können überprüfen, ob die einzelnen Ergebnisse der Logik im Filter entsprechen. Wenn Filter komplex werden, kann dies zu Leistungsproblemen führen. Im Folgenden sind einige mögliche Strategien für die Behandlung dieses Problems aufgeführt.

• Wenn Sie Vektorkacheln verwenden, teilen Sie die Daten auf verschiedene Quellebenen auf.
• Wenn Sie die DataSource-Klasse verwenden, teilen Sie die Daten auf verschiedene Datenquellen auf. Versuchen Sie, eine Balance zwischen der Anzahl der Datenquellen und der Komplexität des Filters zu finden. Zu viele Datenquellen können ebenfalls Leistungsprobleme verursachen. Daher müssen Sie möglicherweise einige Tests durchführen, um herauszufinden, was für Ihr Szenario am besten funktioniert.
• Wenn Sie einen komplexen Filter für eine Ebene verwenden, sollten Sie die Verwendung mehrerer Ebenen mit Stilausdrücken in Erwägung ziehen, um die Komplexität des Filters zu verringern. Vermeiden Sie das Erstellen vieler Ebenen mit hartcodierten Stilen, wenn Sie stattdessen Stilausdrücke verwenden können, da auch eine hohe Anzahl von Ebenen zu Leistungsproblemen führen kann.

Sicherstellen, dass Ausdrücke keine Fehler verursachen

Ausdrücke werden häufig verwendet, um Code zum Ausführen von Berechnungen oder logischen Vorgängen zur Renderingzeit zu generieren. Stellen Sie genau wie beim Code im Rest Ihrer Anwendung sicher, dass die Berechnungen und die Logik Sinn ergeben und nicht fehleranfällig sind. Fehler in Ausdrücken verursachen Probleme bei der Auswertung des jeweiligen Ausdrucks, was zu einer schlechteren Leistung und Renderingproblemen führen kann.

Ein häufiger Fehler, auf den Sie achten sollten, ist die Verwendung von Ausdrücken, die auf einer Featureeigenschaft basieren, die möglicherweise nicht bei allen Features vorhanden ist. Im folgenden Code wird z. B. ein Ausdruck verwendet, mit dem der Wert für die Farbeigenschaft einer Blasenebene über die Eigenschaft myColor eines Features festgelegt wird.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

Der obige Code funktioniert problemlos, wenn alle Features in der Datenquelle über die Eigenschaft myColor verfügen und der Wert dieser Eigenschaft eine Farbe ist. Wenn Sie vollständige Kontrolle über die Daten in der Datenquelle haben und sicher wissen, dass alle Features über eine gültige Farbe als Wert für die Eigenschaft myColor verfügen, stellt dies möglicherweise kein Problem dar. Sie können im obigen Code als Schutz vor Fehlern jedoch einen case-Ausdruck zusammen mit einem has-Ausdruck verwenden, um zu überprüfen, ob das betreffende Feature über die Eigenschaft myColor verfügt. Wenn dies der Fall ist, kann dann der Typausdruck to-color verwendet werden, um zu versuchen, den Wert dieser Eigenschaft in eine Farbe umzuwandeln. Wenn die Farbe ungültig ist, kann eine Ausweichfarbe verwendet werden. Dies wird im folgenden Code veranschaulicht, in dem als Ausweichfarbe grün festgelegt ist.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

Sortieren boolescher Ausdrücke vom spezifischsten zum am wenigsten spezifischen

Reduzieren Sie die Gesamtanzahl der bedingten Tests, die erforderlich sind, wenn boolesche Ausdrücke verwendet werden, die mehrere bedingte Tests enthalten, indem Sie sie von den spezifischsten Tests zu den am wenigsten spezifischen Tests sortieren.

Vereinfachen von Ausdrücken

Ausdrücke können leistungsstark, manchmal aber auch komplex sein. Weniger komplexe Ausdrücke werden schneller ausgewertet. Wenn z. B. nur ein einfacher Vergleich erforderlich ist, wäre es besser, einen Ausdruck wie ['==', ['get', 'category'], 'restaurant'] zu verwenden als einen match-Ausdruck wie ['match', ['get', 'category'], 'restaurant', true, false]. Wenn die zu überprüfende Eigenschaft in diesem Fall einen booleschen Wert aufweist, wäre ein get-Ausdruck sogar noch einfacher: ['get','isRestaurant'].

Problembehandlung für das Web-SDK

Im Folgenden sind Tipps zum Debuggen für einige bei der Entwicklung mit dem Azure Maps-Web-SDK häufig auftretende Probleme aufgeführt.

Warum wird die Karte nicht angezeigt, wenn ich die Websteuerung lade?

Überprüfen Sie Folgendes:

• Schließen Sie unbedingt die Authentifizierungsoptionen auf der Karte ab. Ohne Authentifizierung lädt die Karte eine leere Canvas und gibt auf der Registerkarte „Netzwerk“ der Entwicklertools im Browser den Fehler „401“ zurück.
• Stellen Sie sicher, dass Sie mit dem Internet verbunden sind.
• Überprüfen Sie die Konsole in den Entwicklertools des Browsers auf Fehler. Einige Fehler können dazu führen, dass die Karte nicht gerendert wird. Debuggen Sie die Anwendung.
• Vergewissern Sie sich, dass Sie einen unterstützten Browser verwenden.

All meine Daten werden auf der anderen Seite der Welt angezeigt. Was ist passiert?

Für Koordinaten (auch Positionen genannt) in den Azure Maps-SDKs wird das in der Branche für räumliche Daten übliche Standardformat [longitude, latitude] verwendet. Im GeoJSON-Schema wird für Koordinaten ebenfalls dieses Format verwendet. Hierbei handelt es sich um das Datenformat, das hauptsächlich in den Azure Maps-SDKs verwendet wird. Wenn Ihre Daten auf der gegenüberliegenden Seite der Welt angezeigt werden, liegt dies höchstwahrscheinlich daran, dass die Werte für die Längen- und Breitengrade in den Koordinaten-/Positionsinformationen umgekehrt wurden.

Warum werden HTML-Marker in der Websteuerung an der falschen Stelle angezeigt?

Überprüfen Sie Folgendes:

• Wenn Sie benutzerdefinierte Inhalte für den Marker verwenden, stellen Sie sicher, dass die Werte für die Optionen anchor und pixelOffset richtig sind. Standardmäßig wird die untere Mitte des Inhalts an der Position auf der Karte ausgerichtet.
• Stellen Sie sicher, dass die CSS-Datei für Azure Maps geladen ist.
• Untersuchen Sie das DOM-Element des HTML-Markers, um zu überprüfen, ob sich CSS-Code aus Ihrer App an den Marker angehängt hat und seine Position beeinflusst.

Warum werden Icons oder Text auf der Symbolebene an der falschen Stelle angezeigt?

Überprüfen Sie, ob die Optionen anchor und offset richtig konfiguriert sind, dass sie mit dem Teil Ihres Bildes oder Textes übereinstimmen, der an der Koordinate auf der Karte ausgerichtet werden soll. Wenn das Symbol nur an der falschen Stelle ist, wenn die Karte gedreht wird, überprüfen Sie die Option rotationAlignment. Standardmäßig drehen sich die Symbole mit dem Kartenviewport, sodass sie dem Benutzer stehend angezeigt werden. Abhängig von Ihrem Szenario kann es jedoch wünschenswert sein, die Ausrichtung der Karte als Grundlage für die Ausrichtung des Symbols zu verwenden. Legen Sie dazu die Option rotationAlignment auf map fest.

Wenn das Symbol nur dann an der falschen Stelle angezeigt wird, wenn die Karte geneigt/gekippt wird, überprüfen Sie die Option pitchAlignment. Standardmäßig werden Symbole im Kartenviewport stehend angezeigt, wenn die Karte geneigt oder gekippt wird. Abhängig von Ihrem Szenario kann es jedoch wünschenswert sein, die Neigung der Karte als Grundlage für die Neigung des Symbols zu verwenden. Legen Sie dazu die Option pitchAlignment auf map fest.

Warum werden keine meiner Daten auf der Karte angezeigt?

Überprüfen Sie Folgendes:

• Überprüfen Sie die Konsole in den Entwicklertools des Browsers auf Fehler.
• Stellen Sie sicher, dass eine Datenquelle erstellt und der Karte hinzugefügt wurde, und dass die Datenquelle mit einer Renderingebene verbunden ist, die zuvor der Karte hinzugefügt wurde.
• Fügen Sie Ihrem Code Breakpoints hinzu, und durchlaufen Sie ihn schrittweise. Stellen Sie sicher, dass der Datenquelle Daten hinzugefügt und dass die Datenquelle und die Ebenen der Karte hinzugefügt werden.
• Testen Sie, was passiert, wenn Sie datengesteuerte Ausdrücke auf Ihrer Renderingebene entfernen. Es kann sein, dass einer davon einen Fehler enthält, der das Problem verursacht.

Kann ich das Azure Maps-Web-SDK in einem iframe in einer Sandbox verwenden?

Ja.

Support

Im Folgenden sind die verschiedenen Wege aufgeführt, auf denen Sie je nach Art des Problems Support für Azure Maps anfordern können.

Wie melde ich ein Datenproblem oder ein Problem mit einer Adresse?

Melden Sie Datenprobleme über die Website für Azure Maps-Feedback. Ausführliche Anweisungen zum Melden von Datenproblemen finden Sie unter Bereitstellen von Datenfeedback zu Azure Maps.

Hinweis

Für jedes übermittelte Problem wird eine eindeutige URL zur Nachverfolgung generiert. Die Lösungszeiten variieren je nach Problemtyp und der Zeit, die zum Überprüfen der Richtigkeit der Änderung erforderlich ist. Die Änderungen werden im wöchentlichen Update der Renderdienste angezeigt, während andere Dienste wie Geocodierung und Routing monatlich aktualisiert werden.

Wie melde ich einen Fehler in einem Dienst oder einer API?

Melden Sie Probleme auf der Azure-Seite Hilfe und Support, indem Sie auf die Schaltfläche Supportanfrage erstellen klicken.

Wo erhalte ich technische Hilfe zu Azure Maps?

• Wenn Sie Fragen zu Power BI-Visual in Azure Maps haben, wenden Sie sich an den Power BI-Support.

• Für alle anderen Azure Maps-Dienste wenden Sie sich an den Azure-Support.

• Wenn Sie Fragen oder Anmerkungen zu bestimmten Azure Maps-Features haben, besuchen Sie die Azure Maps-Entwicklerforen.

Nächste Schritte

Im folgenden Artikel finden Sie weitere Tipps zur Verbesserung der Benutzerfreundlichkeit Ihrer Anwendung.

Erstellen einer barrierefreien Anwendung

Informieren Sie sich ausführlicher über die Terminologie, die in Azure Maps und in der Branche für räumliche Daten verwendet wird.

Azure Maps-Glossar