Widgets

Es gibt eine Vielzahl von Widgets, mit denen Sie Ihre UIs erstellen können. Dazu gehören Schaltflächen, Kästchen, Schieberegler, Textfelder und Auswahlmenüs. Widgets können nur einmal gedruckt oder einem Steuerfeld hinzugefügt werden. In den folgenden Abschnitten werden die grundlegenden Funktionen und das Erscheinungsbild der Widgets veranschaulicht. Weitere Informationen zum Stil Ihrer Widgets finden Sie im Abschnitt Stil. In den folgenden Beispielen werden die Widgets einfach print() in die Console kopiert. Weitere Informationen zum Hinzufügen von Widgets zu Steuerfelden finden Sie auf der Seite Steuerfelder und Layouts.

ui.Label

Labels sind einfach nur Bereiche, in denen Text angezeigt wird. Mit dem folgenden Code wird beispielsweise ein Label ausgegeben:

Code-Editor (JavaScript)

var label = ui.Label('Cool label!');
print(label);

Das sieht in etwa so aus:

Lange Labels können Sie durch Einfügen eines neuen Zeilenzeichens (\n) und Festlegen des Stileigenschaftsarguments whiteSpace auf 'pre' unterteilen:

print(ui.Label('Here is a:\nnew line', {whiteSpace: 'pre'}));

ui.Button

Eine Schaltfläche ist ein interaktives UI-Widget, das angeklickt werden kann. Sie können eine Funktion angeben, die aufgerufen werden soll (die „Callback“-Funktion), wenn ein Nutzer auf die Schaltfläche klickt. Weitere Informationen zur Ereignisbehandlung mit Rückruffunktionen finden Sie auf der Seite „Ereignisse“. Im folgenden Beispiel wird der aktuelle Mittelpunkt der Karte gedruckt, wenn auf die Schaltfläche geklickt wird:

Code-Editor (JavaScript)

var button = ui.Button({
  label: 'Get Map Center',
  onClick: function() {
    print(Map.getCenter());
  }
});
print(button);

Das sieht in etwa so aus:

ui.Checkbox

Ein Kästchen ist ein Widget, mit dem Nutzer ein Kästchen an- oder abwählen können. Wenn sich der Status des Kästchens ändert, wird an die für das Widget registrierten Callbacks ein boolescher Wert übergeben, der angibt, ob das Kästchen jetzt angeklickt ist. Beispiel:

Code-Editor (JavaScript)

var checkbox = ui.Checkbox('Show SRTM layer', true);

checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
  Map.layers().get(0).setShown(checked);
});

Map.addLayer(ee.Image('CGIAR/SRTM90_V4'));
print(checkbox);

Das Kästchen für die gedruckte Version sollte in etwa so aussehen:

Wenn Sie das Kästchen anklicken, wird eine Ebene aktiviert, die auf der Karte angezeigt wird. Wie bei anderen UI-Komponenten kann auch die Zuordnung des Code-Editors programmatisch manipuliert werden. Weitere Informationen zum Kartenobjekt finden Sie auf der Seite Steuerfelder und Layouts.

ui.Slider

Ein Schieberegler ist ein Widget, mit dem Nutzer einen Schieberegler anpassen können, um eine Zahl innerhalb des Schiebereglerbereichs zu erhalten. Konfigurieren Sie den Bereich entweder über den Konstruktor oder indem Sie die Eigenschaften des Schiebereglers festlegen. Im folgenden Beispiel wird mit dem Schieberegler die Deckkraft der ersten Ebene auf der Karte festgelegt:

Code-Editor (JavaScript)

var slider = ui.Slider();

slider.setValue(0.9);  // Set a default value.
slider.onChange(function(value) {
  Map.layers().get(0).setOpacity(value);
});

Map.addLayer(ee.Image(255), {palette: 'blue'});
print(slider);

Der Schieberegler sollte in etwa so aussehen:

Der Wert des Schiebereglers wird rechts neben dem Schieberegler angezeigt.

ui.DateSlider

