Erstellen einer Karte

Artikel
06/19/2023

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 weiteren 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.

Sie können auch mehrere Karten auf derselben Seite laden. Beispielcode, der das Laden mehrerer Karten auf derselben Seite veranschaulicht, finden Sie unter Mehrere Karten unter Azure Maps-Beispiele. Den Quellcode für dieses Beispiel finden Sie unter Quellcode für mehrere Karten.

Ein Screenshot, der das Fanggitter auf der Karte zeigt.

Tipp

Sie können die gleichen oder unterschiedliche Authentifizierungs- und Spracheinstellungen verwenden, wenn Sie mehrere Karten auf derselben Seite 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.

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

Kartenoptionen

Beim Erstellen einer Karte können mehrere verschiedene Typen von Optionen übergeben werden, um die Funktionsweise der Karte anzupassen:

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.
// Map properties, such as center and zoom level, are part of the CameraOptions
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 
});

Karteneigenschaften wie „Zentrieren“ und „Zoomfaktor“ gehören zu den Eigenschaften 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 einen Pixelauffüllungswert anzugeben, um die Symbolgröße zu berücksichtigen. Durch den Pixelabstand 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 Auswählen dieser Schaltfläche wird die setCamera-Funktion mit zufällig generierten Werten für CameraOptions und AnimationOptions aufgerufen.

<!DOCTYPE html>
 <html>
 <head>

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
  
  
    <script type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

Ein Screenshot einer Karte mit einer Schaltfläche namens „Karten animieren“, welche, wenn auf sie gedrückt wird, die Karte vergrößert oder verkleinert.

Anforderungstransformationen

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

Fügen Sie weitere Header zu Kachelanforderungen für kennwortgeschützte Dienste hinzu.
Ä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

Wenn Sie eine Anforderungstransformation verwenden, müssen Sie ein RequestParameters-Objekt zurückgeben, das mindestens eine url-Eigenschaft enthält. Im Folgenden finden Sie die Eigenschaften, die in ein RequestParameters-Objekt eingeschlossen werden können.

Option	type	BESCHREIBUNG
body	Zeichenfolge	Ein POST-Anforderungstext.
Anmeldeinformationen	`'same-origin'` \| `'include'`	Hiermit wird die Einstellung für die Anmeldeinformationen für eine ursprungsübergreifende Anforderung (Cross-origin Request, COR) angegeben. Verwenden Sie „include“, um Cookies mit ursprungsübergreifenden Anforderungen zu senden.
headers	Objekt (object)	Die Header, die mit der Anforderung gesendet werden sollen. Das Objekt ist ein Schlüssel-Wert-Paar aus Zeichenfolgenwerten.
Methode	`'GET'` \| `'POST'` \| `'PUT'`	Der Typ der zu sendenden Anforderung. Der Standardwert ist `'GET'`.
type	`'string'` \| `'json'` \| `'arrayBuffer'`	Das Format des POST-Antworttexts.
url	Zeichenfolge	Die URL, die angefordert werden soll.

Die Ressourcentypen, die für Inhalte relevant sind, die Sie der Karte hinzufügen, sind in der folgenden Tabelle aufgeführt:

Ressourcentyp	Beschreibung
Image	Eine Anforderung für ein Bild, das mit SymbolLayer oder ImageLayer verwendet werden soll.
Quelle	Eine Anforderung für Quellinformationen, z. B. eine TileJSON-Anforderung. Einige Anforderungen aus den grundlegenden Kartenstilen verwenden diesen Ressourcentyp auch beim Laden von Quellinformationen.
Tile	Eine Anforderung von einer Kachelebene (Raster oder Vektor).
WFS	Eine Anforderung von einem `WfsClient` im räumlichen IO-Modul an einen OGC-Webfeaturedienst. Weitere Informationen finden Sie unter Herstellen einer Verbindung mit einem WFS-Dienst.
WebMapService	Eine Anforderung von `OgcMapLayer` im räumlichen IO-Modul an einen WMS- oder WMTS-Dienst. Weitere Informationen finden Sie unter Hinzufügen einer Kartenebene über das Open Geospatial Consortium (OGC).

Dies sind einige in der Regel ignorierte Ressourcentypen, die durch die Anforderungstransformation übergeben werden und sich auf die grundlegenden Kartenstile beziehen: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphen, Attribution.

Im folgenden Beispiel wird veranschaulicht, wie alle Anforderungen an die Größe https://example.com angepasst werden, 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>'
    }
});