Earth Engine API in clientseitigen Webanwendungen

In dieser Anleitung erfahren Sie, wie Sie eine Webseite mit einer interaktiven Karte erstellen, auf der Ergebnisse angezeigt werden, die in Earth Engine berechnet wurden. Sie eignet sich für HTML-, CSS- und JavaScript-Einsteiger oder Nutzer mit entsprechenden Vorkenntnissen.

Unten sehen Sie eine Demo der interaktiven Karte, die Sie in dieser Anleitung erstellen. Sie zeigt die Geländeneigung des Grand Canyon, die in Earth Engine berechnet wurde und durch verschiedene Grautöne dargestellt wird. Sie können die Karte schwenken und zoomen, um Ergebnisse für weitere Bereiche zu berechnen und anzuzeigen. Sie müssen sich in der Demo anmelden.

Der hier beschriebene Ansatz wird in der Regel beim Erstellen von Single-Page-Anwendungen (SPAs) verwendet. In einer SPA kann die gesamte App in einem Webbrowser verwendet werden, ohne dass die Seite vom Server neu geladen wird. Daher ist für diese Apps keine Entwicklung und kein Hosting einer benutzerdefinierten serverseitigen Komponente erforderlich.

Da der Code der App im Webbrowser des Nutzers ausgeführt wird (auch als clientseitige Ausführung bezeichnet), sollten Entwickler keine vertraulichen Anmeldedaten wie private Schlüssel von Dienstkonten direkt in die Anwendung einbetten. Stattdessen müssen sich Nutzer der Anwendung mit ihren eigenen Konten authentifizieren, die für den Earth Engine-Zugriff registriert wurden.

In diesem Leitfaden werden folgende Themen behandelt:

  1. Eine Schaltfläche anzeigen, mit der sich Nutzer mit ihrem Earth Engine-Konto anmelden können.
  2. Eine einfache Analyse in Earth Engine definieren.
  3. Eine interaktive Karte einbetten, um Ergebnisse mit der Maps JavaScript API anzuzeigen.

Vorbereitung

Cloud-Projekt einrichten

  1. Folgen Sie der Anleitung unter Cloud-Projekt für Earth Engine einrichten, bevor Sie beginnen. Notieren Sie sich die Client-ID, die Sie im Abschnitt OAuth 2.0 einrichten erhalten haben. Da sich Nutzer mit ihrem eigenen Google-Konto in Ihrer Anwendung anmelden können, können Sie den Abschnitt Dienstkonto erstellen und registrieren überspringen.
  2. Aktivieren Sie die Maps JavaScript API für Ihr Projekt.

Maps API-Schlüssel abrufen

Informationen zum Abrufen eines API-Schlüssels, mit dem Sie die Maps JavaScript API in Ihrer Webanwendung verwenden können, finden Sie in der API-Dokumentation zur Maps JavaScript API unter API-Schlüssel abrufen.

Wir empfehlen dringend, auch der Anleitung im Abschnitt API-Schlüssel einschränken zu folgen, damit nur autorisierte Anfragen mit Ihrem API-Schlüssel gestellt werden.

Anwendung erstellen

Schritt 1: HTML-Seite erstellen

Definieren Sie zuerst eine einfache HTML-Webseite:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map. */
      #map-container {
        height: 400px;
        width: 100%;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <!-- The "Sign in with Google" button, initially hidden. -->
    <input
      id="g-sign-in"
      type="image"
      src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
      onclick="onSignInButtonClick()"
      alt="Sign in with Google"
      hidden
    />

    <!-- Element where map will be added. -->
    <div id="map-container"></div>
    <script>
      // JavaScript code goes here.
    </script>
  </body>
</html>

