ListItemPanel

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    item.panel = {
      content: "legend"
    };
  }
});

属性概述

属性详细信息

className String

添加一个 CSS 类，用于设置代表面板的节点的样式。单击节点将打开和关闭面板。通常，此属性使用图标字体。GeoScene 图标字体会自动变为可用并可用于表示此内容。要使用这些提供的图标字体之一，您必须在类名前加上 geoscene-。例如，默认图标字体是 geoscene-icon-layer-list。

默认值：geoscene-icon-layer-list

content Widget|HTMLElement|String|Array

ListItem 面板中显示的内容。这可以是原始文本、Widget 实例、HTML 元素或这些元素的任何数组。

如果使用文本 legend，则将 Legend 微件的实例放置在内容中。

示例

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    item.panel = {
      content: "legend"
    };
  }
});

disabled Boolean

起始版本：GeoScene Maps SDK for JavaScript 4.25

如果为 true，则禁用 ListItem 面板，以便用户无法打开或与其交互。如果面板没有内容，或者其中包含没有活动内容的图例，则默认情况下将禁用该面板。

示例

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    if (!item.layer.visible){
      item.panel.disabled = true;
    }
  }
});

image String

用于表示面板的图像的 URL 或数据 URI。此属性将用作节点的背景图像。如果未指定 image 或 className，则将显示默认图标 。

listItem ListItem

面板的父 ListItem，表示地图中的图层。

open Boolean

指示面板的内容是否对用户打开和可见。这与 visible 属性不同，后者用于切换图标的可见性，用于控制内容是展开还是折叠。

默认值：false

示例

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    // The legend is open by default, but the user
    // is prevented from collapsing that content
    item.panel = {
      content: "legend",
      open: true,
      visible: false
    };
  }
});

title String

面板的标题。默认情况下，此标题与 ListItem 的标题相匹配。更改此值不会更改 LayerList 中 ListItem 的标题。

visible Boolean

指示包含图像或图标字体 的节点是否对用户可见。将此值设置为 false 将阻止用户切换面板内容的可见性。使用 open 以编程方式设置面板内容的可见性。

默认值：true

示例

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    // The legend is open by default, but the user
    // is prevented from collapsing that content
    item.panel = {
      content: "legend",
      open: true,
      visible: false
    };
  }
});