Arcgis构建器自定义小部件，从用户那里获取特定的字段和值来过滤数据

Question

我一直在为"Experience Builder Developer"；这应该像"；查询"；小部件，但具有更多的自定义功能。我的目标是构建一个小部件，允许用户从层字段中选择特定字段，然后从该字段值的列表中选择特定值"；唯一值"；

我已经获得了所有字段，并在下拉列表中查看它们，没有问题。接下来我的问题是，如果用户选择字段，我如何显示所有唯一的值？我已经搜索了文档和API，JS API，但没有明确的！！

import DatasourceList from 'dist/widgets/common/search/src/setting/component/dataSetting
/datasource-list'
import FeatureLayer from 'esri/layers/FeatureLayer'
import { React, AllWidgetProps, jsx, SqlQueryParams, DataSourceManager, QueriableDataSource, FeatureLayerDataSource, DataSource, FeatureDataRecord, DataSourceComponent } from 'jimu-core'
import { Dropdown, DropdownButton, DropdownItem, DropdownMenu, EsriSimpleLineSymbolStyle, Select } from 'jimu-ui'
import { FieldSelector } from 'jimu-ui/advanced/lib/data-source-selector/styles'
import { forEach } from 'lodash-es'
export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> {
fieldSelected: string
valueSelected: string
listOfFields: __esri.Field[]    //-- fields in the layer
dataSourceId
dataSource
dataLayer: FeatureLayerDataSource
layer: FeatureLayer
constructor(props) {
super(props);
this.InitilizeFields()
}
//-- load list of fields from layer
InitilizeFields = () =>{
//data source id from props that add from setting
this.dataSourceId = this.props.useDataSources?.[0]?.dataSourceId
//-- create data source
this.dataSource = this.dataSourceId && DataSourceManager.getInstance().getDataSource(this.dataSourceId) as QueriableDataSource
//-- create data layer
this.dataLayer = this.dataSourceId && DataSourceManager.getInstance().getDataSource(this.dataSourceId) as FeatureLayerDataSource
//-- create layer from js api
this.layer = this.dataLayer.layer
//-- set layer of fields
if (this.dataLayer){
//dataSource.updateQueryParams(this.fieldsQuery(), this.props.id)
this.listOfFields = this.layer.fields
}
}
//-- the query string to get fields only
fieldsQuery = (): SqlQueryParams =>{
console.log("Get Fields Query now")
return {
where: '(1=1)'
}
}
getAllValueQuery = (field: string): SqlQueryParams =>{
return{
where: '1=1',
orderByFields: [field]
}
}

//-- on field selected from drop down list
onFieldSelected = e =>{
const fieldIndex = e.target.value
const fieldSelected : __esri.Field = this.listOfFields[fieldIndex]
this.dataLayer.updateQueryParams(this.getAllValueQuery(fieldSelected.alias), this.props.id)
}
onDataSourceCreated = ()=>{
console.log("data source created")
}
render () {
return (

<div className="widget-demo jimu-widget bg-white">
<DataSourceComponent
useDataSource={this.props.useDataSources?.[0]}
widgetId={this.props.id}
onDataSourceCreated={this.onDataSourceCreated}
/>
<Select
onChange={this.onFieldSelected}
placeholder="Select a Field..."
>
{this.listOfFields?.map((fieldItem, index) =>{
return(
<option value={index}>{fieldItem.alias}</option>
)
})}
</Select>
</div>
)
}
}

Answer 1

您只需要在查询中输入参数returnDistinctValues: true。这样就可以得到字段的所有唯一值。您还应该添加returnGeometry: false以便只获取字段值，而不需要几何图形。

最终应该是这样的，

{
outFields: [field],
where: '1=1',
returnGeometry: false,
geometry: null,
returnDistinctValues: true
}