Das DateSlider-Widget ähnelt dem Slider-Widget, verarbeitet aber Datumsangaben explizit. Eine DateSlider, die so konfiguriert ist, dass ein Tag im Juni 2018 ausgewählt wird, sieht so aus:

DateSlider ist nützlich zum Filtern von Sammlungen. Im folgenden Beispiel wird ein Jahreszusammenstellung basierend auf der DateRange erstellt, die in DateSlider festgelegt ist:

Code-Editor (JavaScript)

// Use a DateSlider to create annual composites of this collection.
var collection = ee.ImageCollection('LANDSAT/LC08/C02/T1');
// Use the start of the collection and now to bound the slider.
var start = ee.Image(collection.first()).date().get('year').format();
var now = Date.now();
var end = ee.Date(now).format();

// Run this function on a change of the dateSlider.
var showMosaic = function(range) {
  var mosaic = ee.Algorithms.Landsat.simpleComposite({
    collection: collection.filterDate(range.start(), range.end())
  });
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var visParams = {bands: ['B4', 'B3', 'B2'], max: 100};
    var layer = ui.Map.Layer(mosaic, visParams, name + ' composite');
    Map.layers().set(0, layer);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showMosaic,
    style: {width: '180px'}
  });
  Map.add(dateSlider.setValue(now));
});

// Initialize the map location at southern Africa.
Map.setCenter(23.861, -27.144, 6);

ui.Textbox

In einem Textfeld kann von Nutzern eingegebener Text erfasst werden. Beispiel:

Code-Editor (JavaScript)

var textbox = ui.Textbox({
  placeholder: 'Enter text here...',
  onChange: function(text) {
    print('So what you are saying is ' + text + '?');
  }
});
print(textbox);

Das Textfeld sollte in etwa so aussehen:

Der Callback wird nur ausgelöst, wenn der Nutzer die Texteingabe beendet und die Eingabetaste gedrückt hat oder den Fokus auf eine andere Stelle im Textfeld setzt.

ui.Select

Das Auswahl-Widget stellt ein Drop-down-Menü mit Optionen dar, aus dem der Nutzer eine auswählen kann. Das folgende Beispiel zeigt ein Drop-down-Menü, über das ein Nutzer einen Standort auswählen kann:

Code-Editor (JavaScript)

var places = {
  MTV: [-122.0849, 37.3887],
  PEK: [116.4056, 39.9097],
  ZRH: [8.536, 47.376]
};

var select = ui.Select({
  items: Object.keys(places),
  onChange: function(key) {
    Map.setCenter(places[key][0], places[key][1]);
  }
});

// Set a place holder.
select.setPlaceholder('Choose a location...');

print(select);

Das ausgewählte Widget sollte in etwa so aussehen:

ui.Chart

Die Diagramme im ui.Chart-Paket funktionieren ähnlich wie Diagramme im Chart-Paket. Konkret ist eine ui.Chart eine dünne Hülle um eine Instanz der ChartWrapper der Google Visualization API. Weitere Informationen zum Bearbeiten von ChartWrapper-Objekten finden Sie in dieser Referenz. Weitere Informationen zu den Diagramm-Hilfsfunktionen in Earth Engine finden Sie in der Diagrammdokumentation.

ui.Thumbnail

Mit dem Miniatur-Widget können Sie sich eine Vorschau von ee.Image- und ee.ImageCollection-Objekten ansehen. Wenn ein ee.Image übergeben wird, zeigt das Widget ein statisches Bild an. Wenn ein ee.ImageCollection übergeben wird, wird eine Animation mit einem Frame pro Bild in der Eingabe angezeigt. Wie bei ee.Image.getThumbURL() und ee.ImageCollection.getVideoThumbURL() kannst du Parameter angeben, um das Format und die Abmessungen des resultierenden Thumbnails zu steuern:

Code-Editor (JavaScript)

