위젯

UI를 빌드하는 데 사용할 수 있는 다양한 위젯이 있습니다. 이러한 위젯에는 버튼, 체크박스, 슬라이더, 텍스트 상자, 선택 메뉴가 포함됩니다. 위젯은 한 번만 인쇄하거나 패널에 추가할 수 있습니다. 다음 섹션에서는 위젯의 기본 기능, 모양, 느낌을 보여줍니다. 위젯 스타일 지정에 관한 자세한 내용은 스타일 섹션을 참고하세요. 다음 예에서는 간단히 위젯을 콘솔에 print()합니다. 패널에 위젯을 추가하는 방법에 관한 자세한 내용은 패널 및 레이아웃 페이지를 참고하세요.

ui.Label

라벨은 텍스트가 표시되는 영역입니다. 예를 들어 다음 코드는 라벨을 출력합니다.

코드 편집기 (JavaScript)

var label = ui.Label('Cool label!');
print(label);

다음과 같이 표시됩니다.

새 줄 문자 (\n)를 삽입하고 whiteSpace 스타일 속성 인수를 'pre'로 설정하여 긴 라벨을 나눕니다.

print(ui.Label('Here is a:\nnew line', {whiteSpace: 'pre'}));

ui.Button

버튼은 클릭할 수 있는 대화형 UI 위젯입니다. 사용자가 버튼을 클릭할 때 호출할 함수('콜백' 함수)를 지정할 수 있습니다. 콜백 함수로 이벤트를 처리하는 방법에 관한 자세한 내용은 이벤트 페이지를 참고하세요. 다음 예에서는 버튼이 클릭될 때 지도의 현재 중심을 출력합니다.

코드 편집기 (JavaScript)

var button = ui.Button({
  label: 'Get Map Center',
  onClick: function() {
    print(Map.getCenter());
  }
});
print(button);

다음과 같이 표시됩니다.

ui.Checkbox

체크박스는 사용자가 체크박스를 선택하거나 선택 해제할 수 있는 위젯입니다. 체크박스의 상태가 변경되면 위젯에 등록된 콜백에 체크박스가 선택되었는지 여부를 나타내는 불리언 값이 전달됩니다. 예를 들면 다음과 같습니다.

코드 편집기 (JavaScript)

var checkbox = ui.Checkbox('Show SRTM layer', true);

checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
  Map.layers().get(0).setShown(checked);
});

Map.addLayer(ee.Image('CGIAR/SRTM90_V4'));
print(checkbox);

인쇄된 체크박스는 다음과 같이 표시됩니다.

체크박스를 선택하면 지도에 표시되는 레이어가 사용 설정됩니다. 다른 UI 구성요소와 마찬가지로 코드 편집기의 지도는 프로그래매틱 방식으로 조작할 수 있습니다. 패널 및 레이아웃 페이지에서 지도 객체에 대해 자세히 알아보세요.

ui.Slider

슬라이더는 사용자가 슬라이더를 조정하여 슬라이더 범위 내의 숫자를 가져올 수 있는 위젯입니다. 생성자 또는 슬라이더의 속성을 설정하여 범위를 구성합니다. 다음 예에서는 슬라이더를 사용하여 지도의 첫 번째 레이어 불투명도를 설정합니다.

코드 편집기 (JavaScript)

var slider = ui.Slider();

slider.setValue(0.9);  // Set a default value.
slider.onChange(function(value) {
  Map.layers().get(0).setOpacity(value);
});

Map.addLayer(ee.Image(255), {palette: 'blue'});
print(slider);

슬라이더는 다음과 같이 표시됩니다.

슬라이더 값은 슬라이더 오른쪽에 표시됩니다.

ui.DateSlider

DateSlider 위젯은 Slider 위젯과 비슷하지만 날짜를 명시적으로 처리합니다. 2018년 6월의 날짜를 선택하도록 구성된 DateSlider는 다음과 같습니다.

