DefaultUI

DefaultUI 类公开了 MapView 或 SceneView 中可用的默认微件组件。此类还提供了一个简单的 API，用于在视图的 UI 中添加、移动和移除微件和其他 HTML 组件。

您通常不必创建此类的新实例，因为在 SceneView 和 MapView 的 ui 属性中提供了默认实例。

在视图的 UI 中添加或移动组件时，您可以指定位置。上部区域中的微件垂直堆叠，而下部区域中的微件水平堆叠。可用位置如下图所示。

views-ui-layout

add() 和 move() 等方法可用于将微件放置在 UI 的特定位置。在下图中，搜索和 BasemapToggle 微件使用 add() 方法放置在视图中。

let searchWidget = new Search({ view: view });
let bmToggleWidget = new BasemapToggle({
  view: view,
  nextBasemap: "hybrid"
});

view.ui.add(searchWidget, "top-right");
view.ui.add(bmToggleWidget, "bottom-right");

views-ui-demo

如果您深入研究 add()、empty() 和 move() 方法的文档，您会注意到一些可能的值包括 "leading" 和 "trailing”。这是因为 GeoScene API for Javascript 提供了双向支持。

对于从左到右 (LTR)，"leading" 为左，"trailing" 为右。对于从右到左 (RTL)，"leading" 为右，"trailing" 为左。

要启用从右到左 (RTL)，请将 <html> 或 <body> 标签中的 dir 属性设置为 rtl。

<html dir="rtl">

另请参阅

构造函数

new DefaultUI(properties)

参数

properties Object

optional

有关可能传递给构造函数的所有属性的列表，请参见属性。

属性概述

可以设置、检索或侦听任何属性。请参阅使用属性主题。

显示继承属性

隐藏继承属性

类型	描述	类
String []	字符串数组，表示在创建 MapView 或 SceneView 时可见的默认微件。更多详情	DefaultUI
HTMLElement	包含视图的 HTML 元素。更多详情	UI
String	类的名称。更多详情	Accessor
Number	UI 容器的高度。更多详情	UI
Object\|Number	从容器或 View 的顶部、左侧、右侧和底部定义 UI 的边距。更多详情	UI
MapView\|SceneView	与 UI 组件相关联的视图。更多详情	UI
Number	UI 容器的宽度。更多详情	UI

属性详细信息

components String []

字符串数组，表示在创建 MapView 或 SceneView 时可见的默认微件。MapView 和 SceneView 的默认微件不同。

以下是每个视图中的默认组件：

MapView: ["attribution", "zoom"]

SceneView: ["attribution", "navigation-toggle", "compass", "zoom"]

GeoScene 要求，当您在应用程序中使用 GeoScene Online 底图时，地图必须包含 GeoScene 属性，并且您必须获得使用内容的许可。

示例

// Removes all default UI components, except Attribution.
// Passing an empty array will remove all components.
view.ui.components = [ "attribution" ];

container HTMLElement inherited

包含视图的 HTML 元素。

另请参阅

View.container

declaredClass Stringreadonly inherited 起始版本：GeoScene Maps SDK for JavaScript 4.7

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

height Numberreadonly inherited

UI 容器的高度。

padding Object|Number inherited

从容器或 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 inherited

与 UI 组件相关联的视图。

width Numberreadonly inherited

UI 容器的宽度。

方法概述

显示继承的方法

隐藏继承的方法

返回值类值	描述	类
	向 UI 中添加一个或多个 HTML 组件或微件。更多详情	UI
	添加一个或多个与对象的生命周期相关联的句柄。更多详情	Accessor
	从给定位置移除所有组件。更多详情	UI
HTMLElement\|Widget	通过微件或 DOM ID 查找组件。更多详情	UI
Boolean	如果存在指定的句柄组，则返回 true。更多详情	Accessor
	将一个或多个 UI 组件移动到指定位置。更多详情	UI
	从 UI 中移除一个或多个 HTML 组件或微件。更多详情	UI
	移除对象拥有的句柄组。更多详情	Accessor

方法详细说明

add(component, position)inherited

向 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" 为左。

index Number

optional

组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 top-* 时，值为 0 会将其置于最顶部，最左表示左下，最右表示右下。

position String|Object

optional

规范

position String

optional

index Number

optional

示例

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)inherited

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

参数

position String

optional

示例

// 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}inherited

通过微件或 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)inherited

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

参数

规范

component Widget|HTMLElement|String|Object|Array

要移动的组件。此值可以是微件实例、HTML 元素、表示 DOM 节点 ID 的字符串值或包含任何这些类型组合的数组。有关代码示例，请参阅下面的示例代码段。或者，您可以传递具有以下规范的对象数组。

规范

component Widget|HTMLElement|String

要移动的组件。这可以是微件实例、HTML 元素、表示 DOM 节点 ID 的字符串值。

position String

optional

目标位置。未提供时，组件将放置在 UI 容器中。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。

index Number

optional

组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 top-* 时，值为 0 会将其置于最顶部，bottom-left 表示左下，bottom-right 表示右下。

position String|Object

optional

目标位置。未提供时，组件将放置在 UI 容器中。

规范

position String

optional

视图中添加组件的位置。如未指定，默认使用 manual。使用 manual 允许您将组件放置在容器中，然后可使用 CSS 将其放置在任何位置。

index Number

optional

示例

// 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)inherited

从 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");

GeoScene Maps SDK for JavaScript参考手册

构造函数

属性概述

属性详细信息

方法概述

方法详细说明