javascript - 将 Earth Engine 代码嵌入到我的 AngularJS 应用程序中并在谷歌地图上应用 NDVI 层

Question

有没有人能够在他们的前端 JavaScript 代码中使用 Earth Engine API。我一直在尝试按照 earth-engine repo 上的演示在地图上应用图层但没有结果。我不知道到底出了什么问题，但功能 ee.data.authenticate 似乎没有触发，尽管我已将我的客户端 ID 传递给它。

Answer 1

您需要使用此处描述的客户端 OAuth 方法进行身份验证：https ://developers.google.com/earth-engine/npm_install 。除此之外，您还可以照常使用 Google Maps 和 Earth Engine API：

HTML：

<div id="map" style="width: 600px; height: 400px"></div>

JS：

// Load client library.
const ee = window.ee = require('@google/earthengine');
const CLIENT_ID = 'YOUR_CLIENT_ID';

window.initMap = function () {
  // Initialize client library.
  const initialize = function () {
    ee.initialize(null, null, () => {
      createMap();
    }, (e) => {
      console.error('Initialization error: ' + e);
    });
  };

  // Authenticate using an OAuth pop-up.
  ee.data.authenticateViaOauth(CLIENT_ID, initialize, (e) => {
    console.error('Authentication error: ' + e);
  }, null, () => {
    ee.data.authenticateViaPopup(initialize);
  });
};

function createMap() {
  // Initialize map.
  const mapEl = document.querySelector('#map');
  const map = new google.maps.Map(mapEl, {
    center: new google.maps.LatLng(39.8282, -98.5795),
    zoom: 5
  });

  // Load EE image.
  const image = ee.Image('srtm90_v4');
  image.getMap({ min: 0, max: 1000 }, ({ mapid, token }) => {

    // Create Google Maps overlay.
    const mapType = new google.maps.ImageMapType({
      getTileUrl: ({ x, y }, z) =>
        `https://earthengine.googleapis.com/map/${mapid}/${z}/${x}/${y}?token=${token}`,
      tileSize: new google.maps.Size(256, 256)
    });

    // Add the EE layer to the map.
    map.overlayMapTypes.push(mapType);

  });
}

在实际应用程序中，您还应该显示“登录”按钮，并且在此之前不要打开弹出窗口——否则浏览器的弹出窗口阻止可能会阻止它出现。