JavaScript ArcGIS DefaultUI.add用法及代碼示例

基本信息

以下是所在類或對象的基本信息。

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

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

類： esri/views/ui/DefaultUI

繼承: DefaultUI > UI > Accessor

自從：用於 JavaScript 4.0 的 ArcGIS API

用法說明

DefaultUI.add函數(或屬性)的定義如下：

add (component, position) inherited

將一個或多個 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大神的英文原創作品 DefaultUI.add。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。