Tutoriel 6.2

L'extrait de code ci-dessous ajoute un panneau dans le côté gauche de l'application Web pour afficher du texte et des résultats de clics comme des valeurs et des graphiques.

// Maintenant, pour l'application web, nous voulons créer un panneau gauche qui affichera

// graphique des séries temporelles en cliquant sur la carte à l'intérieur de l'ulb

// Créons deux graphiques : i) les précipitations mensuelles et ii) l'ETIa décadaire de deux années

// Affiche également la valeur d'élévation lors d'un clic sur un pixel

 

///////////////////Insérer des panneaux pour afficher les graphiques et les résultats/////////

// Créons un panneau vide et ajoutons les autres panneaux en tant que sous-panneaux à celui-ci

var panel = ui.Panel({

    style: {fontSize: '20px', color: '114982'}

});

 

// Créez un panneau pour afficher des labels comme du texte

var text = ui.Panel([

  ui.Label({

    value: 'My first App',

    style: {fontSize: '30px', fontWeight: 'bold', color: '#2F4F4F'}

  }),

  ui.Label({

    value:'Click a point on the map to explore the variable over time',

    style: {fontSize: '14px', fontWeight: 'bold', maxWidth: '400px', color: '#2F4F4F'}

  }),

]);

// Ajoutez le nouveau panneau de texte au panneau de base.

panel.add(text);

 

// Créer un panneau pour afficher la valeur de l'élévation au clic

var inspector = ui.Panel([ui.Label('Click to get Elevation')]);

panel.add(inspector);

 

// Nous allons définir ci-dessous des panneaux pour afficher des objets dynamiques -

// Valeurs d'élévation, carte des précipitations, carte ETIa

 

Map.onClick(function(coords) {

   // Ajouter un graphe pour mettre le tableau des précipitations mensuelles

  var point = ee.Geometry.Point(coords.lon, coords.lat);

  var dot = ui.Map.Layer(point, {color: 'FF0000'});

  Map.layers().set(1, dot);

  var sample = dsm_ulb.sample(point, 30);

  var computedValue = sample.first().get('DSM');

  // Demander la valeur au serveur.

  computedValue.evaluate(function(result) {

  // Lorsque le serveur renvoie la valeur, l'afficher.

  inspector.widgets().set(0, ui.Label({

  value: 'Elevation: ' + result,

    }));

  });

    var chart1 = ui.Chart.image.series({

    imageCollection: pcp_monthly.select(['precipitation']),

    region: point, 

    reducer: ee.Reducer.mean(), 

    scale: 30

  });

  chart1.setOptions({

    title: 'Monthly Precipitation 2019',

    vAxis: {title: 'P (mm)', gridlines: {count: 10}},

    hAxis: {title: 'month', format: 'MM-yy', gridlines: {count: 10}},

    label: 'ETa',

    width: 250,

    height: 250,

    //interpolateNulls: true,

    //curveType: 'function'

  });

  chart1.setChartType('ColumnChart');

  panel.widgets().set(2, chart1);

       //////second graph

    var chart2 = ui.Chart.image.series({

    imageCollection: ETIa_filt.select('L1_AETI_D'),

    region: point, 

    reducer: ee.Reducer.mean(), 

    scale: 250

  });

  chart2.setOptions({

    title: 'Dekadal ETIa',

    vAxis: {title: 'ETIa', gridlines: {count: 10}, maxValue: 0.5, minValue: 0 },

    hAxis: {title: 'month', format: 'MM-yy', gridlines: {count: 10}},

    width: 250,

    height: 250,

    colors: ['#09F310'],

    interpolateNulls: true,

    curveType: 'function'

  });

  panel.widgets().set(3, chart2);

});

 

// Ajouter le panneau défini ci-dessus à la racine

ui.root.insert(0, panel);