DateSlider는 DateSlider에 설정된 DateRange를 기반으로 연간 합성물을 빌드하는 다음 예와 같이 컬렉션을 필터링하는 데 유용합니다.

코드 편집기 (JavaScript)

// Use a DateSlider to create annual composites of this collection.
var collection = ee.ImageCollection('LANDSAT/LC08/C02/T1');
// Use the start of the collection and now to bound the slider.
var start = ee.Image(collection.first()).date().get('year').format();
var now = Date.now();
var end = ee.Date(now).format();

// Run this function on a change of the dateSlider.
var showMosaic = function(range) {
  var mosaic = ee.Algorithms.Landsat.simpleComposite({
    collection: collection.filterDate(range.start(), range.end())
  });
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var visParams = {bands: ['B4', 'B3', 'B2'], max: 100};
    var layer = ui.Map.Layer(mosaic, visParams, name + ' composite');
    Map.layers().set(0, layer);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showMosaic,
    style: {width: '180px'}
  });
  Map.add(dateSlider.setValue(now));
});

// Initialize the map location at southern Africa.
Map.setCenter(23.861, -27.144, 6);

ui.Textbox

텍스트 상자는 사용자가 입력한 텍스트를 수집하는 장소입니다. 예를 들면 다음과 같습니다.

코드 편집기 (JavaScript)

var textbox = ui.Textbox({
  placeholder: 'Enter text here...',
  onChange: function(text) {
    print('So what you are saying is ' + text + '?');
  }
});
print(textbox);

텍스트 상자는 다음과 같이 표시됩니다.

콜백은 사용자가 텍스트 입력을 완료하고 (그리고 return을 눌렀을 때) 또는 사용자가 텍스트 상자를 클릭할 때만 실행됩니다.

ui.Select

선택 위젯은 사용자가 선택할 수 있는 옵션의 드롭다운 메뉴를 나타냅니다. 다음 예는 사용자가 위치를 선택할 수 있는 드롭다운 메뉴를 보여줍니다.

코드 편집기 (JavaScript)

var places = {
  MTV: [-122.0849, 37.3887],
  PEK: [116.4056, 39.9097],
  ZRH: [8.536, 47.376]
};

var select = ui.Select({
  items: Object.keys(places),
  onChange: function(key) {
    Map.setCenter(places[key][0], places[key][1]);
  }
});

// Set a place holder.
select.setPlaceholder('Choose a location...');

print(select);

선택 위젯은 다음과 같이 표시됩니다.

ui.Chart

ui.Chart 패키지의 차트는 Chart 패키지의 차트와 유사하게 동작합니다. 특히 ui.Chart는 Google Visualization API의 ChartWrapper 인스턴스 주위에 있는 얇은 셸입니다. ChartWrapper 객체 조작에 관한 자세한 내용은 이 참조를 참고하세요. Earth Engine의 차트 도우미 함수에 관한 자세한 내용은 차트 문서를 참고하세요.

ui.Thumbnail

썸네일 위젯을 사용하여 ee.Image 및 ee.ImageCollection 객체를 미리 볼 수 있습니다. ee.Image이 주어지면 위젯은 정적 이미지를 표시하고, ee.ImageCollection이 주어지면 입력의 이미지당 프레임 1개가 있는 애니메이션을 표시합니다. ee.Image.getThumbURL() 및 ee.ImageCollection.getVideoThumbURL()와 마찬가지로 매개변수를 지정하여 결과 썸네일의 형식과 크기를 제어할 수 있습니다.

코드 편집기 (JavaScript)