// Create a box around an area in the Brazilian Amazon.
var box = ee.Geometry.Polygon([[
  [-62.9564, 2.5596], [-62.9550, 2.4313], [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);

// Visualize the image in RGB.
var image = ee.Image('LANDSAT/LE07/C02/T1_L2/LE07_233058_20011113')
                .select(['SR_B[1-3]'])  // blue, green, red reflectance
                .multiply(0.0000275).add(-0.2)  // apply scaling factors
                .visualize({
                  bands: ['SR_B3', 'SR_B2', 'SR_B1'],
                  min: 0,
                  max: 0.12,
                  gamma: 1.3
                });

// Print a thumbnail to the console.
print(ui.Thumbnail({
  image: image,
  params: {dimensions: '256x256', region: box, format: 'png'},
  style: {height: '300px', width: '300px'}
}));

Das Thumbnail sollte in etwa so aussehen:

ui.Map

Ein ui.Map ist ein Karten-Widget. (Tatsächlich ist die Standardkarte des Code-Editors Map eine Instanz dieser Klasse.) Wie bei anderen Widgets können Sie eine Karte in der Konsole drucken. Sie können den Inhalt der Karte ändern, indem Sie einzelne Ebenen löschen, abrufen oder festlegen. Im folgenden Beispiel wird eine Karte in die Konsole ausgegeben, die die Grenzen der Code-Editor-Map zeigt:

Code-Editor (JavaScript)

// Make a little map.
var map = ui.Map();

// Make the little map display an inset of the big map.
var createInset = function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  map.centerObject(bounds);
  map.clear();
  map.addLayer(bounds);
};

// Run it once to initialize.
createInset();

// Get a new inset map whenever you click on the big map.
Map.onClick(createInset);

// Display the inset map in the console.
print(map);

Die Einblendkarte sollte in etwa so aussehen:

In diesem Beispiel muss der Nutzer auf die große Karte klicken, damit der Ausschnitt in der kleinen Karte gezeichnet wird.

Sie können auch Ebenen auf der Karte bearbeiten, indem Sie layers() für die Karteninstanz aufrufen. layers() gibt ein ui.data.ActiveList zurück, ein arraysähnliches Objekt. Wenn sich der Maßstab ändert, ändern sich auch die Ebenen auf der Karte. Weitere Informationen finden Sie im Abschnitt ui.Map.Layer.

ui.Map.Layer

Eine Ebene ist kein stilisierbares Widget wie ein ui.Button. Es ist nur eine Datendarstellung der Ebene auf der Karte. Im folgenden Beispiel wird gezeigt, wie eine Karte aktualisiert wird, indem eine Ebene erstellt und die Eigenschaften der Ebene basierend auf der Nutzereingabe aktualisiert werden:

Code-Editor (JavaScript)

var consoleMap = ui.Map({
  lon: -2.0174,
  lat: 48.6474,
  zoom: 13
});

// Create a Layer from this Sentinel-2 image
var image = ee.Image('COPERNICUS/S2/20150821T111616_20160314T094808_T30UWU');
var visParams = {bands: ['B4', 'B3', 'B2'], max: 2048, gamma: 1};
var layer = ui.Map.Layer(image, visParams);

// Update the map by updating the layers list.
var layers = consoleMap.layers();
layers.add(layer);

// Make a textbox to accept a gamma value.
// Update the layer when the gamma value is entered.
var gammaBox = ui.Textbox({
  value: 1,
  onChange: function(value) {
    // visParams is NOT an ActiveDictionary, so set it again.
    visParams.gamma = value;
    layer.setVisParams(visParams);
  }
});

print(ui.Label('Enter a gamma value:'));
print(gammaBox);
print(consoleMap);

ui.Map.CloudStorageLayer

Wenn Sie eine relativ rechenzintensive Ebene z.B. in einer App anzeigen möchten, sollten Sie Ihre Daten aus Leistungsgründen in einen Cloud Storage-Bucket exportieren. Mit diesen statischen, nur zur Visualisierung gedachten Ebenen können Sie Ihre Apps und Scripts reaktionsfähiger machen. Sie können dazu mit Export.map.toCloudStorage() eine statische Anzeigeebene erstellen. Wenn Sie einen zuvor mit Export.map.toCloudStorage() exportierten Ansichtssatz verwenden möchten, erstellen Sie eine neue ui.Map.Layer aus einem bestimmten Cloud Storage-Bucket und Pfad:

Map.add(ui.Map.CloudStorageLayer({
  bucket: 'earthenginepartners-hansen',
  path: 'tiles/gfc_v1.4/loss_year',
  maxZoom: 12,
  suffix: '.png'
}));

Wenn Sie ein Script ausführen, das eine Cloud Storage-Ebene lädt, wird möglicherweise die folgende Warnung angezeigt:

ui.Map.DrawingTools

Im Code-Editor werden dem Map standardmäßig mehrere geometrische Zeichentools hinzugefügt. Sie können das Verhalten dieser Tools in der Standard-Map ändern, indem Sie Map.drawingTools() aufrufen. So blenden Sie beispielsweise die Zeichentools aus:

Code-Editor (JavaScript)

Map.drawingTools().setShown(false);

Für neu erstellte Karten sind keine Zeichentools standardmäßig verfügbar. Sie können sie aber durch Aufrufen der Methode drawingTools() auf der Karte aktivieren:

Code-Editor (JavaScript)

var map = ui.Map();
// Prints true since drawingTools() adds drawing tools to the map.
print(map.drawingTools().getShown());
// Replace the default Map with the newly created map.
ui.root.widgets().reset([map]);

Die mit den Zeichentools gezeichneten Geometriestapel werden in eine ui.data.ActiveList eingefügt, auf die Sie über Map.drawingTools().layers() zugreifen können. Die Liste der Geometrieebenen reagiert auf Ereignisse wie andere aktive Listen, z. B. die Liste der Ebenen in der Map, die von Map.layers() zurückgegeben wird. Im folgenden Beispiel wird gezeigt, wie Sie die Sichtbarkeit der geometrischen Ebenen festlegen, die mit den Tools gezeichnet werden (standardmäßig werden sie angezeigt):

Code-Editor (JavaScript)

Map.drawingTools().layers().forEach(function(layer) {
  layer.setShown(false);
});

Wenn Sie den Zeichentools programmatisch eine Ebene hinzufügen möchten, können Sie entweder die Methode addLayer für die Zeichentools aufrufen oder eine Ebene direkt der Ebenenliste hinzufügen:

Code-Editor (JavaScript)

var geometries = [ee.Geometry.Point([0,0]), ee.Geometry.Rectangle([[0,0], [1,1]])];
Map.drawingTools().addLayer(geometries, 'my_geometry1', 'red');

var layer = ui.Map.GeometryLayer(geometries, 'my_geometry2', 'blue');
Map.drawingTools().layers().add(layer);

Der Status der Zeichentools wird auch bei der Veröffentlichung einer App übernommen. Wenn die Zeichentools angezeigt oder ausgeblendet sind, werden sie auch in Ihrer App angezeigt oder ausgeblendet. Die Geometrien in Ihren Importen werden ebenfalls in Ihre App übernommen.

ui.Map.GeometryLayer

Eine GeometryLayer ist eine Sammlung von Geometrien, die als einzelne Geometry, GeometryCollection oder FeatureCollection fungiert. Sie wird oben im Script im Abschnitt „Imports“ hinzugefügt und kann im Code referenziert werden.

Mit den Zeichentools gezeichnete GeometryLayers haben ein Standardverhalten, das Sie durch Angabe neuer Rückruffunktionen überschreiben können. Angenommen, Sie möchten, dass interaktive Änderungen an den Geometrien ein Ereignis auslösen. Wenn Sie ein bestimmtes Verhalten implementieren möchten, können Sie die Methoden onEdit(), onErase() oder onDraw() für die Tools festlegen, um auf Nutzeraktionen zu reagieren. Im folgenden Beispiel wird gezeigt, wie eine Berechnung ausgelöst und ein Label mit dem Berechnungsergebnis aktualisiert wird, wenn der Nutzer eine Geometrie hinzufügt, bearbeitet oder löscht:

Code-Editor (JavaScript)

// Load elevation data.
var srtm = ee.Image('USGS/SRTMGL1_003');
Map.addLayer(srtm, {min: 0, max: 5000}, 'SRTM');

// Make a label to display mean elevation at drawn points.
var label = new ui.Label('Draw points to calculate mean elevation');
var inspector = new ui.Panel([label]);
Map.add(inspector);
// Don't make imports that correspond to the drawn points.
Map.drawingTools().setLinked(false);
// Limit the draw modes to points.
Map.drawingTools().setDrawModes(['point']);
// Add an empty layer to hold the drawn points.
Map.drawingTools().addLayer([]);
// Set the geometry type to be point.
Map.drawingTools().setShape('point');
// Enter drawing mode.
Map.drawingTools().draw();

// This function gets called when the geometry layer changes.
// Use debounce to call the function at most every 100 milliseconds.
var getAverageElevation = ui.util.debounce(function() {
  var points = Map.drawingTools().layers().get(0).toGeometry();
  var elevation = srtm.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: points,
    scale: 30
  }).get('elevation');
  // Asynchronously evaluate the mean elevation.
  elevation.evaluate(showElevation);
}, 100);

