Steuerfelder
Ein ui.Panel ist ein UI-Container auf oberster Ebene, in dem Widgets angeordnet werden. Jedes ui.Panel hat ein ui.Panel.Layout-Objekt, das festlegt, wie die Widgets auf dem Bildschirm angeordnet werden. Weitere Informationen finden Sie im Abschnitt Layouts. In Steuerfeldbereichen wird auch eine Liste der Widgets verwaltet, die ihnen hinzugefügt wurden. Dazu gehören möglicherweise auch andere Steuerfeldbereiche. Wenn Sie Widgets im Steuerfeld verwalten möchten, add() oder remove() sie aus dem Steuerfeld oder rufen Sie die Liste der Widgets auf, indem Sie im Steuerfeld widgets() eingeben. Die Widget-Liste ist eine Instanz von ui.data.ActiveList. Das bedeutet, dass Sie den Bereich konfigurieren können, indem Sie die Liste und die darin enthaltenen Widgets bearbeiten.
ui.root
Die ui.root ist eine feste Instanz einer ui.Panel für alles im Code-Editor unterhalb der horizontalen Leiste. Standardmäßig enthält es nur ein einziges Widget: die Standardkarte. Das Element bei ui.root.widgets().get(0) ist das Map-Objekt (eine Instanz von ui.Map), das standardmäßig im Code-Editor angezeigt wird. Neben dem Alias Map bietet die Standardkarte noch Geometrie-Bearbeitungstools. Um einen leeren Canvas zu erhalten, auf dem Sie Ihre Benutzeroberfläche erstellen können, clear() die Standardkarte aus ui.root:
ui.root.clear();
Alternativ können Sie die Standardkarte im Stammbereich ändern, indem Sie ihr Widgets hinzufügen. Stellen Sie sich eine Karte als Steuerfeld mit einem absoluten Layout vor (weitere Informationen finden Sie im Abschnitt zu Layouts). Im folgenden Beispiel wird eine Änderung der Standardkarte veranschaulicht:
// Load a VIIRS surface reflectance image and display on the map. var image = ee.Image('NOAA/VIIRS/001/VNP09GA/2022_06_05').select('M.*'); Map.addLayer(image, {bands: ['M5', 'M4', 'M3'], min: 0, max: 4e3, gamma: 1.5}); // Create the title label. var title = ui.Label('Click to inspect'); title.style().set('position', 'top-center'); Map.add(title); // Create a panel to hold the chart. var panel = ui.Panel(); panel.style().set({ width: '400px', position: 'bottom-right' }); Map.add(panel); // Register a function to draw a chart when a user clicks on the map. Map.style().set('cursor', 'crosshair'); Map.onClick(function(coords) { panel.clear(); var point = ee.Geometry.Point(coords.lon, coords.lat); var chart = ui.Chart.image.regions(image, point, null, 30); chart.setOptions({title: 'Band values'}); panel.add(chart); });
Beachten Sie, dass im Beispiel die Standardkarte (Map) so geändert wird, dass sie als Steuerfeld behandelt und Widgets hinzugefügt werden. Da Karten ein absolutes Layout haben, wird die Position eines Widgets auf einer Karte durch eine position-Eigenschaft der style-Eigenschaft des Widgets bestimmt. Weitere Informationen finden Sie im Abschnitt Absolutes Layout.
Wenn Sie einen Code-Editor-Link für einen anderen Nutzer freigeben, nimmt ui.root standardmäßig den größten Teil des Fensters ein. Der Texteditor, der Docs-Bereich und die Konsole sind ausgeblendet. Mit dem ui.root-Layout können Sie festlegen, wie andere Nutzer Ihr Script sehen.
Layouts
Mit Layouts wird festgelegt, wie Widgets in einem Steuerfeld angeordnet werden. Es gibt zwei Layoutoptionen, die unten beschrieben werden: das Fluss-Layout und das absolute Layout. Layouts werden mit der Klasse ui.Panel.Layout angegeben. Legen Sie das Layout eines Steuerfelds entweder im Konstruktor oder mit setLayout() fest. Die Reihenfolge, in der Widgets hinzugefügt werden, bestimmt, wie sie in einem Steuerfeld mit einem Flusslayout angeordnet werden. Die Eigenschaft position jedes Widgets style bestimmt, wie ein Widget in einem Infobereich mit absolutem Layout angeordnet wird. Wenn der Stil eines Widgets für das Layout, in dem es platziert ist, irrelevant ist, wird er ignoriert.
Ablauf
Bei einem Flusslayout werden Widgets in einer Zeile ('horizontal') oder einer Spalte ('vertical') angezeigt. Die Widgets werden in der Reihenfolge angeordnet, in der sie dem Steuerfeld hinzugefügt werden. Angenommen, Sie haben einem Steuerfeld die folgenden Schaltflächen hinzugefügt:
// Create a panel with vertical flow layout. var panel = ui.Panel({ layout: ui.Panel.Layout.flow('vertical'), style: {width: '300px'} }); // Add a bunch of buttons. for (var i = 0; i < 30; i++) { panel.add(ui.Button({label: 'Button ' + i, style: {stretch: 'horizontal'}})); } ui.root.clear(); ui.root.add(panel);
Das vertikale Layout sollte in etwa so aussehen:
Die width des Steuerfelds ist auf 300 Pixel und die stretch ist mit der Property style auf 'horizontal' festgelegt. Die Stileigenschaft stretch gilt für Widgets in einem Steuerfeld mit einem Flusslayout. Beispiel: {stretch: 'horizontal'} bedeutet, dass das Widget maximiert wird, um den verfügbaren horizontalen Bereich im Steuerfeld auszufüllen. Ändern Sie im vorherigen Beispiel den Typ des Flusslayouts in 'horizontal', damit die Schaltflächen in einer Zeile anstelle einer Spalte angeordnet werden.
In einem horizontalen Steuerfeld dehnt sich ein horizontal gestrecktes Widget so weit aus, dass es den verfügbaren Platz ausfüllt, nachdem alle anderen Widgets ihre natürliche Breite eingenommen haben. Wenn mehrere Widgets horizontal maximiert werden, wird der verfügbare horizontale Bereich auf sie aufgeteilt. Ein vertikal gestrecktes Widget wird so maximiert, dass es die Höhe des Bereichs ausfüllt.
In einem vertikalen Steuerfeld dehnt sich ein vertikal gestrecktes Widget so weit aus, dass es den verfügbaren Platz ausfüllt, nachdem alle anderen Widgets ihre natürliche Höhe eingenommen haben. Wenn mehr als ein Widget vertikal maximiert wird, wird der verfügbare vertikale Bereich auf diese verteilt. Ein horizontal gestrecktes Widget wird so maximiert, dass es die Gesamtbreite des Steuerfelds einnimmt.
Absolut
Bei einem absoluten Layout werden Widgets an Positionen im Steuerfeld platziert. Im Gegensatz zum Flusslayout wird die Position eines Widgets durch die position-Eigenschaft der style-Eigenschaft des Widgets bestimmt, nicht durch die Reihenfolge, in der es dem Steuerfeld hinzugefügt wird. Im folgenden Beispiel wird der Bereich root.ui mit einem absoluten Layout verwendet. Das Layout des Stammbereichs ist standardmäßig horizontal, kann aber mit ui.root.setLayout() festgelegt werden:
ui.root.clear(); ui.root.setLayout(ui.Panel.Layout.absolute()); // A function to make buttons labeled by position. function makeButton(position) { return ui.Button({ label: position, style: {position: position} }); } // Add labeled buttons to the panel. ui.root.add(makeButton('top-left')); ui.root.add(makeButton('top-center')); ui.root.add(makeButton('top-right')); ui.root.add(makeButton('middle-left')); ui.root.add(makeButton('middle-right')); ui.root.add(makeButton('bottom-left')); ui.root.add(makeButton('bottom-center')); ui.root.add(makeButton('bottom-right'));
Das Steuerfeld für das absolute Layout sollte in etwa so aussehen:
widgets()
Wenn Sie einem Steuerfeld ein Widget hinzufügen, wird es der Widget-Liste des Steuerfelds hinzugefügt. Wenn Sie widgets() im Steuerfeld aufrufen, wird ui.data.ActiveList zurückgegeben. Mit diesem Wert können Sie die Widgets im Steuerfeld bearbeiten. Im folgenden Beispiel werden einem Steuerfeld Widgets hinzugefügt, das Steuerfeld dem Stammsteuerfeld hinzugefügt und dann ein Diagramm aktualisiert, wenn der Nutzer auf die Karte klickt:
// Load and display NDVI data. var ndvi = ee.ImageCollection('NOAA/VIIRS/001/VNP13A1') .filterDate('2021-01-01', '2022-01-01').select('NDVI'); Map.addLayer( ndvi.median(), {min: 0, max: 10000, palette: ['99c199', '006400']}, 'NDVI'); // Configure the map. Map.setCenter(-94.84497, 39.01918, 8); Map.style().set('cursor', 'crosshair'); // Create an empty panel in which to arrange widgets. // The layout is vertical flow by default. var panel = ui.Panel({style: {width: '400px'}}) .add(ui.Label('Click on the map')); // Set a callback function for when the user clicks the map. Map.onClick(function(coords) { // Create or update the location label (the second widget in the panel) var location = 'lon: ' + coords.lon.toFixed(2) + ' ' + 'lat: ' + coords.lat.toFixed(2); panel.widgets().set(1, ui.Label(location)); // Add a red dot to the map where the user clicked. var point = ee.Geometry.Point(coords.lon, coords.lat); Map.layers().set(1, ui.Map.Layer(point, {color: 'FF0000'})); // Create a chart of NDVI over time. var chart = ui.Chart.image.series(ndvi, point, ee.Reducer.mean(), 200) .setOptions({ title: 'NDVI Over Time', vAxis: {title: 'NDVI'}, lineWidth: 1, pointSize: 3, }); // Add (or replace) the third widget in the panel by // manipulating the widgets list. panel.widgets().set(2, chart); }); // Add the panel to the ui.root. ui.root.add(panel);
In diesem Beispiel sehen Sie, dass zuerst Widgets mit add() zum Steuerfeld hinzugefügt werden. In der Callback-Funktion, die zum Zuordnen von Klicks registriert ist, wird stattdessen die Widget-Liste von panel geändert. Das dritte Widget (das vorhanden sein kann oder nicht) ist so konfiguriert, dass ein neues Diagramm mit dem NDVI im Zeitverlauf angezeigt wird. Weitere Informationen zu Funktionen zur Ereignisverarbeitung finden Sie auf der Seite „Ereignisse“.