Erstellen einer Karte

In diesem Artikel erfahren Sie, wie Sie eine Karte erstellen und animieren.

Laden einer Karte

Um eine Karte zu laden, erstellen Sie eine neue Instanz der Map-Klasse. Beim Initialisieren der Karte übergeben Sie eine DIV-Element-ID zum Rendern der Karte und eine Reihe von Optionen, die beim Laden der Karte verwendet werden. Wenn im atlas-Namespace keine standardmäßigen Authentifizierungsinformationen angegeben sind, müssen diese Informationen beim Laden der Karte in den Kartenoptionen angegeben werden. Die Karte lädt aus Leistungsgründen verschiedene Ressourcen asynchron. Fügen Sie daher nach dem Erstellen der Karteninstanz ein ready- oder ein load-Ereignis zur Karte hinzu, und fügen Sie dann zusätzlichen Code, der mit der Karte interagiert, zum Ereignishandler hinzu. Das ready-Ereignis wird ausgelöst, sobald genügend Ressourcen geladen wurden, um eine programmgesteuerte Interaktion mit der Karte zu ermöglichen. Das load-Ereignis wird ausgelöst, nachdem die anfängliche Kartenansicht vollständig geladen wurde.


Tipp

Sie können mehrere Karten auf dieselbe Seite laden. Mehrere Karten auf derselben Seite können dieselben oder unterschiedliche Authentifizierungs- und Spracheinstellungen verwenden.

Anzeigen nur einer Weltkarte

Wenn der Maßstab einer Karte auf einem Breitbildschirm verkleinert wird, werden mehrere Kopien der Weltkarte horizontal angezeigt. Diese Option ist für einige Szenarien hervorragend geeignet, aber für andere Anwendungen ist es empfehlenswert, dass nur eine einzelne Kopie der Welt angezeigt wird. Dieses Verhalten wird implementiert, indem die Option renderWorldCopies der Karte auf false festgelegt wird.


Kartenoptionen

Beim Erstellen einer Karte können mehrere verschiedene Typen von Optionen übergeben werden, um die Funktionsweise der Karte anzupassen. Diese sind nachfolgend aufgeführt.

  • Mit CameraOptions und CameraBoundOptions wird der Bereich angegeben, der auf der Karte angezeigt werden soll.
  • Mit ServiceOptions wird angegeben, wie die Karte mit Diensten interagieren soll, die die Karte unterstützen.
  • Mit StyleOptions wird angegeben, wie die Karte formatiert und gerendert werden soll.
  • Mit UserInteractionOptions wird angegeben, wie die Karte erreicht werden soll, wenn der Benutzer mit der Karte interagiert.

Diese Optionen können auch nach dem Laden der Karte mit den Funktionen setCamera, setServiceOptions, setStyleund setUserInteraction aktualisiert werden.

Steuern der Kartenkamera

Es gibt zwei Möglichkeiten, um den angezeigten Kartenbereich mithilfe der Kamera einer Karte festzulegen. Sie können die Kameraoptionen beim Laden der Karte festlegen. Sie können die Option setCamera auch jederzeit nach dem Laden der Karte aufrufen, um die Kartenansicht programmgesteuert zu aktualisieren.

Festlegen der Kamera

Mit der Kartenkamera wird gesteuert, was im Viewport der Kartencanvas angezeigt wird. Kameraoptionen können bei der Initialisierung in den Kartenoptionen übermittelt oder in der Funktion setCamera der Karte übergeben werden.

//Set the camera options when creating the map.
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

Im folgenden Code wird ein Map-Objekt erstellt, und die Optionen für Zentrieren und Zoomen werden festgelegt. Karteneigenschaften wie „Zentrieren“ und „Zoomfaktor“ gehören zu CameraOptions.


Festlegen der Kameragrenzen

Ein Begrenzungsrahmen kann zum Aktualisieren der Kartenkamera verwendet werden. Wenn der Begrenzungsrahmen aus Punktdaten berechnet wurde, ist es oft hilfreich, in den Kameraoptionen auch einen Pixelauffüllungswert anzugeben, um die Symbolgröße zu berücksichtigen. Dadurch wird sichergestellt, dass keine Punkte am Rand des Kartenviewports ausgelassen werden.

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

Im folgenden Code wird über new atlas.Map() ein Map-Objekt konstruiert. Karteneigenschaften wie CameraBoundsOptions können mit der Funktion setCamera der Map-Klasse definiert werden. Eigenschaften von Begrenzungen und Abständen werden mit setCamera festgelegt.


Animieren der Kartenansicht

Beim Festlegen der Kameraoptionen der Karte können auch Animationsoptionen festgelegt werden. Mit diesen Optionen werden der Animationstyp und die Dauer zum Verschieben der Kamera angegeben.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

Im folgenden Code erstellt der erste Codeblock eine Karte und legt die Kartenstile für Zentrierung und Zoom fest. Im zweiten Codeblock wird ein Klickereignishandler für die Schaltfläche zum Animieren erstellt. Beim Klicken auf diese Schaltfläche wird die setCamera-Funktion mit zufällig generierten Werten für CameraOptions und AnimationOptions aufgerufen.


Anforderungstransformationen

Manchmal ist es nützlich, HTTP-Anforderungen ändern zu können, die vom Kartensteuerelement erstellt wurden. Beispiel:

  • Das Hinzufügen zusätzlicher Header zu Kachelanforderungen. Dies wird oft für kennwortgeschützte Dienste durchgeführt.
  • Ändern von URLs zum Ausführen von Anforderungen über einen Proxydienst.

Die Dienstoptionen der Karte umfassen eine transformRequest-Funktion, die zum Ändern aller von der Karte gestellten Anforderungen verwendet werden kann, bevor diese durchgeführt werden. Die transformRequest-Option ist eine Funktion, die zwei Parameter akzeptiert: eine Zeichenfolgen-URL und eine Ressourcentyp-Zeichenfolge, die angibt, wofür die Anforderung verwendet wird. Diese Funktion muss ein RequestParameters-Ergebnis zurückgeben.

transformRequest: (url: string, resourceType: string) => RequestParameters

Im folgenden Beispiel wird veranschaulicht, wie dies dazu verwendet werden kann, alle Anforderungen an die Größe https://example.com anzupassen, indem ein Benutzername und Kennwort als Header zur Anforderung hinzugefügt werden.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Testen Sie den Code

Schauen Sie sich die Codebeispiele an. Sie können den JavaScript-Code auf der Registerkarte JS bearbeiten und sich die Änderungen an der Kartenansicht auf der Registerkarte Ergebnis ansehen. Sie können auch oben rechts auf Auf CodePen bearbeiten klicken und den Code in CodePen ändern.

Nächste Schritte

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

Map

Sehen Sie sich Codebeispiele an, die zeigen, wie Sie Ihrer App Funktionen hinzufügen: