更新/添加到定义表达式



是否可以更新或添加已经声明的定义表达式?例如,采用以下格式:"id IN ('us70008jr5','cgi988jr52')"我可以使用 id 在初始定义表达式中声明多个,但是一旦我尝试稍后更新或添加到它,它永远不会读取或执行。

我正在尝试根据前端的用户选择简单地更新或添加到我的定义表达式中,我似乎无法更新它;我尝试刷新要素图层。

let selectedID;
let datA;

layer.definitionExpression = "id IN ('')";

function filterByID(event) {
console.log('filter hit');
selectedID = event.target.getAttribute("data-id");
console.log(selectedID);
layer.refresh();
layer.definitionExpression = "id IN ('"+ selectedID +"')";
}

ArcGIS-JS API 4.xx

您不需要刷新图层,因为它会在检测到definitionExpression属性中的更改时自动刷新。

我猜您可能在请求时间方面遇到问题。在您的情况下,与您的另一个问题(顺便说一句,我给您一个答案(相关,这不是一个好的解决方案,因为用户可能会遇到延迟响应。只需检查并给它时间,您就会看到它单独更新。

如果在将图层添加到地图后设置定义表达式,则视图将自动刷新自身以显示满足新定义表达式的要素。 ArcGIS API - 要素图层定义表达式

以防万一您想检查我使用另一个答案制作的此示例,但使用definitionExpression进行更新。它从基本查询开始,然后在用户事件输入上添加选中的 ID。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>Filter features by attribute - 4.15</title>
<link rel='stylesheet' href='https://js.arcgis.com/4.15/esri/themes/light/main.css' />
<script src='https://js.arcgis.com/4.15/'></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 500px;
width: 100%;
}
</style>
<script>
require([
'esri/views/MapView',
'esri/Map',
'esri/layers/FeatureLayer',
'esri/widgets/Expand'
], function (MapView, Map, FeatureLayer, Expand) {
const baseDefinitionExpression = 'eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2';
const layer = new FeatureLayer({
url: 'https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/',
outFields: ['*']
, definitionExpression: baseDefinitionExpression
});
const map = new Map({
basemap: 'gray-vector'
, layers: [layer]
});
const view = new MapView({
map: map,
container: 'viewDiv',
center: [-98, 40],
zoom: 4
});
let selectedIDs = {};
function updatedFilter() {
const ids = [];
for(const [key, value] of Object.entries(selectedIDs)) {
if (value) {
ids.push(`'${key}'`);
}
}
layer.definitionExpression =
`${baseDefinitionExpression} AND id IN (${ids.join(',')})`;
console.log(`[updateFilter] ${layer.definitionExpression}`);
}
const idElement = document.getElementById('id-filter');
idElement.addEventListener('click', filterByID);
function filterByID(event) {
const chk = event.target;
console.log(`[filterByID] ${chk.getAttribute('data-id')} ${chk.checked}`);
selectedIDs[chk.getAttribute('data-id')] = chk.checked;
updatedFilter();
}
view.whenLayerView(layer).then(function (layerView) {

const query = layer.createQuery();
query.outFields = ['id'];
query.returnDistinctValues = true;
query.returnGeometry = false;
layer.queryFeatures(query).then(function (results) {
results.features.map(function (feat) {
let id = feat.attributes['id'];
let opt = document.createElement('input');
opt.type = 'checkbox';
let label = document.createElement('label')
label.innerHTML = id;
opt.className = 'id-item visible-id';
opt.setAttribute('data-id', id);
idElement.appendChild(opt);
idElement.appendChild(label);
selectedIDs[id] = false;
});
});

console.log('[whenLayerView]');
});
});
</script>
</head>
<body>
<div id='id-filter' class='esri-widget'>
</div>
<div id='viewDiv'></div>
</body>
</html>

最新更新