// ---------------------------------------------------
// Snippets_Ex07
// ---------------------------------------------------

/*
  この演習で使用する URL

  https://localhost/iweb/Ex07/

  ArcGIS Maps SDK for JavaScript サイト
  https://js.arcgis.com

*/

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：SketchViewModel の初期化
  */
  const sketchVM = new SketchViewModel({
    view: mapEl.view,
    layer: mapEl.view.graphics
  });
  sketchVM.on("create", (evt) => {
    if (evt.state === "complete") {
      queryPoints(evt.graphic.geometry);

    };
  });

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：SketchViewModel の開始
  */
  sketchVM.create("polygon", {
    mode: "click"
  });

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：FeatureLayerView の生成をキャッチ
  */
  mapEl.whenLayerView(lyrPoints)
    .then((flView) => {
      featureLayerView = flView
    });

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：Query の初期化
  */
  const query = lyrPoints.createQuery();
  query.geometry = geometryInput;
  query.outFields = outFieldsPoints;

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：検索の実行、完了のハンドリング
  */
  featureLayerView.queryFeatures(query)
    .then(displayQueryResult);

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：検索結果を使用して図形をハイライト
  */
  highlightHandler = featureLayerView.highlight(results.features);

// ---------------------------------------------------

  index.html body

  <!-- ステップ：Feature Table コンポーネントの追加 -->
  <arcgis-feature-table reference-element="mapEl"></arcgis-feature-table>

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：Feature Table の操作
  */
  const featureTable = document.querySelector("arcgis-feature-table");
  await featureTable.componentOnReady();
  featureTable.layer = lyrPoints; 

  await featureTable.refresh();

// ---------------------------------------------------

  js/main.js

  /*
    ステップ：テーブルにすでに選択済みのデータがある場合、選択内容を初期化
  */
  if (featureTable.highlightIds) {
    featureTable.highlightIds.removeAll();
  }

// ---------------------------------------------------

  js/main.js

    /*
    ステップ：検索結果を利用してデータを選択
    */
    for (const feature of results.features) {
      featureTable.highlightIds.add(feature.attributes.OBJECTID);
    }

// ---------------------------------------------------

  js/main.js

    /*
    ステップ：選択したデータのみをテーブルに表示
    */
    featureTable.filterBySelectionEnabled = true;

// ---------------------------------------------------