Earth Engine udostępnia widżety interfejsu użytkownika (UI) po stronie klienta za pomocą pakietu ui. Użyj pakietu ui do tworzenia interfejsów graficznych dla skryptów Earth Engine. Te interfejsy mogą zawierać proste widżety wejściowe, takie jak przyciski i pola wyboru, bardziej złożone widżety, takie jak wykresy i mapy, panele do kontrolowania układu interfejsu użytkownika oraz przetwarzacze zdarzeń do interakcji między widżetami interfejsu użytkownika. Zapoznaj się z pełną funkcjonalnością interfejsu ui API na karcie Dokumenty po lewej stronie edytora kodu. W tym przykładzie używamy pakietu ui, aby zilustrować podstawowe funkcje tworzenia widżetu, definiowanie zachowania po kliknięciu widżetu przez użytkownika oraz wyświetlanie widżetu.
Witaj, świecie!
Ten przykład przedstawia prosty interfejs przycisku wyświetlanego w konsoli. Po kliknięciu przycisku na konsoli zostanie wydrukowany tekst „Hello, world!”:
// Make a button widget. var button = ui.Button('Click me!'); // Set a callback function to run when the // button is clicked. button.onClick(function() { print('Hello, world!'); }); // Display the button in the console. print(button);
Zwróć uwagę, że najpierw przycisk jest tworzony z jednym argumentem: etykietą. Następnie wywoływana jest funkcja onClick() przycisku. Argument funkcji onClick() to kolejna funkcja, która będzie wykonywana po kliknięciu przycisku. Ten mechanizm wywoływania funkcji (czyli „wywołania zwrotnego”) po wystąpieniu zdarzenia nazywa się „obsługą zdarzenia” i jest szeroko stosowany w bibliotece interfejsu użytkownika. W tym przykładzie po kliknięciu przycisku funkcja wypisuje na konsoli „Hello, world!”.
Zmienność
Pamiętaj, że w przeciwieństwie do obiektów w przestrzeni nazw ee.* obiekty w przestrzeni nazw ui.* są zmienne. Dzięki temu nie musisz przypisywać obiektu do zmiennej za każdym razem, gdy wywołujesz funkcję instancji obiektu. Wywołanie funkcji spowoduje mutację (zmianę) widżetu. Dodanie tego kodu do poprzedniego przykładu powoduje zarejestrowanie kolejnego wywołania zwrotnego dla zdarzenia kliknięcia przycisku:
// Set another callback function on the button. button.onClick(function() { print('Oh, yeah!'); });
Skopiuj ten kod na koniec poprzedniego przykładu i kliknij Uruchom. Teraz, gdy klikniesz przycisk, oba komunikaty zostaną wydrukowane na konsoli.
Aby dowiedzieć się więcej o tworzeniu interfejsów dla skryptów Earth Engine, skorzystaj ze stron interfejsu. Widżety – strona z wizualnym omówieniem i opisem podstawowych funkcji widżetów w pakiecie ui. Na stronie Panele i układy znajdziesz informacje o kontenerach i układach najwyższego poziomu, których możesz używać do porządkowania i rozmieszczania widżetów. Na stronie Zdarzenia znajdziesz szczegółowe informacje o konfigurowaniu działania i interakcji widżetów w interfejsie użytkownika.