ArcGIS JS API 4.30：修改Search Widget多源下拉为复选框选择

ArcGIS JS API原生Search Widget默认仅支持单数据源选择，要实现复选框多选效果，需自定义UI并结合Widget API控制搜索范围，具体实现方案如下：

1. 隐藏原生数据源下拉框 #

通过CSS隐藏Search Widget自带的单选项下拉菜单：

.esri-search__sources-menu {
  display: none !important;
}

2. 创建自定义复选框组 #

在Search Widget容器内添加对应数据源的复选框组：

<div id="search-sources-checkbox" style="margin: 8px; display: flex; gap: 16px;">
  <label><input type="checkbox" value="DHKH" checked> DHKH</label>
  <label><input type="checkbox" value="DMA" checked> DMA</label>
</div>

3. 关联复选框与Search Widget数据源 #

监听复选框的选择事件，动态更新Search Widget的activeSources属性，确保搜索仅在选中的数据源中执行：

const searchWidget = new Search({
  view: view,
  allPlaceholder: "Search data",
  includeDefaultSources: false,
  sources: [
    {
      layer: url1,
      searchFields: ["ID"],
      suggestionTemplate: "ID",
      exactMatch: false,
      outFields: ["*"],
      name: "DHKH",
      placeholder: "example: 3708",
    },
    {
      layer: url2,
      searchFields: ["ID"],
      suggestionTemplate: "ID",
      exactMatch: false,
      outFields: ["*"],
      name: "DMA",
      placeholder: "example: 1102",
    },
  ],
});

// 将Search Widget添加到视图右上角
view.ui.add(searchWidget, {
  position: "top-right",
});

// 将自定义复选框组插入Search Widget容器
const checkboxGroup = document.getElementById("search-sources-checkbox");
searchWidget.container.appendChild(checkboxGroup);

// 监听复选框选择变化
checkboxGroup.addEventListener("change", (e) => {
  if (e.target.type !== "checkbox") return;
  
  // 获取所有选中的数据源名称
  const selectedNames = Array.from(checkboxGroup.querySelectorAll("input:checked"))
    .map(item => item.value.trim());
  
  // 更新Search Widget的活跃数据源
  searchWidget.activeSources = searchWidget.sources.filter(source => 
    selectedNames.includes(source.name.trim())
  );
});

额外说明 #

• 确保复选框的value与数据源配置的name严格匹配（注意处理空格等字符差异）
• 可通过自定义CSS调整复选框组样式，使其与ArcGIS原生UI风格对齐
• 若需要弹窗式选择面板，可将复选框组放入esri-popup类容器中，通过按钮触发显示

内容的提问来源于stack exchange，提问作者Minh Yến