공지사항:
2025년 4월 15일 전에 Earth Engine 사용을 위해 등록된 모든 비상업용 프로젝트는 Earth Engine 액세스를 유지하기 위해
비상업용 자격 요건을 인증해야 합니다.
ui.SplitPanel
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
두 패널이 포함된 위젯으로, 패널 사이에 구분선이 있습니다. 구분선을 드래그하여 패널의 크기를 조절할 수 있습니다. 하나 또는 두 패널 모두 ui.Map 객체일 수 있습니다.
기본적으로 레이아웃은 50/50 분할로 초기화됩니다. 패널의 너비 및 max/minWidth 스타일은 가로 방향의 분할 크기를 제어합니다. 마찬가지로 세로에는 height와 max/minHeight를 사용합니다. 이 값은 픽셀(예: '{n}px') 또는 포함된 SplitPanel의 비율(예: '{n}%')로 지정할 수 있습니다.
분할 패널의 전체 너비는 독립적으로 제어되므로 첫 번째 패널 크기가 지정된 경우 두 번째 패널의 지정된 크기는 무시됩니다. 두 패널 모두에 최대/최소 크기를 설정할 수 있습니다.
| 사용 | 반환 값 |
|---|
ui.SplitPanel(firstPanel, secondPanel, orientation, wipe, style) | ui.SplitPanel |
| 인수 | 유형 | 세부정보 |
|---|
firstPanel | ui.Panel(선택사항) | 왼쪽 또는 상단 패널입니다. 기본값은 ui.Panel의 새 인스턴스입니다. |
secondPanel | ui.Panel(선택사항) | 하단 또는 오른쪽 패널 기본값은 ui.Panel의 새 인스턴스입니다. |
orientation | 문자열, 선택사항 | 'horizontal' 또는 'vertical' 중 하나입니다. 기본값은 'horizontal'입니다. |
wipe | 불리언, 선택사항 | 닦기 효과를 사용 설정할지 여부입니다. 이 모드를 사용 설정하면 두 패널이 사용 가능한 모든 공간을 차지하며, 구분선을 드래그하면 패널의 크기가 설정되는 것이 아니라 각 패널이 표시되는 정도가 결정됩니다. 이 효과는 '와이프 전환'과 유사합니다. 이 모드는 두 지도를 비교하는 데 유용합니다. 기본값은 false입니다. |
style | 객체, 선택사항 | 이 패널에 설정할 값이 있는 허용된 CSS 스타일의 객체입니다. 기본값은 빈 객체입니다. |
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-26(UTC)
[null,null,["최종 업데이트: 2025-07-26(UTC)"],[[["\u003cp\u003eThe \u003ccode\u003eui.SplitPanel\u003c/code\u003e widget divides a UI element into two resizable panels, horizontally or vertically.\u003c/p\u003e\n"],["\u003cp\u003ePanel sizes can be customized using width/height and min/max dimensions, expressed in pixels or percentages.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003ewipe\u003c/code\u003e option allows for a transition-like effect, ideal for comparing two map panels by overlaying them.\u003c/p\u003e\n"],["\u003cp\u003eThe split panel's default layout divides the space equally between the two panels.\u003c/p\u003e\n"],["\u003cp\u003eUsers can specify custom CSS styles to further customize the appearance of the \u003ccode\u003eui.SplitPanel\u003c/code\u003e.\u003c/p\u003e\n"]]],[],null,["# ui.SplitPanel\n\n\u003cbr /\u003e\n\nA widget containing two panels with a divider between them. The divider can be dragged, allowing the panels to be resized. One or both panels may be ui.Map objects.\n\n\u003cbr /\u003e\n\nBy default the layout initializes with a 50/50 split. The width and max/minWidth styles on the panels control the split sizing for horizontal orientations. Similarly, use height and max/minHeight for vertical. These can be given in pixels as '{n}px' or as a percentage of the containing SplitPanel as '{n}%'.\n\nNote that the given size for the second panel will be ignored if the first panel size is specified, since the overall width of the split panel is controlled independently. Max/min sizes may be set for both panels.\n\n| Usage | Returns |\n|--------------------------------------------------------------------------------------------|---------------|\n| `ui.SplitPanel(`*firstPanel* `, `*secondPanel* `, `*orientation* `, `*wipe* `, `*style*`)` | ui.SplitPanel |\n\n| Argument | Type | Details |\n|---------------|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `firstPanel` | ui.Panel, optional | The left or top panel. Defaults to a new instance of ui.Panel. |\n| `secondPanel` | ui.Panel, optional | The bottom or right panel. Defaults to a new instance of ui.Panel. |\n| `orientation` | String, optional | One of \"horizontal\" or \"vertical\". Defaults to \"horizontal\". |\n| `wipe` | Boolean, optional | Whether to enable the wiping effect. When this mode is enabled, both panels take up all available space, and dragging the divider doesn't set the size of the panels but rather determines how much of each panel is shown. This effect is analogous to a \"wipe transition\". This mode is useful for comparing two maps. Defaults to false. |\n| `style` | Object, optional | An object of allowed CSS styles with their values to be set for this panel. Defaults to an empty object. |"]]
