Встраивание кода Earth Engine в мое приложение AngularJS и применение слоя NDVI на карте Google
Кто-нибудь смог использовать Earth Engine API в своем внешнем JavaScript-коде? Я пытался следовать демонстрации репозитория Earth-Engine, чтобы применить слой на карте, но безрезультатно. Я не знаю точно, что не так, но функция ee.data.authenticate, похоже, не срабатывает, хотя мне передали мой идентификатор клиента.
1 ответ
Вам нужно будет пройти аутентификацию, используя метод OAuth на стороне клиента, описанный здесь: https://developers.google.com/earth-engine/npm_install. Кроме того, вы можете использовать API Карт Google и Earth Engine как обычно:
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);
});
}
В реальном приложении вы также должны показать кнопку "Войти" и не открывать всплывающее окно до тех пор, иначе блокировка всплывающих окон в браузере может помешать его появлению.