使用编辑器微件编辑要素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
view.map.allLayers.forEach((layer) => {
  if (layer.type === 'feature') {
    switch (layer.geometryType) {
      case "polygon":
        polygonLayer = layer;
        break;
      case "polyline":
        lineLayer = layer;
        break;
      case "point":
        pointLayer = layer;
        break;
    }
  }
});

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// Create layerInfos for layers in Editor

// Set the point layer's LayerInfo
const pointInfos = {
  layer: pointLayer,
  formTemplate: { // autocasts to FormTemplate
    elements: [{ // autocasts to Field Elements
      type: "field",
      fieldName: "HazardType",
      label: "Hazard type"
    }, {
      type: "field",
      fieldName: "Description",
      label: "Description"
    }, {
      type: "field",
      fieldName: "SpecialInstructions",
      label: "Special Instructions"
    }, {
      type: "field",
      fieldName: "Status",
      label: "Status"
    }, {
      type: "field",
      fieldName: "Priority",
      label: "Priority"
    }]
  }
};

// Set the line layer's LayerInfo
const lineInfos = {
  layer: lineLayer,
  formTemplate: { // autocasts to FormTemplate
    elements: [{ // autocasts to FieldElement
      type: "field",
      fieldName: "Severity",
      label: "Severity"
    }, {
      type: "field",
      fieldName: "blocktype",
      label: "Type of blockage"
    }, {
      type: "field",
      fieldName: "fullclose",
      label: "Full closure"
    }, {
      type: "field",
      fieldName: "active",
      label: "Active"
    }, {
      type: "field",
      fieldName: "locdesc",
      label: "Location Description"
    }]
  }
};

// Set the polygon layer's LayerInfo
const polyInfos = {
  layer: polygonLayer,
  formTemplate: { // autocasts to FormTemplate
    elements: [{ // autocasts to FieldElement
      type: "field",
      fieldName: "incidenttype",
      label: "Incident Type"
    }, {
      type: "field",
      fieldName: "activeincid",
      label: "Active"
    }, {
      type: "field",
      fieldName: "descrip",
      label: "Description"
    }]
  }
};

1
2
3
4
5
// Begin Editor constructor
const editor = new Editor({
  view: view,
  layerInfos: [pointInfos, lineInfos, polyInfos]
// constructor snippet is finished below

1
2
3
4
5
6
7
8
9
  snappingOptions: {
    enabled: true,
    featureSources:
    [{ // Autocastable to FeatureSnappingLayerSource
      // Enable feature snapping on specified layer(s)
      layer: pointLayer
    }]
  }
}); // End Editor constructor

1
2
3
4
5
6
7
8
  // Create the Expand widget and set its content to that of the SnappingControls
const snappingExpand = new Expand({
  expandIconClass: "esri-icon-settings2",
  expandTooltip: "Show snapping UI",
  expanded: false,
  view: view,
  content: snappingControls
});

1
2
3
// Add widgets to top and bottom right of the view
view.ui.add(editor, "top-right");
view.ui.add(snappingExpand, "bottom-right");