// Create a box around an area in the Brazilian Amazon.
var box = ee.Geometry.Polygon([[
  [-62.9564, 2.5596], [-62.9550, 2.4313], [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);

// Visualize the image in RGB.
var image = ee.Image('LANDSAT/LE07/C02/T1_L2/LE07_233058_20011113')
                .select(['SR_B[1-3]'])  // blue, green, red reflectance
                .multiply(0.0000275).add(-0.2)  // apply scaling factors
                .visualize({
                  bands: ['SR_B3', 'SR_B2', 'SR_B1'],
                  min: 0,
                  max: 0.12,
                  gamma: 1.3
                });

// Print a thumbnail to the console.
print(ui.Thumbnail({
  image: image,
  params: {dimensions: '256x256', region: box, format: 'png'},
  style: {height: '300px', width: '300px'}
}));

썸네일은 다음과 같이 표시됩니다.

ui.Map

ui.Map는 지도 위젯입니다. (실제로 기본 코드 편집기 지도는 이 클래스의 인스턴스입니다.) 다른 위젯과 마찬가지로 지도도 콘솔에 출력할 수 있습니다. 개별 레이어를 지우거나 가져오거나 설정하여 지도의 콘텐츠를 조작합니다. 다음 예에서는 코드 편집기 지도의 경계를 보여주는 지도를 콘솔에 출력합니다.

코드 편집기 (JavaScript)

// Make a little map.
var map = ui.Map();

// Make the little map display an inset of the big map.
var createInset = function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  map.centerObject(bounds);
  map.clear();
  map.addLayer(bounds);
};

// Run it once to initialize.
createInset();

// Get a new inset map whenever you click on the big map.
Map.onClick(createInset);

// Display the inset map in the console.
print(map);

삽입 지도의 모양은 다음과 같습니다.

이 예에서는 사용자가 큰 지도를 클릭해야 작은 지도에 삽입된 지도를 그릴 수 있습니다.

지도 인스턴스에서 layers()를 호출하여 지도의 레이어를 조작할 수도 있습니다. layers()는 배열과 유사한 객체인 ui.data.ActiveList를 반환합니다. 이를 변경하면 지도의 레이어도 변경됩니다. ui.Map.Layer 섹션에서 자세히 알아보세요.

ui.Map.Layer

레이어는 ui.Button와 같이 스타일 지정이 가능한 위젯이 아닙니다. 지도에서 레이어를 나타내는 데이터 표현일 뿐입니다. 다음 예에서는 레이어를 만들고 사용자 입력을 기반으로 레이어의 속성을 업데이트하여 지도를 업데이트하는 방법을 보여줍니다.

코드 편집기 (JavaScript)

var consoleMap = ui.Map({
  lon: -2.0174,
  lat: 48.6474,
  zoom: 13
});

// Create a Layer from this Sentinel-2 image
var image = ee.Image('COPERNICUS/S2/20150821T111616_20160314T094808_T30UWU');
var visParams = {bands: ['B4', 'B3', 'B2'], max: 2048, gamma: 1};
var layer = ui.Map.Layer(image, visParams);

// Update the map by updating the layers list.
var layers = consoleMap.layers();
layers.add(layer);

// Make a textbox to accept a gamma value.
// Update the layer when the gamma value is entered.
var gammaBox = ui.Textbox({
  value: 1,
  onChange: function(value) {
    // visParams is NOT an ActiveDictionary, so set it again.
    visParams.gamma = value;
    layer.setVisParams(visParams);
  }
});

print(ui.Label('Enter a gamma value:'));
print(gammaBox);
print(consoleMap);

ui.Map.CloudStorageLayer

계산 비용이 상대적으로 많이 드는 레이어를 표시하려는 경우 (예: 앱) 성능상의 이유로 데이터를 Cloud Storage 버킷으로 내보내는 것이 좋습니다. 이러한 정적 시각화 전용 레이어를 사용하면 앱과 스크립트의 응답성을 높일 수 있습니다. 이 용도로 Export.map.toCloudStorage()를 사용하여 정적 디스플레이 영역을 만들 수 있습니다. 이전에 Export.map.toCloudStorage()로 내보낸 타일 세트를 사용하려면 지정된 Cloud Storage 버킷과 경로에서 새 ui.Map.Layer를 만듭니다.

Map.add(ui.Map.CloudStorageLayer({
  bucket: 'earthenginepartners-hansen',
  path: 'tiles/gfc_v1.4/loss_year',
  maxZoom: 12,
  suffix: '.png'
}));

Cloud Storage 레이어를 로드하는 스크립트를 실행하면 다음과 같은 경고 메시지가 표시될 수 있습니다.

ui.Map.DrawingTools

코드 편집기의 Map에 기본적으로 추가되는 도형 그리기 도구 세트가 있습니다. Map.drawingTools()를 호출하여 기본 Map에서 이러한 도구의 동작을 변경할 수 있습니다. 예를 들어 그리기 도구를 숨기려면 다음을 실행합니다.

코드 편집기 (JavaScript)

Map.drawingTools().setShown(false);

새로 만든 지도에는 기본적으로 그리기 도구가 없지만 지도에서 drawingTools() 메서드를 호출하여 사용 설정할 수 있습니다.

코드 편집기 (JavaScript)

var map = ui.Map();
// Prints true since drawingTools() adds drawing tools to the map.
print(map.drawingTools().getShown());
// Replace the default Map with the newly created map.
ui.root.widgets().reset([map]);

그리기 도구로 그린 도형 레이어는 Map.drawingTools().layers()를 호출하여 액세스할 수 있는 ui.data.ActiveList에 배치됩니다. 도형 레이어 목록은 Map.layers()에서 반환된 Map의 레이어 목록과 같은 다른 활성 목록과 마찬가지로 이벤트에 응답합니다. 다음 예에서는 도구로 그려진 도형 레이어의 표시 설정 방법을 보여줍니다 (기본적으로 표시됨).

코드 편집기 (JavaScript)

Map.drawingTools().layers().forEach(function(layer) {
  layer.setShown(false);
});

그리기 도구에 프로그래매틱 방식으로 레이어를 추가하려면 그리기 도구에서 addLayer 메서드를 호출하거나 레이어 목록에 레이어를 직접 추가하면 됩니다.

코드 편집기 (JavaScript)

var geometries = [ee.Geometry.Point([0,0]), ee.Geometry.Rectangle([[0,0], [1,1]])];
Map.drawingTools().addLayer(geometries, 'my_geometry1', 'red');

var layer = ui.Map.GeometryLayer(geometries, 'my_geometry2', 'blue');
Map.drawingTools().layers().add(layer);

그리기 도구의 상태는 앱을 게시할 때도 전달됩니다. 그리기 도구가 표시되거나 숨겨져 있으면 앱에서도 표시되거나 숨겨집니다. 가져오기의 도형도 앱에 전달됩니다.

ui.Map.GeometryLayer

GeometryLayer는 단일 Geometry, GeometryCollection 또는 FeatureCollection 역할을 하는 도형 모음으로, 스크립트 상단의 가져오기 섹션에 추가되며 코드에서 참조할 수 있습니다.

그리기 도구로 그려진 GeometryLayer에는 새 콜백 함수를 제공하여 재정의할 수 있는 기본 동작이 있습니다. 예를 들어 도형을 대화형으로 변경하여 이벤트를 트리거하려고 한다고 가정해 보겠습니다. 특정 동작을 구현하려면 사용자 작업에 응답하기 위해 도구에서 onEdit(), onErase() 또는 onDraw() 메서드를 설정하면 됩니다. 다음 예는 사용자가 도형을 추가/수정/삭제할 때 계산을 트리거하고 계산 결과로 라벨을 업데이트하는 방법을 보여줍니다.

코드 편집기 (JavaScript)

// Load elevation data.
var srtm = ee.Image('USGS/SRTMGL1_003');
Map.addLayer(srtm, {min: 0, max: 5000}, 'SRTM');

// Make a label to display mean elevation at drawn points.
var label = new ui.Label('Draw points to calculate mean elevation');
var inspector = new ui.Panel([label]);
Map.add(inspector);
// Don't make imports that correspond to the drawn points.
Map.drawingTools().setLinked(false);
// Limit the draw modes to points.
Map.drawingTools().setDrawModes(['point']);
// Add an empty layer to hold the drawn points.
Map.drawingTools().addLayer([]);
// Set the geometry type to be point.
Map.drawingTools().setShape('point');
// Enter drawing mode.
Map.drawingTools().draw();

// This function gets called when the geometry layer changes.
// Use debounce to call the function at most every 100 milliseconds.
var getAverageElevation = ui.util.debounce(function() {
  var points = Map.drawingTools().layers().get(0).toGeometry();
  var elevation = srtm.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: points,
    scale: 30
  }).get('elevation');
  // Asynchronously evaluate the mean elevation.
  elevation.evaluate(showElevation);
}, 100);

