已启用编辑的 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
40
41
42
43
44
45
46
47
48
49
50
51
view.when(() => {
  // Create the feature layer
  featureLayer = new FeatureLayer({
    portalItem: {
      id: "3807c58dd48c4d32810042d8edf4a2fe"
    },
    outFields: ["*"],
    title: "Chicago crime incidents"
  });
  map.add(featureLayer);

// Create the feature table
const featureTable = new FeatureTable({
  view: view, // This must be set to enable highlight in the map
  layer: featureLayer,
  editingEnabled: true, // This must be set to enable editing in the table
  menuConfig: { // Creates a custom menu to zoom to selected features
    items: [{
      label: "Zoom to feature(s)",
      iconClass: "esri-icon-zoom-in-magnifying-glass",
      clickFunction: (event) => {
        zoomToSelectedFeature();
      }
    }]
  },
  // Autocast the FieldColumnConfigs
  fieldConfigs: [{
    name: "Case_Number",
    label: "Case No.",
    editable: false, // This disables editing for this specific field
    direction: "asc"
  },
  {
    name: "Primary_Type",
    label: "Crime type"
  },
  {
    name: "Location_Description",
    label: "Location description"
  },
  {
    name: "Arrest",
    label: "Arrest"
  },
  {
    name: "incident_date",
    label: "Date of incident"
  }],
  container: document.getElementById("tableDiv")
});
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Get the FeatureLayer's layerView and 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
10
11
12
13
14
15
16
17
18
19
20
21
22
// This function is called above in the Feature Table's menuConfig property for `clickFunction`
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);
      }
    });
  });
}
...