// Set the callback function on changes of the geometry layer.
Map.drawingTools().onEdit(getAverageElevation);
Map.drawingTools().onDraw(getAverageElevation);
Map.drawingTools().onErase(getAverageElevation);

// Set the label to the result of the mean reduction.
function showElevation(elevation) {
  inspector.clear();
  var elevationLabel = ui.Label('Mean elevation: ' + elevation);
  inspector.add(elevationLabel);
}

Mit setLinked() können Sie die Verbindung zwischen den geometrischen Zeichentools und dem Bereich Importe im Code-Editor aktivieren oder deaktivieren. In diesem Beispiel sind die Geometrietools nicht verknüpft, um zu verhindern, dass Importe erstellt werden. toGeometry wird verwendet, um die Ebene in eine ee.Geometry zu konvertieren. Wenn die importierte Ebene eine Feature oder FeatureCollection darstellt, können Sie das zugrunde liegende EE-Objekt mit getEeObject() abrufen. Beachten Sie auch die Verwendung von ui.util.debounce, um zu verhindern, dass bei jeder Bewegung einer Geometrie die Rückruffunktion ausgelöst wird. Die Funktion wird erst ausgelöst, wenn 100 Millisekunden seit dem letzten Ereignis vergangen sind. So wird sichergestellt, dass die Funktion nur ausgeführt wird, wenn der Nutzer die Bearbeitung abgeschlossen hat.