// Set the callback function on changes of the geometry layer.
Map.drawingTools().onEdit(getAverageElevation);
Map.drawingTools().onDraw(getAverageElevation);
Map.drawingTools().onErase(getAverageElevation);

// Set the label to the result of the mean reduction.
function showElevation(elevation) {
  inspector.clear();
  var elevationLabel = ui.Label('Mean elevation: ' + elevation);
  inspector.add(elevationLabel);
}

setLinked()는 도형 그리기 도구와 Code Editor의 가져오기 섹션 간의 연결을 전환하는 데 사용됩니다. 이 예에서는 가져오기가 생성되지 않도록 도형 도구의 연결이 해제되어 있습니다. toGeometry는 레이어를 ee.Geometry로 변환하는 데 사용됩니다. 가져온 레이어가 Feature 또는 FeatureCollection를 나타내는 경우 getEeObject()를 사용하여 기본 EE 객체를 가져올 수 있습니다. 또한 도형의 각 움직임이 콜백 함수를 트리거하지 않도록 ui.util.debounce를 사용합니다. 특히 마지막 이벤트 이후 100밀리초가 지나야 함수가 실행됩니다. 이렇게 하면 사용자가 수정 작업을 완료한 경우에만 함수가 실행됩니다.

가져오기의 도형 레이어는 Geometry 또는 GeometryCollection와 연결되므로 동일한 지오데시ック 상태의 도형만 포함할 수 있습니다. GeoJSON 형식은 도형 컬렉션에 단일 지오데시ック 상태만 허용하기 때문입니다 (자세한 내용은 지오데시ック 도형과 평면 도형 비교 페이지 참고). 레이어 이름 옆에 있는 톱니바퀴 아이콘을 눌러 도형 레이어를 FeatureCollection로 변환하면 동일한 레이어에 지오데시ック 도형과 평면 도형을 추가할 수 있습니다. 하지만 다시 Geometry로 변환하면 오류가 발생합니다. 이를 방지하려면 FeatureCollection로 변환하거나 레이어에 지오데시ック 상태가 하나만 있을 때까지 도형을 삭제합니다.

