具有地图的 FeatureTable 微件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
view.when(() => {
  //grabs the first layer in the map
  const featureLayer = webmap.layers.getItemAt(0);
  featureLayer.title = "USFS Recreational areas";

  // Create the feature table
  const featureTable = new FeatureTable({
    layer: featureLayer,
    view: view, // required for feature highlight to work
    // Autocast the FieldColumnConfigs
    fieldConfigs: [{
      name: "RECAREANAM",
      label: "Recreation area name",
      direction: "asc"
    },
    {
      name: "FORESTNAME",
      label: "Forest name"
    },
    {
      name: "OPENSTATUS",
      label: "Open status"
    },
    {
      name: "OPEN_SEASO",
      label: "Season begins"
    },
    {
      name: "RECAREADES",
      label: "Recreation description"
    },
    {
      name: "RESTRICTIO",
      label: "Restrictions"
    }
  ],
  container: document.getElementById("tableDiv")
});
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Listen for the table's selection-change event
featureTable.on("selection-change", (changes) => {
  // If the selection is removed, remove the feature from the array
  changes.removed.forEach((item) => {
    const data = features.find((data) => {
      return data.feature === item.feature;
    });
    if (data) {
      features.splice(features.indexOf(data), 1);
    }
  });
  // If the selection is added, push all added selections to array
  changes.added.forEach((item) => {
    const feature = item.feature;
    features.push({
      feature: feature
    });
  });
});

1
2
3
4
5
6
7
8
9
featureLayer.watch("loaded", () => {
  watchUtils.whenFalse(view, "updating", () =>  {
    // Get the new extent of view/map whenever map is updated.
    if (view.extent) {
      // Filter and show only the visible features in the feature table
      featureTable.filterGeometry = view.extent;
    }
  });
});

1
2
3
4
5
6
7
8
9
10
// Listen for the click on the view and select any associated row in the table
view.on("immediate-click", (event) => {
  view.hitTest(event).then((response) => {
    const candidate = response.results.find((result) => {
      return result.graphic && result.graphic.layer && result.graphic.layer === featureLayer;
    });
    // Select the rows of the clicked feature
    candidate && featureTable.selectRows(candidate.graphic);
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// fires when "Zoom to selected feature(s)" button is clicked
function zoomToSelectedFeature() {
  // Create a query off of the feature layer
  const query = featureLayer.createQuery();
  // Iterate through the features and grab the feature's objectID
  const featureIds = features.map((result) => {
    return result.feature.getAttribute(featureLayer.objectIdField);
  });
  // Set the query's objectId
  query.objectIds = featureIds;
  // Make sure to return the geometry to zoom to
  query.returnGeometry = true;
  // Call queryFeatures on the feature layer and zoom to the resulting features
  featureLayer.queryFeatures(query).then((results) => {
    view.goTo(results.features).catch((error) => {
      if (error.name != "AbortError"){
        console.error(error);
      }
    });
  });
}
...