公告:所有在
2025 年 4 月 15 日之前注册使用 Earth Engine 的非商业项目都必须
验证是否符合非商业性质的资格条件,才能继续使用 Earth Engine。
Earth Engine 界面 API
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Earth Engine 通过 ui
软件包提供对客户端界面 (UI) 窗口小件的访问权限。使用 ui
软件包为 Earth Engine 脚本构建图形界面。这些接口可以包括简单的输入 widget(例如按钮和复选框)、更复杂的 widget(例如图表和地图)、用于控制界面布局的面板,以及用于界面 widget 之间互动的事件处理脚本。在代码编辑器左侧的 Docs 标签页中,探索 ui
API 的完整功能。以下示例使用 ui
软件包来演示用于创建 widget、定义用户点击 widget 时的行为以及显示 widget 的基本函数。
世界,你好!
此示例展示了控制台中显示的按钮的简单界面。点击该按钮后,系统会将“Hello, world!” 输出到控制台:
Code Editor (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()
的参数是另一个函数,每当用户点击按钮时,该函数都会运行。这种在事件发生时调用函数(“回调”函数)的机制称为“事件处理程序”,在界面库中被广泛使用。在此示例中,当用户点击该按钮时,该函数会向控制台输出“Hello, world!”。
可变性
请注意,与 ee.*
命名空间中的对象不同,ui.*
命名空间中的对象是可变的。因此,您无需在每次对对象调用实例函数时都将对象重新分配给变量。只需调用该函数即可更改(更改)该 widget。将以下代码附加到上一个示例会导致为按钮的点击事件注册另一个回调:
Code Editor (JavaScript)
// Set another callback function on the button.
button.onClick(function() {
print('Oh, yeah!');
});
将此代码复制到上一个示例的末尾,然后点击运行。现在,当您点击该按钮时,系统会将这两条消息都输出到控制台。
通过界面页面,您可以详细了解如何为 Earth Engine 脚本构建界面。“Widgets”页面提供了直观的导览,并介绍了 ui
软件包中微件的基本功能。“面板和布局”页面介绍了可用于整理和排列微件的顶级容器和布局。“事件”页面详细介绍了如何配置界面中微件的行为和互动。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-28。
[null,null,["最后更新时间 (UTC):2025-07-28。"],[[["\u003cp\u003eEarth Engine's \u003ccode\u003eui\u003c/code\u003e package enables the creation of interactive graphical user interfaces (GUIs) for your Earth Engine scripts, incorporating various widgets like buttons, charts, and maps.\u003c/p\u003e\n"],["\u003cp\u003eUI widgets are mutable, allowing modification by directly calling their instance functions without reassignment.\u003c/p\u003e\n"],["\u003cp\u003eEvent handlers, such as \u003ccode\u003eonClick()\u003c/code\u003e, are utilized to define widget behavior in response to user interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe provided example demonstrates a simple button that prints a message to the console when clicked.\u003c/p\u003e\n"],["\u003cp\u003eComprehensive documentation on UI widgets, panels, layouts, and events is accessible through Earth Engine's guide pages.\u003c/p\u003e\n"]]],[],null,["# Earth Engine User Interface API\n\nEarth Engine provides access to client-side user interface (UI) widgets through the\n`ui` package. Use the `ui` package to construct graphical\ninterfaces for your Earth Engine scripts. These interfaces can include simple input\nwidgets like buttons and checkboxes, more complex widgets like charts and maps, panels\nto control the layout of the UI, and event handlers for interactions between UI\nwidgets. Explore the full functionality of the `ui` API in the\n**Docs** tab on the left side of the Code Editor. The following example uses\nthe `ui` package to illustrate basic functions for making a widget, defining\nbehavior for when the user clicks the widget, and displaying the widget.\n\nHello, world!\n-------------\n\nThis example represents a simple UI of a button displayed in the console. Clicking the\nbutton results in 'Hello, world!' getting printed to the console:\n\n### Code Editor (JavaScript)\n\n```javascript\n// Make a button widget.\nvar button = ui.Button('Click me!');\n\n// Set a callback function to run when the\n// button is clicked.\nbutton.onClick(function() {\n print('Hello, world!');\n});\n\n// Display the button in the console.\nprint(button);\n```\n\nObserve that first, the button is created with a single argument: its label. Next,\nthe button's `onClick()` function is called. The argument to\n`onClick()` is another function that will get run whenever the button is\nclicked. This mechanism of a function to be called (a \"callback\" function) when an\nevent happens is called an \"event handler\" and is used widely in the UI library. In this\nexample, when the button is clicked, the function prints 'Hello, world!' to the console.\n\nMutability\n----------\n\nNote that unlike objects in the `ee.*` namespace, objects within the\n`ui.*` namespace are mutable. So you don't need to reassign the object to a\nvariable every time you call an instance function on the object. Simply calling the\nfunction will mutate (change) the widget. Appending the following code to the previous\nexample results in registering another callback for the button's click event:\n\n### Code Editor (JavaScript)\n\n```javascript\n// Set another callback function on the button.\nbutton.onClick(function() {\n print('Oh, yeah!');\n});\n```\n\nCopy this code to the end of the previous example and click **Run**. Now\nwhen you click the button, both messages are printed to the console.\n\nUse the UI pages to learn more about building UIs for your Earth Engine scripts. The\n[Widgets page](/earth-engine/guides/ui_widgets) provides a visual tour and describes basic\nfunctionality of the widgets in the `ui` package. The [Panels\nand Layouts page](/earth-engine/guides/ui_panels) describes top-level containers and layouts you can use to organize\nand arrange widgets. The [Events page](/earth-engine/guides/ui_events) has details on configuring\nthe behavior and interaction of widgets in your UI."]]