BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] 定義への更新/追加Expression

2022-02-08 11:45:57

質問

すでに宣言されている定義式を更新したり、追加したりすることは可能ですか？例えば、このような形式です。 "id IN ('us70008jr5','cgi988jr52')" 最初のdefinationExpressionで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 プロパティを使用します。

リクエストの時間に問題があるのではないかと推測しています。あなたの場合、そしてあなたの その他の質問 (私はあなたに答えを与えることbtw)、これはユーザーが遅延応答を経験するかもしれないので、良い解決策ではありません。ただ、確認し、時間をかければ、単独で更新されることがわかります。

<ブロッククオート

レイヤーをマップに追加した後に定義式を設定した場合、ビューは自動的に更新され、新しい定義式を満たすフィーチャーが表示されます。 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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します