Eine Geometriescheihe in den Importen ist mit einer Geometry oder GeometryCollection verknüpft. Sie kann daher nur Geometrien mit demselben geodätischen Status enthalten, da das GeoJSON-Format nur einen einzelnen geodätischen Status für die Sammlung von Geometrien zulässt. Weitere Informationen finden Sie auf der Seite Geodätische und ebene Geometrien. Wenn Sie die Geometrieebene in eine FeatureCollection konvertieren, indem Sie auf das Zahnradsymbol neben dem Ebenennamen klicken, können Sie derselben Ebene geodesische und ebene Geometrien hinzufügen. Wenn Sie sie jedoch wieder in eine Geometry konvertieren, wird ein Fehler ausgegeben. Um dies zu vermeiden, konvertieren Sie die Geometrie entweder in eine FeatureCollection oder löschen Sie Geometrieelemente, bis nur noch ein geodätischer Zustand in der Ebene vorhanden ist.

ui.Map.Linker

Wie eine Ebene ist auch ein Link kein stilisierbares Widget. Es ist ein Dienst, der im Hintergrund ausgeführt wird und mit dem sich die Bewegung mehrerer ui.Map-Instanzen synchronisieren lässt:

Code-Editor (JavaScript)

// Add two maps to the screen.
var left = ui.Map();
var right = ui.Map();
ui.root.clear();
ui.root.add(left);
ui.root.add(right);

// Link the "change-bounds" event for the maps.
// When the user drags one map, the other will be moved in sync.
ui.Map.Linker([left, right], 'change-bounds');

ui.SplitPanel

Ein ui.SplitPanel ist nützlich, um Dinge nebeneinander zu vergleichen. Der Vorteil eines ui.SplitPanel gegenüber zwei normalen Bereichen besteht darin, dass mit einem Ziehpunkt ein Wischübergang zwischen den Bereichen in einem ui.SplitPanel erzeugt werden kann. Im folgenden Beispiel werden mithilfe eines ui.SplitPanel die spektralen Unterschiede von Brandnarben dargestellt:

