如何在ArcGIS JavaScript API中将Layer List放入Expand组件？

开发者阿泽

2026-7-25

将Layer List添加到ArcGIS JS API的Expand组件中

实现逻辑和你已有的Basemap Gallery完全一致，核心是将LayerList实例赋值给Expand组件的content属性即可。以下是完整实现代码：

1. 导入所需模块（ES模块方式）

import LayerList from "@arcgis/core/widgets/LayerList";
import Expand from "@arcgis/core/widgets/Expand";

2. 创建LayerList实例

const layerList = new LayerList({
  view: view,
  // 可选配置：自定义图层项，比如添加图例、控制排序等
  listItemCreatedFunction: (event) => {
    const item = event.item;
    // 为每个图层项添加可展开的图例面板
    item.panel = {
      content: "legend",
      open: false
    };
    // 可选：禁止图层排序
    item.actionsSections = [];
  }
});

3. 创建Expand组件并关联LayerList

const layerListExpand = new Expand({
  view: view,
  content: layerList,
  // 自定义Expand的标题和内置图标
  title: "图层列表",
  icon: "layers"
});

4. 添加Expand到视图UI

view.ui.add(layerListExpand, "top-right");

可选：移动端自动折叠逻辑

如果需要像Basemap Gallery那样，在移动端操作图层后自动折叠Expand，可添加以下监听：

// 监听图层列表项变化，移动端自动折叠
layerList.watch("items", () => {
  const isMobile = view.heightBreakpoint === "xsmall" || view.widthBreakpoint === "xsmall";
  if (isMobile) {
    layerListExpand.collapse();
  }
});