Earth Engine 使用者介面 API

Earth Engine 透過 ui 套件提供用戶端端使用者介面 (UI) 小工具的存取權。使用 ui 套件為 Earth Engine 指令碼建構圖形介面。這些介面可包含簡單的輸入小工具，例如按鈕和核取方塊、較複雜的小工具 (例如圖表和地圖)、用於控制 UI 版面配置的面板，以及用於 UI 小工具之間互動的事件處理常式。在程式碼編輯器左側的「Docs」分頁中，探索 ui API 的完整功能。以下範例使用 ui 套件，說明製作小工具的基本函式、定義使用者點選小工具時的行為，以及顯示小工具。

向全世界問好！

這個範例代表主控台中顯示的按鈕簡易 UI。按一下按鈕後，主控台就會顯示「Hello, world!」：

程式碼編輯器 (JavaScript)

// 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);

請注意，按鈕一開始是使用單一引數 (標籤) 建立。接著，系統會呼叫按鈕的 onClick() 函式。onClick() 的引數是另一個函式，每次按下按鈕時就會執行。發生事件時要呼叫的函式 (稱為「回呼」函式) 這種機制稱為「事件處理常式」，在 UI 程式庫中廣泛使用。在這個範例中，當使用者點選按鈕時，函式會在控制台中輸出「Hello, world!」。

可變動性

請注意，與 ee.* 命名空間中的物件不同，ui.* 命名空間中的物件是可變動的。因此，您不必在每次對物件呼叫例項函式時，將物件重新指派給變數。只要呼叫函式，即可變異 (變更) 小工具。將下列程式碼附加至先前的範例，會為按鈕的點擊事件註冊另一個回呼：

程式碼編輯器 (JavaScript)

// Set another callback function on the button.
button.onClick(function() {
  print('Oh, yeah!');
});

將這段程式碼複製到先前的範例結尾，然後按一下「Run」。從現在開始，當您按一下按鈕時，兩則訊息都會印在主控台中。

請參閱「UI」頁面，進一步瞭解如何為 Earth Engine 指令碼建立 UI。「Widget 頁面」提供視覺導覽，並說明 ui 套件中 Widget 的基本功能。「面板和版面配置」頁面說明頂層容器和版面配置，可用於整理及排列小工具。如要進一步瞭解如何設定 UI 中小工具的行為和互動方式，請參閱「事件」頁面。