Dieses einfache HTML hat mehrere Aufgaben:

  • Mit CSS-Stilen werden die Größe und die Hintergrundfarbe der Karte definiert, die während der Initialisierung angezeigt wird.
  • Definiert eine Schaltfläche „Über Google anmelden“, die beim Klicken die Funktion onSignInButtonClick() aufruft. Diese Funktion wird in den nächsten Abschnitten in JavaScript definiert.
  • Definiert ein leeres Element, das die Karte enthält, sobald sie initialisiert ist.
  • Fügt einen leeren <script>-Block hinzu, der den unten definierten JavaScript-Code enthält.

Schritt 2: Verhalten in JavaScript definieren

In den folgenden Schritten kann JavaScript-Code direkt in das <script> Tag eingefügt werden.

Callback zum Einrichten von APIs und Karte definieren

Definieren Sie eine Funktion, die ausgeführt wird, sobald der Nutzer angemeldet ist. Die Earth Engine API kann erst initialisiert und aufgerufen werden, wenn der Nutzer authentifiziert wurde. Dazu gleich noch mehr.

In diesem Beispiel werden die Earth Engine API und die Maps API initialisiert, eine Kachelquelle erstellt, die die Geländeneigung bei Bedarf berechnet, und die Kachelquelle wird der Karte als Overlay hinzugefügt, das von der Maps JavaScript API angezeigt wird:

// Initializes Maps JavaScript API and Earth Engine API, instructing the map
// to pull tiles from Earth Engine and to overlay them on the map.
function setUpMap() {
  // Hide the sign-in button.
  document.getElementById("g-sign-in").setAttribute("hidden", "true");

  // Initialize the Earth Engine API. Must be called once before using the API.
  ee.initialize(null, null, null, null, null, 'my-project');

  // Get a reference to the placeholder DOM element to contain the map.
  const mapContainerEl = document.getElementById("map-container");

  // Create an interactive map inside the placeholder DOM element.
  const embeddedMap = new google.maps.Map(mapContainerEl, {
    // Pan and zoom initial map viewport to Grand Canyon.
    center: {lng: -112.8598, lat: 36.2841},
    zoom: 9,
  });

  // Obtain reference to digital elevation model and apply algorithm to
  // calculate slope.
  const srtm = ee.Image("CGIAR/SRTM90_V4");
  const slope = ee.Terrain.slope(srtm);

  // Create a new tile source to fetch visible tiles on demand and display them
  // on the map.
  const mapId = slope.getMap({min: 0, max: 60});
  const tileSource = new ee.layers.EarthEngineTileSource(mapId);
  const overlay = new ee.layers.ImageOverlay(tileSource);
  embeddedMap.overlayMapTypes.push(overlay);
}

Handler für Klicks auf die Schaltfläche „Anmelden“ definieren

Fügen Sie als Nächstes eine Funktion hinzu, um das Anmeldepop-up anzuzeigen, wenn auf die Schaltfläche „Anmelden“ geklickt wird. Bei Erfolg wird die Methode setUp() aufgerufen.

// Handles clicks on the sign-in button.
function onSignInButtonClick() {
  // Display popup allowing the user to sign in with their Google account and to
  // grant appropriate permissions to the app.
  ee.data.authenticateViaPopup(setUpMap);
}

Dieser Callback ist über das Attribut onclick mit der Schaltfläche im obigen HTML-Code verknüpft. In diesem Beispiel ist die Schaltfläche „Anmelden“ beim Laden der Seite zunächst ausgeblendet. Im nächsten Abschnitt prüfen wir, ob der Nutzer angemeldet ist, bevor die Schaltfläche angezeigt wird.

Haupteinstiegspunkt definieren

Definieren Sie nun den Code der obersten Ebene, der beim Laden der Seite zuerst ausgeführt werden soll. Dazu wird die integrierte Authentifizierungs-Hilfsfunktion ee.data.authenticateViaPopup() von Earth Engine verwendet, um zu prüfen, ob der Nutzer bereits angemeldet ist. Wenn der Nutzer angemeldet ist, fordert die Funktion die entsprechenden Berechtigungen an und ruft bei Erfolg setUp() auf, um die Earth Engine API und die Maps API zu initialisieren.

