Steuerelemente und explorative Datenanalyse in 3D-Karten

Übersicht der Steuerelemente

Die Karten, die über die API „Fotorealistische 3D-Karten in Google Maps – JavaScript“ angezeigt werden, enthalten UI-Elemente, über die Nutzer mit der Karte interagieren können. Diese Elemente werden als Steuerelemente bezeichnet. Sie können sie in die Benutzeroberfläche einbinden oder nicht. Wenn Sie die Steuerelemente der Benutzeroberfläche ausblenden, kann der Nutzer weiterhin über Tastenkombinationen auf der Karte navigieren.

Die API „Fotorealistische 3D-Karten in Google Maps – JavaScript“ unterstützt auch die Navigation der Nutzer auf der Karte mit vordefinierten Kamerapfaden. Diese Pfade können angepasst und kombiniert werden, um ansprechende 3D-Inhalte zu erstellen.

Steuerelemente für explorative Datenanalysen

Auf der folgenden Abbildung sehen Sie die Steuerelemente, die standardmäßig von den fotorealistischen 3D-Karten in der Maps JavaScript API angezeigt werden:

Bild einer Karte mit Steuerelementen

Die folgende Liste enthält alle Steuerelemente der Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“:

  • Die Zoomsteuerung besteht aus den Schaltflächen „+“ und „-“, mit denen die Zoomstufe der Karte geändert werden kann.
  • Mit der Neigungssteuerung können Sie die Neigung der Kamera ändern.
  • Mit der Drehsteuerung können Sie die Ausrichtung der Kamera ändern.
  • Die Verschiebungssteuerung enthält die Schaltflächen „←“, „→“, „↑“ und „↓“, mit denen der Mittelpunkt der Karte geändert werden kann.

Im folgenden Codebeispiel wird gezeigt, wie Steuerelemente für explorative Datenanalysen aktiviert und deaktiviert werden:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

Vordefinierte Kamerapfade

Die Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“ bietet zwei vordefinierte Kamerapfade. Die Kamerapfade können angepasst werden, indem Sie die Dauer der Animation ändern (und so die Geschwindigkeit erhöhen oder verringern) oder sie kombinieren, um einen filmischeren Look zu erzielen.

Für fotorealistische 3D-Karten in Google Maps – JavaScript werden die folgenden Kamerapfade unterstützt:

  • flyCameraTo-Animation, bei der die Kamera von der Mitte der Karte zu einem bestimmten Ziel schwebt
  • Bei einer flyCameraAround-Animation dreht sich die Karte um einen Punkt auf der Karte die angegebene Anzahl von Runden.

Die beiden verfügbaren Pfade können kombiniert werden, um zu einem Punkt von Interesse zu fliegen, sich um ihn zu drehen und dann an der angegebenen Stelle anzuhalten.

Anfliegen

Im folgenden Codebeispiel wird die Kamera animiert, um zu einem Ort zu schweben:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Umherfliegen

Im folgenden Codebeispiel wird die Kamera animiert, um einen Ort zu umkreisen:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Animationen kombinieren

Im folgenden Codebeispiel wird gezeigt, wie Animationen kombiniert werden, um die Kamera zu einem Ort zu schwenken und sich dann nach Ende der ersten Animation um den Ort zu drehen:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Nächste Schritte