具有配置的 Editor 微件

尝试一下在线预览

此示例演示如何将 Editor 微件添加到 Web 应用程序。除了添加 Editor 小部件之外，它还展示了如何添加 SnappingControls 微件以与 Editor 一起工作。这两个微件一起使用会很有用，因为它提供了一种在利用捕捉功能的同时简化应用程序中的编辑体验的方法。它还演示了各种编辑器配置的使用，特别是通过编辑器的 layerInfos 属性限制编辑功能并使用 FeatureTemplate 分组。

有关更基本的示例，请参阅使用 Editor 微件编辑功能。

工作原理

微件会自动识别地图中是否有任何可编辑的要素图层。如果有可用的图层，它们将显示在微件中。根据要素图层上设置的编辑功能，您可以 update 和/或 create 新要素。这两个工作流程可以根据应用程序的需要进行调整。例如，假设您有一个设置了完整编辑功能的要素图层。但是对于一个特定的应用程序，您可能不需要或不希望编辑器创建任何新要素。您可以通过在 layerInfos 属性中设置 addEnabled: false 来限制这一点。这将禁用要素创建。

除此之外，还可以限制显示哪些字段以及您希望如何显示它们。您可以通过设置每个图层的 layerInfo 来做到这一点。这需要图层和带有字段元素数组的表单模板。这些字段元素指定 Editor应更新哪些值。此示例利用了这一点，因为只有少数属性字段需要更新。

// Loop through webmap layers and set an EditConfig for each
view.map.layers.forEach((layer) => {
  if (layer.title === "Police Routes") {
    editConfigPoliceLayer = {
      layer: layer,
      formTemplate: {
        // Set it so that only one field displays within the form
        elements: [
        {
          type: "field",
          fieldName: "PatrolType",
          label: "Patrol Type"
        }
        ]
      }
    };
  } else {
    // Specify a few of the fields to edit within the form
    editConfigCrimeLayer = {
      layer: layer,
      formTemplate: {
        elements: [
        {
          type: "field",
          fieldName: "fulladdr",
          label: "Full Address"
        },
        {
          type: "field",
          fieldName: "neighborhood",
          label: "Neighborhood"
        },
        {
          type: "field",
          fieldName: "ucrdesc",
          label: "UCR Description"
        },
        {
          type: "field",
          fieldName: "crimecategory",
          label: "Category"
        },
        {
          type: "field",
          fieldName: "casestatus",
          label: "Status"
        }
        ]
      }
    };
  }
});

Editor 微件封装了 FeatureTemplates、FeatureForm 和草绘微件中的要素。可以通过设置 supportingWidgetDefaults 属性来自定义其中一些微件的属性。除了自定义字段在 Editor 中的显示方式外，您还可以自定义默认 FeatureTemplates 的显示方式。默认情况下，Editor 微件在一组中显示所有图层的模板。为了更容易区分，此示例使用创建的自定义函数来帮助对这些模板进行分组。在此示例中，FeatureTemplates 微件的默认行为被自定义为使用此自定义分组功能。

// Create a custom group to separate the different areas of crime.
// This function takes a 'grouping' object containing a feature template and feature layer.

function customGroup(grouping) {
  // If the layer is 'Police routes', do not group
  let groupHeading = "Police Routes";
  if (grouping.layer.title.toLowerCase() === "crime map") {
    switch (grouping.template.name) {
      case "Criminal Homicide":
      case "Rape":
      case "Robbery":
      case "Aggravated Assault":
        groupHeading = "Violent Crime";
        break;
      case "Arson":
      case "Burglary":
      case "Larceny":
      case "Motor Vehicle Theft":
        groupHeading = "Property Crime";
        break;
      default:
        groupHeading = "Quality of Life";
    }
  }
  return groupHeading;
}

与其他微件一样，Editor 微件使用相同类型的编码模式，即您必须设置微件引用的视图。在此之后，可以根据应用程序的要求设置其他属性。

const editor = new Editor({
  view: view,
  // Pass in the configurations.
  layerInfos: [editConfigCrimeLayer, editConfigPoliceLayer],
  // Override the default template behavior of the Editor widget
  supportingWidgetDefaults: {
    featureTemplates: {
      groupBy: customGroup
    }
  },
});

配置捕捉

捕捉是通过其 snappingOptions 在编辑器的构造函数中配置的。您可以在此处配置应如何在应用程序中使用捕捉。有两种捕捉模式：自我捕捉和要素捕捉。为了使这些模式中的任何一种工作，全局的 enabled 属性也必须设置为 true。编写示例以启用两者。

SnappingControls 微件通过将其 snappingOptions 属性与通过 Editor.snappingOptions 在 Editor 上设置的任何内容相关联来工作。

默认情况下，捕捉是关闭的。以下这些代码行将全局捕捉设置为 true，因此 SnappingControls UI 将自动显示它已打开并启用捕捉。此外，SnappingControls 微件将自动显示地图中支持捕捉但不会被选中和启用的所有图层。在此示例中， crime 层和 police 层都在 Editor.snappingOptions.featureSources 中设置，因此在加载微件时会进行检查。

//Toggling snapping on/off can be achieved via the CTRL key.
snappingOptions: { // autocasts to SnappingOptions
  enabled: true,
  featureSources: [
    {layer: editConfigCrimeLayer.layer},
    {layer: editConfigPoliceLayer.layer}
  ] // layer sources for feature snapping
}
}); // End Editor constructor