Wenn der Nutzer nicht angemeldet ist, wird stattdessen die Schaltfläche „Anmelden“ angezeigt. Der Nutzer kann dann auf die Schaltfläche klicken, um onSignInButtonClick() auszulösen. Dadurch wird das Pop-up angezeigt und setUp() aufgerufen, um den Vorgang zu starten.

// If the user is signed in, display a popup requesting permissions needed to
// run the app, otherwise show the sign-in button.
ee.data.authenticateViaOauth(
  // The OAuth Client ID defined above.
  CLIENT_ID,
  // Callback invoked immediately when user is already signed in.
  setUpMap,
  // Show authentication errors in a popup.
  alert,
  // Request permission to only read and compute Earth Engine data on behalf of
  // user.
  /* extraScopes = */ ['https://www.googleapis.com/auth/earthengine.readonly'],
  // Show sign-in button if reusing existing credentials fails.
  () => document.getElementById("g-sign-in").removeAttribute("hidden"),
  // Don't require ability to write and access Cloud Platform on behalf of the
  // user.
  /* opt_suppressDefaultScopes = */ true
);

Selbst ausprobieren

Hier sehen Sie die vollständige Lösung, die in dieser Anleitung vorgestellt wird. Rechts oben im Beispielcode befinden sich drei Schaltflächen. Klicken Sie auf die Schaltfläche ganz links, um das Beispiel in JSFiddle zu öffnen.

Ersetzen Sie YOUR_API_KEY und YOUR_CLIENT_ID durch den Maps API-Schlüssel und die OAuth Client-ID, die Sie unter Vorbereitung erhalten haben. Sie können auf diese Platzhalter im Code unten klicken, um sie automatisch einzufügen. Ersetzen Sie außerdem 'my-project' durch Ihre Google Cloud-Projekt-ID.

<!-- Load Maps JavaScript API. For production apps, append you own ?key=YOUR_API_KEY. -->

<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.365/earthengine-api.min.js"></script>

<!-- The "Sign in with Google" button, initially hidden. -->
<input
  id="g-sign-in"
  type="image"
  src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
  onclick="onSignInButtonClick()"
  alt="Sign in with Google"
  hidden
/>

<!-- Element where map will be added. -->
<div id="map-container"></div>
 
/* Set the size of the div element that contains the map. */
  #map-container {
    height: 400px;
    width: 100%;
    background-color: #eee;
  }
 
// The OAuth Client ID from the Google Developers Console.
// REMINDER: Be sure to add a valid ID here!
const CLIENT_ID = "";

// Initializes Maps JavaScript API and Earth Engine API, instructing the map
// to pull tiles from Earth Engine and to overlay them on the map.
function setUpMap() {
  // Hide the sign-in button.
  document.getElementById("g-sign-in").setAttribute("hidden", "true");

  // Initialize the Earth Engine API. Must be called once before using the API.
  ee.initialize(null, null, null, null, null, 'my-project');

  // Get a reference to the placeholder DOM element to contain the map.
  const mapContainerEl = document.getElementById("map-container");

  // Create an interactive map inside the placeholder DOM element.
  const embeddedMap = new google.maps.Map(mapContainerEl, {
    // Pan and zoom initial map viewport to Grand Canyon.
    center: {lng: -112.8598, lat: 36.2841},
    zoom: 9,
  });

  // Obtain reference to digital elevation model and apply algorithm to
  // calculate slope.
  const srtm = ee.Image("CGIAR/SRTM90_V4");
  const slope = ee.Terrain.slope(srtm);

  // Create a new tile source to fetch visible tiles on demand and display them
  // on the map.
  const mapId = slope.getMap({min: 0, max: 60});
  const tileSource = new ee.layers.EarthEngineTileSource(mapId);
  const overlay = new ee.layers.ImageOverlay(tileSource);
  embeddedMap.overlayMapTypes.push(overlay);
}