Code-Editor (JavaScript)

// Load an image of the Santa Rosa, California 2017 fires.
var image = ee.Image('LANDSAT/LC08/C02/T1_TOA/LC08_045033_20171011');

// Add a color-SWIR composite to the default Map.
Map.setCenter(-122.6624, 38.5011, 12);
Map.addLayer(image, {bands: ['B7', 'B5', 'B3'], max: 0.3}, 'color-SWIR');

// Make another map and add a color-NIR composite to it.
var linkedMap = ui.Map();
linkedMap.addLayer(image, {bands: ['B5', 'B4', 'B3'], max: 0.3}, 'color-NIR');
// Add a thermal image to the map.
linkedMap.addLayer(image, {
  bands: ['B11'],
  min: 290,
  max: 305,
  palette: ['gray', 'white', 'yellow', 'red']
}, 'Thermal');

// Link the default Map to the other map.
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

// Make an inset map and add it to the linked map.
var inset = ui.Map();
inset.style().set({position: 'bottom-right', width: '300px', height: '250px'});
inset.setControlVisibility({all: false, mapTypeControl: true});
linkedMap.add(inset);

// Register a function to the linked map to update the inset map.
linkedMap.onChangeBounds(function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  inset.centerObject(bounds);
  inset.layers().set(0, bounds);
});

// Create a SplitPanel which holds the linked maps side-by-side.
var splitPanel = ui.SplitPanel({
  firstPanel: linker.get(0),
  secondPanel: linker.get(1),
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

// Set the SplitPanel as the only thing in root.
ui.root.widgets().reset([splitPanel]);

Der Parameter wipe ist im Konstruktor von ui.SplitPanel auf true festgelegt, damit Nutzer den Schieberegler zwischen den beiden Visualisierungen hin- und herwischen können.

Widgets stylen

Der Stil eines Widgets wird durch das Dictionary der Stileigenschaften des Widgets gesteuert. Sie können auf das Wörterbuch zugreifen, indem Sie im Widget style() aufrufen. Das von style() zurückgegebene Objekt ist eine Instanz von ui.data.ActiveDictionary. Das bedeutet, dass die Darstellung des Widgets automatisch aktualisiert wird, wenn Sie die Eigenschaften des Stilwörterbuchs festlegen. Die zulässigen Schlüssel für das Stilwörterbuch jedes Widgets sind in der Referenzdokumentation des Widgets für den style()-Aufruf aufgeführt.

Die Stile des Widgets können mit dem Konstruktor festgelegt werden, indem style().set() oder style() mit einem Dictionary-Argument aufgerufen wird. Beispiel:

Code-Editor (JavaScript)

var redLabel = ui.Label('Big, Red Label');

redLabel.style().set('color', 'red');
redLabel.style().set('fontWeight', 'bold');
redLabel.style().set({
  fontSize: '32px',
  padding: '10px'
});

print(redLabel);

In diesem Beispiel wird das Label zuerst durch Aufrufen von style().set() mit Schlüssel- und Wertargumenten und dann durch Aufrufen von style().set() mit einem Wörterbuchargument formatiert. Der zweite Aufruf überschreibt den ersten nicht. Er fügt einzelne Stileigenschaften hinzu und ersetzt sie, anstatt das gesamte Stilwörterbuch zu ersetzen.

Weitere Informationen zu den Stiloptionen für Widgets finden Sie in dieser CSS-Referenz zu den Stilen, die in der style()-Dokumentation für jedes Widget aufgeführt sind. Die für Earth Engine-Widgets zulässigen Stile unterscheiden sich an mehreren Stellen von CSS-Stilen, insbesondere fontSize und fontWeight für font-style und font-weight.

Das Stilwörterbuch enthält auch Schlüssel, mit denen die Position des Widgets gesteuert wird. Weitere Informationen zur Verwendung von Positionierungseigenschaften finden Sie auf der Seite Steuerfelder und Layouts.