ui.Map.Linker

레이어와 마찬가지로 링커는 스타일 지정 가능한 위젯이 아닙니다. 여러 ui.Map 인스턴스의 움직임을 동기화하는 데 사용할 수 있는 백그라운드 유틸리티입니다.

코드 편집기 (JavaScript)

// Add two maps to the screen.
var left = ui.Map();
var right = ui.Map();
ui.root.clear();
ui.root.add(left);
ui.root.add(right);

// Link the "change-bounds" event for the maps.
// When the user drags one map, the other will be moved in sync.
ui.Map.Linker([left, right], 'change-bounds');

ui.SplitPanel

ui.SplitPanel는 항목을 나란히 비교하는 데 유용합니다. 두 개의 일반 패널에 비해 ui.SplitPanel의 이점은 핸들을 사용하여 ui.SplitPanel의 패널 간에 와이프 전환을 실행할 수 있다는 것입니다. 다음 예에서는 ui.SplitPanel를 사용하여 화상 흉터의 스펙트럼 차이를 표시합니다.

코드 편집기 (JavaScript)

// Load an image of the Santa Rosa, California 2017 fires.
var image = ee.Image('LANDSAT/LC08/C02/T1_TOA/LC08_045033_20171011');

// Add a color-SWIR composite to the default Map.
Map.setCenter(-122.6624, 38.5011, 12);
Map.addLayer(image, {bands: ['B7', 'B5', 'B3'], max: 0.3}, 'color-SWIR');

