Earth Engine 사용자 인터페이스 API

Earth Engine은 ui 패키지를 통해 클라이언트 측 사용자 인터페이스 (UI) 위젯에 대한 액세스를 제공합니다. ui 패키지를 사용하여 Earth Engine 스크립트의 그래픽 인터페이스를 구성합니다. 이러한 인터페이스에는 버튼 및 체크박스와 같은 간단한 입력 위젯, 차트 및 지도와 같은 더 복잡한 위젯, UI 레이아웃을 제어하는 패널, UI 위젯 간의 상호작용을 위한 이벤트 핸들러가 포함될 수 있습니다. 코드 편집기 왼쪽의 문서 탭에서 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!');
});

이 코드를 이전 예시의 끝에 복사하고 실행을 클릭합니다. 이제 버튼을 클릭하면 두 메시지가 모두 콘솔에 출력됩니다.

UI 페이지를 사용하여 Earth Engine 스크립트의 UI 빌드에 대해 자세히 알아보세요. 위젯 페이지에서는 ui 패키지의 위젯을 시각적으로 둘러보고 기본 기능을 설명합니다. 패널 및 레이아웃 페이지에서는 위젯을 구성하고 정렬하는 데 사용할 수 있는 최상위 컨테이너와 레이아웃을 설명합니다. 이벤트 페이지에는 UI에서 위젯의 동작 및 상호작용을 구성하는 방법에 관한 세부정보가 나와 있습니다.