updating/add 到定义表达式

updating/add to definationExpression

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

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

    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 属性.

中的更改时自动完成

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

If the definition expression is set after the layer has been added to the map, the view will automatically refresh itself to display the features that satisfy the new definition expression. ArcGIS API - FeatureLayer definitionExpression

以防万一你想查看我使用其他答案制作的示例,但使用 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>