Hinzufügen einer Bildebene zu einer Karte

In diesem Artikel erfahren Sie, wie Sie einen festen Satz an Koordinaten mit einem Bild überlagern. Im Folgenden finden Sie einige Beispiele für verschiedene Bildtypen, die auf Karten überlagert werden können:

• Von Drohnen aufgenommene Bilder
• Gebäudegrundrisse
• Bilder von historischen oder anderen Spezialkarten
• Blaupausen von Auftragsstandorten
• Wetterradarbilder

Tipp

Ein ImageLayer-Element (Bildebene) ist eine einfache Möglichkeit, eine Karte mit einem Bild zu überlagern. Beachten Sie, dass bei Browsern beim Laden großer Bilder Probleme auftreten können. In diesem Fall ist die Aufteilung des Bilds in Kacheln sinnvoll, die Sie dann als TileLayer (Kachelebene) in die Karte laden können.

Die Bildebene unterstützt folgende Bildformate:

• JPEG
• PNG
• BMP
• GIF (keine Animationen)

Hinzufügen einer Bildebene

Der folgende Code legt ein Bild einer Karte von Newark, New Jersey, von 1922 über die Karte. Ein ImageLayer-Element wird erstellt, indem eine URL zu einem Bild und Koordinaten für die vier Ecken im Format [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner] übergeben werden.

//Create an image layer and add it to the map.
map.layers.add(new atlas.layer.ImageLayer({
    url: 'newark_nj_1922.jpg',
    coordinates: [
        [-74.22655, 40.773941], //Top Left Corner
        [-74.12544, 40.773941], //Top Right Corner
        [-74.12544, 40.712216], //Bottom Right Corner
        [-74.22655, 40.712216]  //Bottom Left Corner
    ]
}));

Ein voll funktionsfähiges Beispiel, das zeigt, wie ein Bild einer Karte von Newark, New Jersey von 1922 als Bildebene überlagert wird, finden Sie unter Einfache Bildebene der Azure Maps-Beispiele. Den Quellcode für dieses Beispiel finden Sie unter Quellcode für einfache Bildebene.

Importieren einer KML-Datei als Bodenüberlagerung

In diesem Beispiel sehen Sie, wie KML-Bodenüberlagerungsdaten auf der Karte als Bildebene hinzugefügt werden. KML-Bodenüberlagerungen stellen die Nord-, Süd-, Ost- und Westkoordinaten und eine Drehung gegen den Uhrzeigersinn bereit. Die Bildebene erwartet jedoch für jede Ecke des Bilds Koordinaten. Bei der KML-Bodenüberlagerung in diesem Beispiel handelt es sich um die Kathedrale von Chartres (Quelle: Wikimedia).

Der Code verwendet die statische getCoordinatesFromEdges-Funktion der ImageLayer-Klasse. Er berechnet die vier Ecken des Bilds aus den Nord-, Süd-, Ost-, West- und Drehungsinformationen der KML-Bodenüberlagerung.

Ein voll funktionsfähiges Beispiel, das zeigt, wie Sie eine KML-Bodenüberlagerung als Bildebene verwenden, finden Sie unter KML-Bodenüberlagerung als Bildebene der Azure Maps-Beispiele. Den Quellcode für dieses Beispiel finden Sie unter Quellcode für KML-Bodenüberlagerung als Bildebene.

Tipp

Verwenden Sie die Funktionen getPixels und getPositions der Bildebenenklasse, um zwischen geografischen Koordinaten der positionierten Bildebene und den lokalen Bildpixelkoordinaten zu konvertieren.

Anpassen einer Bildebene

Die Bildebene bietet zahlreiche Optionen für die Formatierung. Ein voll funktionsfähiges Beispiel, das zeigt, wie sich die verschiedenen Bildebenenoptionen auf das Rendering auswirken, finden Sie unter Bildebenenoptionen der Azure Maps-Beispiele. Den Quellcode für dieses Beispiel finden Sie unter Quellcode für Bildebenenoptionen.

Nächste Schritte

Erfahren Sie mehr zu den in diesem Artikel verwendeten Klassen und Methoden:

ImageLayer

ImageLayerOptions

In den folgenden Artikeln finden Sie weitere Codebeispiele, die Sie Ihren Karten hinzufügen können:

Hinzufügen einer Kachelebene