JavaScript ArcGIS Legend.style用法及代碼示例

基本信息

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

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

ESM: import Legend from "@arcgis/core/widgets/Legend";

類： esri/widgets/Legend

繼承: Legend > Widget > Accessor

自從：用於 JavaScript 4.0 的 ArcGIS API

用法說明

Legend.style函數(或屬性)的定義如下：

style Object | String

自從：ArcGIS 適用於 JavaScript 4.7 的 API

指示圖例的樣式。樣式決定了圖例的布局和行為。您可以指定一個字符串或一個對象來指示樣式。已知字符串值與 type 屬性內的表中列出的值相同。

屬性：

類型說明

type String

指定圖例的樣式。下表列出了兩個可能的值：

值	說明
classic	圖例具有縱向方向。當圖例的內容中包含許多元素時，用戶可以垂直滾動。
card	在寬視圖中，圖例具有橫向方向，允許用戶水平滾動以查看所有圖例元素。這種風格可以是響應式的，非常適合移動 Web 應用程序。在較小的視圖中，圖例會折疊以占用更少的空間。 card-style 布局中一次顯示一個元素，用戶可以水平導航。

可能的值："classic"|"card"

layout String

可選的

默認值：堆

當指定 card 類型時，您可以指定以下布局選項之一。

值	說明
auto	此布局是響應式的，因此在寬視圖中，圖例具有 `side-by-side` 布局，在較小(移動)視圖中具有 `stack` 布局。
並排	圖例具有橫向方向，允許用戶水平滾動以一次查看多個圖例卡。
stack	圖例卡片是堆疊的，這樣可以節省空間，但會限製用戶一次隻能看到一張卡片。

可能的值："auto"|"side-by-side"|"stack"

默認值：classic

例子：

// renders the legend in the card style with a "stack" layout
legend.style = "card";

// renders the legend in the card style with a responsive
// layout that toggles between "stack" and "side-by-side"
legend.style = {
  type: "card",
  layout: "auto"
};

// renders the legend in the classic layout
legend.style = "classic";

相關用法

注：本文由純淨天空篩選整理自arcgis.com大神的英文原創作品 Legend.style。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。