JavaScript ArcGIS UI.add用法及代码示例

基本信息

以下是所在类或对象的基本信息。

AMD: require(["esri/views/ui/UI"], (UI) => { /* code goes here */ });

ESM: import UI from "@arcgis/core/views/ui/UI";

类： esri/views/ui/UI

继承: UI > Accessor

子类： DefaultUI

自从：用于 JavaScript 4.0 的 ArcGIS API

用法说明

UI.add函数(或属性)的定义如下：

add (component, position)

将一个或多个 HTML 组件或 widgets 添加到 UI。

参数：

规格：

类型说明

component Widget|HTMLElement|String|Object|Array

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

规格：

component Widget\|HTMLElement\|String	要添加到 UI 的组件。这可以是小部件实例、HTML 元素、表示 DOM 节点 ID 的字符串值。
position String	可选的视图中添加组件的位置。如果未指定，则默认使用`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	可选的组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 top-* 时，`0` 的值会将其放置在最顶部，最左边为左下角，最右边为右下角。

position String|Object

可选的

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

规格：

position

String

可选的

index

Number

可选的

组件的放置索引。该索引显示了相对于其他组件放置组件的位置。例如，当位置为 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
  }
]);

相关用法

注：本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 UI.add。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。