UI

属性概述

属性详细信息

container HTMLElement

包含视图的 HTML 元素。

另请参阅

• View.container

declaredClass Stringreadonly inherited

起始版本：GeoScene Maps SDK for JavaScript 4.7

类的名称。声明的类名称格式化为 geoscene.folder.className。

height Numberreadonly

UI 容器的高度。

padding Object|Number

从容器或 View 的顶部、左侧、右侧和底部定义 UI 的边距。如果值是一个数字，它将用于填充容器的所有边。

默认值：{ left: 15, top: 15, right: 15, bottom: 15 }

示例

// Setting a single number to this property
ui.padding = 0;
// is the same as setting it on all properties of the object
ui.padding = { top: 0, left: 0, right: 0, bottom: 0 };

view MapView|SceneView

与 UI 组件相关联的视图。

width Numberreadonly

UI 容器的宽度。

方法概述

方法详细说明

add(component, position)

向 UI 中添加一个或多个 HTML 组件或微件。

参数

规范

component Widget|HTMLElement|String|Object|Array 要添加到 UI 的组件。这可以是微件实例、HTML 元素、表示 DOM 节点 ID 的字符串值或包含任何这些类型组合的数组。有关代码示例，请参阅下面的示例代码段。或者，您可以传递具有以下规范的对象数组。 规范 component Widget|HTMLElement|String 要添加到 UI 的组件。这可以是微件实例、HTML 元素、表示 DOM 节点 ID 的字符串值。 position String optional 视图中添加组件的位置。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。对于其他可能的值，"top"、"bottom"、"left” 和 "right" 是一致的放置。"leading" 和 "trailing” 值取决于浏览器是使用从右到左 (RTL) 还是从左到右 (LTR)。对于 LTR，"leading" 为左，"trailing" 为右。对于 RTL，"leading" 为右，"trailing" 为左。 可能值："bottom-leading"|"bottom-left"|"bottom-right"|"bottom-trailing"|"top-leading"|"top-left"|"top-right"|"top-trailing"|"manual" index Number optional 组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 top-* 时，值为 0 会将其置于最顶部，最左表示左下，最右表示右下。

position String|Object optional 视图中添加组件的位置。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。对于其他可能的值，"top"、"bottom"、"left” 和 "right" 是一致的放置。"leading" 和 "trailing” 值取决于浏览器是使用从右到左 (RTL) 还是从左到右 (LTR)。对于 LTR，"leading" 为左，"trailing" 为右。对于 RTL，"leading" 为右，"trailing" 为左。 规范 position String optional 视图中添加组件的位置。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。对于其他可能的值，"top"、"bottom"、"left” 和 "right" 是一致的放置。"leading" 和 "trailing” 值取决于浏览器是使用从右到左 (RTL) 还是从左到右 (LTR)。对于 LTR，"leading" 为左，"trailing" 为右。对于 RTL，"leading" 为右，"trailing" 为左。 可能值："bottom-leading"|"bottom-left"|"bottom-right"|"bottom-trailing"|"top-leading"|"top-left"|"top-right"|"top-trailing"|"manual" index Number optional 组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 top-* 时，值为 0 会将其置于最顶部，最左表示左下，最右表示右下。

示例

let toggle = new BasemapToggle({
  view: view,
  nextBasemap: "hybrid"
});
// Adds an instance of BasemapToggle widget to the
// top right of the view's container.
view.ui.add(toggle, "top-right");

// Adds multiple widgets to the top right of the view
view.ui.add([ compass, toggle ], "top-leading");

// Adds multiple components of different types to the bottom left of the view
view.ui.add([ searchWidget, "infoDiv" ], "bottom-left");

// Adds multiple components of various types to different view positions
view.ui.add([
  {
    component: compassWidget,
    position: "top-left",
    index: 0
  }, {
    component: "infoDiv",
    position: "bottom-trailing"
  }, {
    component: searchWidget,
    position: "top-right",
    index: 0
  }, {
    component: legendWidgetDomNode,
    position: "top-right",
    index: 1
  }
]);

