Sprache
Deutsch

Zu einem Ort fliegen

Bewegen Sie die Kamera über Ihre eigenen Schaltflächen. flyTo animiert entlang einer Kurve, fitBounds passt einen Rahmen ein, und fitLayer passt die Daten einer Ebene ein, ohne dass Sie Koordinaten kennen müssen. Die Anzeige rechts wird vom Ereignis viewChanged gesteuert: Ziehen Sie die Karte und beobachten Sie, wie der reason von command zu user wechselt.

Dieses Beispiel separat öffnen

Worauf Sie achten sollten

  • Koordinaten sind immer [longitude, latitude].
  • fitLayer passt die Daten im aktuell gefilterten Zustand ein und ergänzt sich daher gut mit Datenschnitten und Filtern.
  • fitBounds und fitLayer behalten die Neigung der Kamera bei, sofern Sie nicht angeben, wo sie landen soll: Übergeben Sie pitch: 0, bearing: 0 für einen flachen, nach Norden ausgerichteten Ausschnitt.
  • viewChanged enthält einen reason. Dadurch kann eine Synchronisierung in beide Richtungen das Echo ihrer eigenen Befehle ignorieren.

Der Code

Die vollständige Seite. Setzen Sie Ihre eigene Publish-ID ein und bitten Sie den Autor der Karte, Ihre Website zu ihren zulässigen Ursprüngen hinzuzufügen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fly to a location - Icon Map Embed API</title>
  <link rel="stylesheet" href="https://www.icon-map.com/embed-examples/examples.css"> <!-- demo styling only -->
</head>
<body>
  <div class="ex-bar">
    <span class="ex-label">Fly to</span>
    <button data-city="tokyo">Tokyo</button>
    <button data-city="london">London</button>
    <button data-city="lagos">Lagos</button>
    <button data-city="saopaulo">Sao Paulo</button>
    <button id="europe">Frame Europe</button>
    <button id="cities">Frame every city</button>
    <button id="home">Home</button>
    <span class="ex-spacer"></span>
    <pre class="ex-readout" id="readout"></pre>
  </div>
  <div class="ex-main"><div id="map"></div></div>

  <script src="https://www.icon-map.com/js/iconmap-embed/2/iconmap-embed.umd.min.js"></script>
  <script>
    const el = document.getElementById("map");
    const map = IconMapEmbed.embed(el, {
      publishId: "pub_...",
      // The map is a globe: let this page's own background show in the space around it.
      background: "transparent",
      // Start calm: hide the map's own panels and cards for this demo.
      chrome: { legend: false, layerControl: false, bookmarksBar: false, tourTransport: false },
      visibility: { visuals: { "chart-continent": false, "slicer-continent": false, "slicer-size": false, "slicer-capital": false } },
      events: ["viewChanged"],
    });
    map.ready.catch((error) => console.error(error.code, error.message));

    const places = {
      tokyo:    { center: [139.75, 35.69],  zoom: 7.5, pitch: 40, bearing: -20 },
      london:   { center: [-0.12, 51.5],    zoom: 7.5, pitch: 30, bearing: 15 },
      lagos:    { center: [3.39, 6.45],     zoom: 7,   pitch: 35, bearing: 0 },
      saopaulo: { center: [-46.63, -23.56], zoom: 7.5, pitch: 40, bearing: 25 },
    };

    // flyTo animates along a curve; setView jumps (or eases with animate: true).
    for (const button of document.querySelectorAll("[data-city]")) {
      button.onclick = () => map.flyTo({ ...places[button.dataset.city], durationMs: 3500 });
    }

    // fitBounds frames a box: [[west, south], [east, north]]. pitch and bearing are where the camera
    // LANDS - without them a frame keeps the tilt of the flight before it.
    document.getElementById("europe").onclick = () =>
      map.fitBounds({ bounds: [[-11, 35], [40, 71]], padding: 30, pitch: 0, bearing: 0 });

    // fitLayer frames a layer's data as currently filtered - no coordinates needed.
    document.getElementById("cities").onclick = () =>
      map.fitLayer({ layerId: "cities", padding: 20, pitch: 0, bearing: 0 });

    document.getElementById("home").onclick = () =>
      map.setView({ center: [18, 22], zoom: 2.05, pitch: 0, bearing: 0, animate: true });

    // viewChanged fires when the camera settles. `reason` says who moved it.
    map.on("viewChanged", (view) => {
      document.getElementById("readout").textContent =
        `${view.center[0].toFixed(2)}, ${view.center[1].toFixed(2)}  z${view.zoom.toFixed(1)}  ` +
        `pitch ${Math.round(view.pitch)}  (${view.reason})`;
    });
  </script>
</body>
</html>

Weiterlesen