// Make another map and add a color-NIR composite to it.
var linkedMap = ui.Map();
linkedMap.addLayer(image, {bands: ['B5', 'B4', 'B3'], max: 0.3}, 'color-NIR');
// Add a thermal image to the map.
linkedMap.addLayer(image, {
  bands: ['B11'],
  min: 290,
  max: 305,
  palette: ['gray', 'white', 'yellow', 'red']
}, 'Thermal');

// Link the default Map to the other map.
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

// Make an inset map and add it to the linked map.
var inset = ui.Map();
inset.style().set({position: 'bottom-right', width: '300px', height: '250px'});
inset.setControlVisibility({all: false, mapTypeControl: true});
linkedMap.add(inset);

// Register a function to the linked map to update the inset map.
linkedMap.onChangeBounds(function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  inset.centerObject(bounds);
  inset.layers().set(0, bounds);
});

// Create a SplitPanel which holds the linked maps side-by-side.
var splitPanel = ui.SplitPanel({
  firstPanel: linker.get(0),
  secondPanel: linker.get(1),
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

// Set the SplitPanel as the only thing in root.
ui.root.widgets().reset([splitPanel]);

사용자가 두 시각화 간에 핸들을 앞뒤로 스와이프할 수 있도록 wipe 매개변수는 ui.SplitPanel 생성자에 true로 설정됩니다.

위젯 스타일 지정

위젯의 스타일은 위젯의 스타일 속성 사전으로 제어됩니다. 위젯에서 style()를 호출하여 사전에 액세스할 수 있습니다. style()에서 반환된 객체는 ui.data.ActiveDictionary의 인스턴스입니다. 즉, 스타일 사전의 속성을 설정하면 위젯이 표시되는 방식이 자동으로 업데이트됩니다. 각 위젯의 스타일 사전에 허용되는 키는 style() 호출에 관한 위젯의 참조 문서에 자세히 설명되어 있습니다.

위젯의 스타일은 생성자를 사용하여 설정하거나, style().set()를 호출하거나, 사전 인수와 함께 style()를 호출하여 설정할 수 있습니다. 예를 들면 다음과 같습니다.

코드 편집기 (JavaScript)

var redLabel = ui.Label('Big, Red Label');

redLabel.style().set('color', 'red');
redLabel.style().set('fontWeight', 'bold');
redLabel.style().set({
  fontSize: '32px',
  padding: '10px'
});

print(redLabel);

이 예에서는 먼저 키 및 값 인수를 사용하여 style().set()를 호출한 다음 사전 인수를 사용하여 style().set()를 호출하여 라벨의 스타일을 지정합니다. 두 번째 호출은 첫 번째 호출을 재정의하지 않습니다. 전체 스타일 사전을 대체하는 대신 개별 스타일 속성을 추가하고 대체합니다.

위젯의 스타일 지정 옵션에 관한 자세한 내용은 각 위젯의 style() 문서에 나열된 스타일에 관한 이 CSS(캐스캐이딩 스타일 시트) 참조를 참고하세요. Earth Engine 위젯에 허용되는 스타일은 여러 위치(특히 font-style의 fontSize 및 font-weight의 fontWeight)에서 CSS 스타일과 다릅니다.

스타일 사전에는 위젯의 위치를 제어하는 키도 포함되어 있습니다. 위치 속성 사용 방법에 관한 자세한 내용은 패널 및 레이아웃 페이지를 참고하세요.