addHandles(handleOrHandles, groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时，将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

// Handle gets removed when the object is destroyed.
this.addHandles(handle);

参数

handleOrHandles WatchHandle|WatchHandle[] 对象销毁后，标记为要移除的句柄。

groupKey * optional 标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键，则句柄将被添加到默认组。

empty(position)

从给定位置移除所有组件。

参数

position String optional 视图中添加组件的位置。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。对于其他可能的值，"top"、"bottom"、"left” 和 "right" 是一致的放置。"leading" 和 "trailing” 值取决于浏览器是使用从右到左 (RTL) 还是从左到右 (LTR)。对于 LTR，"leading" 为左，"trailing" 为右。对于 RTL，"leading" 为右，"trailing" 为左。 可能值："bottom-leading"|"bottom-left"|"bottom-right"|"bottom-trailing"|"top-leading"|"top-left"|"top-right"|"top-trailing"|"manual"

示例

// Removes all of the elements in the top-left of the view's container
// including the default widgets zoom and compass (if working in SceneView)
view.ui.empty("top-left");

find(id){HTMLElement|Widget}

通过微件或 DOM ID 查找组件。

参数

id String 组件 ID。

返回

类型	描述
HTMLElement | Widget	如果找到 id，则返回 Widget 或 HTMLElement，否则返回 null。

示例

let compassWidget = new Compass({
  view: view,
  id: "myCompassWidget" // set an id to get the widget with find
});

// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");

// Find the Widget with the specified ID
let compassWidgetFind = view.ui.find("myCompassWidget"))

hasHandles(groupKey){Boolean}inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组，则返回 true。

参数

groupKey * optional 组键。

返回

类型	描述
Boolean	如果存在指定的句柄组，则返回 true。

示例

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

move(component, position)

将一个或多个 UI 组件移动到指定位置。

参数

规范

component Widget|HTMLElement|String|Object|Array 要移动的组件。此值可以是微件实例、HTML 元素、表示 DOM 节点 ID 的字符串值或包含任何这些类型组合的数组。有关代码示例，请参阅下面的示例代码段。或者，您可以传递具有以下规范的对象数组。 规范 component Widget|HTMLElement|String 要移动的组件。这可以是微件实例、HTML 元素、表示 DOM 节点 ID 的字符串值。 position String optional 目标位置。未提供时，组件将放置在 UI 容器中。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。 可能值："bottom-leading"|"bottom-left"|"bottom-right"|"bottom-trailing"|"top-leading"|"top-left"|"top-right"|"top-trailing"|"manual" index Number optional 组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 top-* 时，值为 0 会将其置于最顶部，bottom-left 表示左下，bottom-right 表示右下。

position String|Object optional 目标位置。未提供时，组件将放置在 UI 容器中。 规范 position String optional 视图中添加组件的位置。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。 可能值："bottom-leading"|"bottom-left"|"bottom-right"|"bottom-trailing"|"top-leading"|"top-left"|"top-right"|"top-trailing"|"manual" index Number optional 组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 top-* 时，值为 0 会将其置于最顶部，最左表示左下，最右表示右下。

示例

// Moves the BasemapToggle widget from the view if added.
// See the example for add() for more context
view.ui.move(toggle, "bottom-leading");

// Moves the default zoom widget to the bottom left corner of the view's container
view.ui.move("zoom", "bottom-left");

// Moves multiple widgets to the bottom right of the view's UI
view.ui.move([ compass, toggle, "zoom" ], "bottom-right");

// Moves the legend to the topmost position in the top-right corner of the view's UI.
view.ui.move({component: legend, position: "top-right", index: 0});

remove(component)

从 UI 中移除一个或多个 HTML 组件或微件。

参数

component Widget|HTMLElement|String|Array 要从 UI 中移除的组件。这可以是微件实例、HTML 元素、表示 DOM 节点 ID 的字符串值或包含任何这些类型组合的数组。有关代码示例，请参阅下面的示例代码段。

示例

// Removes the BasemapToggle widget from the view if added.
// See the example for add() for more context
view.ui.remove(toggle);

// Removes the default zoom widget from the view's container
view.ui.remove("zoom");

// Removes multiple widgets from the view's UI
view.ui.remove([ compass, toggle, "zoom" ]);

removeHandles(groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数

groupKey * optional 要移除的组键或组键的数组或集合。

示例

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");