// Handles clicks on the sign-in button.
function onSignInButtonClick() {
  // Display popup allowing the user to sign in with their Google account and to
  // grant appropriate permissions to the app.
  ee.data.authenticateViaPopup(setUpMap);
}

// If the user is signed in, display a popup requesting permissions needed to
// run the app, otherwise show the sign-in button.
ee.data.authenticateViaOauth(
  // The OAuth Client ID defined above.
  CLIENT_ID,
  // Callback invoked immediately when user is already signed in.
  setUpMap,
  // Show authentication errors in a popup.
  alert,
  // Request permission to only read and compute Earth Engine data on behalf of
  // user.
  /* extraScopes = */ ['https://www.googleapis.com/auth/earthengine.readonly'],
  // Show sign-in button if reusing existing credentials fails.
  () => document.getElementById("g-sign-in").removeAttribute("hidden"),
  // Don't require ability to write and access Cloud Platform on behalf of the
  // user.
  /* opt_suppressDefaultScopes = */ true
);
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.365/earthengine-api.min.js"></script>
    <style>
      /* Set the size of the div element that contains the map. */
      #map-container {
        height: 400px;
        width: 100%;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <!-- The "Sign in with Google" button, initially hidden. -->
    <input
      id="g-sign-in"
      type="image"
      src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
      onclick="onSignInButtonClick()"
      alt="Sign in with Google"
      hidden
    />

    <!-- Element where map will be added. -->
    <div id="map-container"></div>
    <script>
      // The OAuth Client ID from the Google Developers Console.
      const CLIENT_ID = "YOUR_CLIENT_ID";
      
      // Initializes Maps JavaScript API and Earth Engine API, instructing the map
      // to pull tiles from Earth Engine and to overlay them on the map.
      function setUpMap() {
        // Hide the sign-in button.
        document.getElementById("g-sign-in").setAttribute("hidden", "true");
      
        // Initialize the Earth Engine API. Must be called once before using the API.
        ee.initialize(null, null, null, null, null, 'my-project');
      
        // Get a reference to the placeholder DOM element to contain the map.
        const mapContainerEl = document.getElementById("map-container");
      
        // Create an interactive map inside the placeholder DOM element.
        const embeddedMap = new google.maps.Map(mapContainerEl, {
          // Pan and zoom initial map viewport to Grand Canyon.
          center: {lng: -112.8598, lat: 36.2841},
          zoom: 9,
        });
      
        // Obtain reference to digital elevation model and apply algorithm to
        // calculate slope.
        const srtm = ee.Image("CGIAR/SRTM90_V4");
        const slope = ee.Terrain.slope(srtm);
      
        // Create a new tile source to fetch visible tiles on demand and display them
        // on the map.
        const mapId = slope.getMap({min: 0, max: 60});
        const tileSource = new ee.layers.EarthEngineTileSource(mapId);
        const overlay = new ee.layers.ImageOverlay(tileSource);
        embeddedMap.overlayMapTypes.push(overlay);
      }
      
      // Handles clicks on the sign-in button.
      function onSignInButtonClick() {
        // Display popup allowing the user to sign in with their Google account and to
        // grant appropriate permissions to the app.
        ee.data.authenticateViaPopup(setUpMap);
      }
      
      // If the user is signed in, display a popup requesting permissions needed to
      // run the app, otherwise show the sign-in button.
      ee.data.authenticateViaOauth(
        // The OAuth Client ID defined above.
        CLIENT_ID,
        // Callback invoked immediately when user is already signed in.
        setUpMap,
        // Show authentication errors in a popup.
        alert,
        // Request permission to only read and compute Earth Engine data on behalf of
        // user.
        /* extraScopes = */ ['https://www.googleapis.com/auth/earthengine.readonly'],
        // Show sign-in button if reusing existing credentials fails.
        () => document.getElementById("g-sign-in").removeAttribute("hidden"),
        // Don't require ability to write and access Cloud Platform on behalf of the
        // user.
        /* opt_suppressDefaultScopes = */ true
      );
    </script>
  </body>
</html>