Szenen, Lesezeichen und Touren

Eine Szene ist der gesamte Zustand der Karte als ein einfaches Objekt: wo die Kamera steht, was angezeigt wird, worauf Datenschnitte und Filter gesetzt sind, was ausgewählt ist und welche Grundkarte aktiv ist. Erfassen Sie sie, bewahren Sie sie auf, wo Sie möchten, und versetzen Sie die Karte später genau dorthin zurück.

Es ist derselbe Zustand, den ein Lesezeichen des Autors enthält, plus Ihre Filter, die Auswahl und die Grundkarte.

Erfassen und wiederherstellen

const scene = await map.captureScene();
localStorage.setItem("last-view", JSON.stringify(scene));

// ... later, even after the map has been re-published
const { skipped } = await map.applyScene({ scene: JSON.parse(localStorage.getItem("last-view")), animate: true });

// EmbedScene
{
  v: 1,
  camera: { center: [lng, lat], zoom, bearing, pitch },
  visibility: { layers: { ... }, labels, hillshade, terminator, features: { ... }, visuals: { ... } },
  slicers: { "slicer-region": { ... } },
  filters: { region: ["EMEA"] },
  selection: { assets: ["41B"] },
  basemapId: "slate"
}

Szenen überstehen eine erneute Veröffentlichung. Hat der Autor inzwischen eine Ebene oder einen Datenschnitt entfernt, wird dieser Teil der Szene übersprungen und in skipped genannt (zum Beispiel "layer:old-depots"); alles andere wird wiederhergestellt. Nichts schlägt fehl.

Erfassen Sie nur, was Sie mitnehmen möchten:

const viewOnly = await map.captureScene({ include: ["camera", "visibility"] });

Mit map.resetScene() setzen Sie alles auf den Stand zurück, den der Autor veröffentlicht hat.

Mit einer Szene starten

Übergeben Sie beim Einbinden eine Szene, dann sieht der Betrachter nie zuerst die Standardansicht:

embed(el, { publishId, scene: JSON.parse(localStorage.getItem("last-view")) });

Eine Szene als Link teilen

sceneToUrl macht aus einer Szene einen Link, der die Karte genau dort öffnet. Auf der Seite, die ihn öffnet, ist kein Code nötig:

const { sceneToUrl } = IconMapEmbed;

const scene = await map.captureScene();
const link = sceneToUrl("https://embed.iconmap.ai/v/pub_...", { scene });

Die Szene steht im Fragment der URL (#s=...), das Browser nie an einen Server senden. Sie erscheint daher nicht in Zugriffsprotokollen. Siehe Deep Links.

Wenn Sie lieber eine undurchsichtige Zeichenfolge als ein Objekt speichern, fordern Sie eine an. applyScene akzeptiert beides:

const { state } = await map.captureScene({ opaque: true });
await map.applyScene({ scene: { state } });

Lesezeichen

Lesezeichen sind Ansichten, die der Autor der Karte gespeichert hat. Listen Sie sie auf und wenden Sie eines an. Das geschieht auf demselben Weg wie über die Lesezeichenleiste der Karte, sodass beide nie voneinander abweichen.

Der Autor entscheidet, ob Lesezeichen angeboten werden: getBookmarks() liefert eine leere Liste, sofern beim Veröffentlichen der Karte nicht Show a bookmarks control in the viewer aktiviert wurde.

const bookmarks = await map.getBookmarks();      // [{ id, name, description? }]
await map.applyBookmark({ bookmarkId: bookmarks[0].id, animate: true });

map.on("bookmarkApplied", ({ bookmarkId }) => highlightMyTab(bookmarkId));

Bauen Sie Ihre eigene Lesezeichen-Navigation und blenden Sie die der Karte aus:

await map.setChrome({ bookmarksBar: false });

Um mit einem Lesezeichen zu öffnen, übergeben Sie beim Einbinden bookmarkId.

Touren

Eine Tour ist eine Abfolge von Ansichten, die der Autor aufgezeichnet hat.

const tours = await map.getTours();              // [{ id, name }]
await map.playTour({ tourId: tours[0].id });
await map.stopTour();

map.on("tourStateChanged", ({ tourId, state }) => { /* "started" | "keyframe" | "ended" */ });

Während eine Tour läuft, enthalten viewChanged-Ereignisse reason: "tour". Ein Handler zur Synchronisierung der Ansicht, der nur auf "user" reagiert, bleibt also still.

Was wofür