此微件提供开箱即用的编辑体验,以帮助简化 Web 应用程序中的编辑体验。它会自动识别地图中是否有可编辑的要素图层。如果它识别出它们是可编辑的,则微件可以使用这些层。此外,还可以通过设置其 layerInfos 属性来配置 Editor
的行为方式。此属性采用一组配置对象,允许您配置这些层的编辑体验。
该微件根据所需的功能具有不同的工作流,将在下面讨论。
- CreateWorkflow (自 4.23 起已弃用)- 此工作流程主要设计用于针对单个功能创建的现有自定义工作流程。这个工作流程最终将被删除,取而代之的是,
- CreateFeaturesWorkflow (4.23 中的新功能)- 此工作流程允许同时创建单独的和连续的特征。
- UpdateWorkflow - 此工作流允许您更新和/或删除可编辑要素图层中的现有要素。
从 4.23 版开始,Editor 微件经历了一些重大更新,包括其 UI 和底层 API。这些更新只是编辑器路线图上的一些改进。随着未来版本的发布,预计会看到更多更新。其中一些更新包括:
- 初始编辑器对话框已被删除并更新为包含一个整合创建和更新工作流程的初始面板。
- 添加了一个额外的创建要素工作流以包括连续编辑。现在可以一次连续创建多个相同类型的要素。创建初始草图后,实体形式将与指定的字段元素一起显示。这些字段可以在用户创建新要素时更新。现有的创建工作流仍然有效,但已被标记为
deprecated
,以支持使用创建要素工作流。这个新的工作流程是为单个和多个要素创建而设计的。 - 捕捉自动包含在微件的 UI 中。不再需要通过将编辑器的 snappingOptions 传递给 SnappingControls 的实例来专门设置它。 默认情况下,捕捉被禁用。切换“启用捕捉”以启用它。默认情况下,几何约束和要素到要素捕捉均处于启用状态。几何约束允许编辑器指定他们希望如何绘制几何图形。例如,如果需要线完全成直角,则捕捉指示器会显示为这样,并且可以适当地创建顶点。要素到要素捕捉允许将新几何或现有几何捕捉到其他图层中的几何,如
Snapping layer
列表中所示,或与当前正在编辑的图层中的几何。 默认情况下,所有可配置为捕捉的图层都会自动添加到此列表中。如果需要更新,请通过直接设置 FeatureSnappingLayerSource 来更新编辑器的 snappingOptions。
已知限制
Editor 微件尚未与 3.x Editor 微件中提供的要素完全等同。例如,目前不支持编辑相关的要素属性。
- 另请参阅:
// At the very minimum, set the Editor's view
const editor = new Editor({
view: view
});
view.ui.add(editor, "top-right");
构造函数
属性概览
名称 | 类型 | 描述 | 类 | |
---|---|---|---|---|
CreateWorkflow|CreateFeaturesWorkflow|UpdateWorkflow | 更多信息 指示当前活动工作流的属性。 | 更多信息 | Editor | |
String | 更多信息 一个字符串值数组,指定允许最终用户编辑的内容。 | 更多信息 | Editor | |
String|HTMLElement | 更多信息 表示包含微件的 DOM 元素的 ID 或节点。 | 更多信息 | Widget | |
String | 更多信息 类的名称。 | 更多信息 | Accessor | |
Number | 更多信息 指示用于微件标题的标题级别。 | 更多信息 | Editor | |
String | 更多信息 微件的默认 CSS 图标类。 | 更多信息 | Editor | |
String | 更多信息 创建微件时分配给微件的唯一 ID。 | 更多信息 | Widget | |
String | 更多信息 微件的默认标签。 | 更多信息 | Editor | |
LayerInfo[] | 更多信息 单个图层的一组编辑配置。 | 更多信息 | Editor | |
SnappingOptions | 更多信息 用于编辑的 SnappingOptions。 | 更多信息 | Editor | |
SupportingWidgetDefaults | 更多信息 此属性允许自定义支持的 Editor 微件及其默认行为。 | 更多信息 | Editor | |
Boolean | 更多信息 指示编辑器是否应默认使用已弃用的 CreateWorkflow。 | 更多信息 | Editor | |
MapView|SceneView | 更多信息 | 更多信息 | Editor | |
EditorViewModel | 更多信息 此微件的视图模型。 | 更多信息 | Editor | |
Boolean | 更多信息 指示微件是否可见。 | 更多信息 | Widget |
属性详情
-
-
指示当前活动工作流的属性。这是 CreateFeaturesWorkflow 或 UpdateWorkflow。如果 useDeprecatedCreateWorkflow 为
true
,则此属性类型反映已弃用的 CreateWorkflow。
-
allowedWorkflows String
-
一个字符串值数组,指定允许最终用户编辑的内容。例如,具有完全编辑权限的要素图层可能可用。 但是您可能只希望最终用户能够更新现有要素。将
allowedWorkflows
设置为仅update
。可能的值 说明 create 这允许最终用户在要素服务中创建新的单个要素。(自 4.23 起已弃用,使用如下所述的 create-features
。)create-features 这允许最终用户在要素服务中创建单独的或连续的要素。(自 4.23 开始) update 这允许最终用户更新和/或删除要素服务中的要素。 仅当要素服务允许这些操作时,才会启用这些工作流。
可能的值:"create-features"|"create"|"update"
示例:const editor = new Editor({ view: view, allowedWorkflows: ["update"] // allows only updates and no adds });
-
-
表示包含微件的 DOM 元素的 ID 或节点。该属性只能设置一次。以下示例都是使用微件时的有效用例。
示例:// Create the HTML div element programmatically at runtime and set to the widget's container const basemapGallery = new BasemapGallery({ view: view, container: document.createElement("div") }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" });
// Specify an already-defined HTML div element in the widget's container const basemapGallery = new BasemapGallery({ view: view, container: basemapGalleryDiv }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" }); // HTML markup <body> <div id="viewDiv"></div> <div id="basemapGalleryDiv"></div> </body>
// Specify the widget while adding to the view's UI const basemapGallery = new BasemapGallery({ view: view }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" });
-
类的名称。声明的类名格式为
geoscene.folder.className
。
-
headingLevel Number起始版本:GeoScene API for JavaScript 4.20
-
指示用于微件标题的标题级别。默认情况下,标题呈现为 4 级标题(例如
<h4>Editor</h4>
)。 根据微件在您的应用中的位置,您可能需要调整此标题以获得正确的语义。这对于满足可访问性标准很重要。- 默认值:4
- 另请参阅:
示例:// "Editor" will render as an <h3> editor.headingLevel = 3;
-
iconClass Stringreadonly
-
微件的默认 CSS 图标类。
-
创建微件时分配给微件的唯一 ID。如果开发人员未设置,则默认为容器 ID,如果不存在,则会自动生成。
-
label String
-
微件的默认标签。
-
单个图层的一组编辑配置。
如果您有一个可编辑的要素图层,但不希望最终用户进行任何类型的编辑,您可以通过将
enabled
属性设置为false
来限制这一点。- 另请参阅:
示例:const editor = new Editor({ layerInfos: [{ view: view, layer: featureLayer, // pass in the feature layer, formTemplate: { // autocastable to FormTemplate elements: [ { // autocastable to FieldElement type: "field", fieldName: "fulladdr", label: "Full Address" } ] }, enabled: true, // default is true, set to false to disable editing functionality addEnabled: true, // default is true, set to false to disable the ability to add a new feature updateEnabled: false // default is true, set to false to disable the ability to edit an existing feature deleteEnabled: false // default is true, set to false to disable the ability to delete features }] });
-
snappingOptions SnappingOptionsautocast起始版本:GeoScene API for JavaScript 4.19
-
用于编辑的 SnappingOptions。支持自捕捉和要素捕捉。从版本 4.23 开始,SnappingControls UI 自动集成到 Editor 微件中。如果需要对默认 UI 中提供的内容进行修改,请修改
snappingOptions
。- 另请参阅:
示例:// Creates the Editor with SnappingOptions with no snapping UI const editor = new Editor({ view: view, snappingOptions: { // autocasts to SnappingOptions() enabled: true, featureSources: [{layer: streetsLayer}] // autocasts to FeatureSnappingLayerSource() } });
// Creates the Editor with SnappingControls widget const editor = new Editor({ view: view }); const snappingControls = new SnappingControls({ view: view, snappingOptions: editor.snappingOptions }); // Add the widgets to the view view.ui.add(editor, "top-right"); view.ui.add(snappingControls, "top-left");
-
supportingWidgetDefaults SupportingWidgetDefaults
-
此属性允许自定义支持的 Editor 微件及其默认行为。这些微件包括 FeatureForm、FeatureTemplates 和 SketchViewModel。
此属性对于默认微件的基本覆盖很有用。 Editor 可以对这些被覆盖的属性执行的操作可能存在一些限制。例如,无论在此属性中设置什么,编辑器都会禁用 Sketch.defaultUpdateOptions 中的
multipleSelectionEnabled
属性。- 另请参阅:
-
useDeprecatedCreateWorkflow Boolean起始版本:GeoScene API for JavaScript 4.23已弃用从 4.23 版开始。尽管在 4.23 中是新的,但引入此属性是为了帮助从旧版 CreateWorkflow 迁移到更新后的 CreateFeaturesWorkflow。完全删除 CreateWorkflow 后,将不再需要此属性。
-
指示编辑器是否应默认使用已弃用的 CreateWorkflow。默认情况下,Editor 允许使用 CreateFeaturesWorkflow 在一个工作流中创建多个要素。如果需要恢复到已弃用的单一功能创建工作流,请将其设置为
true
。- 默认值:false
- 另请参阅:
-
viewModel EditorViewModelautocast
-
此微件的视图模型。这是一个包含控制此微件行为的所有逻辑(属性和方法)的类。请参阅 EditorViewModel 类以访问微件上的所有属性和方法。
-
指示微件是否可见。
如果为
false
,则该微件将不再呈现在 Web 文档中。这可能会影响文档中其他元素或微件的布局。例如,如果此微件是与视图 UI 右上角关联的三个微件中的第一个,则当此微件不可见时,其他微件将重新定位。有关详细信息,请参阅"none"
的 CSS display 值。- 默认值:true
示例:// Hides the widget in the view widget.visible = false;
方法概览
方法详情
-
用于构建微件
class
属性值的实用方法。这有助于简化 CSS 类设置。参数:repeatable 类名称。
返回:类型 说明 String 计算出来的类名。 - 另请参阅:
示例:// .tsx syntax showing how to set CSS classes while rendering the widget render() { const dynamicIconClasses = { [CSS.myIcon]: this.showIcon, [CSS.greyIcon]: !this.showIcon }; return ( <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} /> ); }
-
deleteFeatureFromWorkflow(){Promise<void>}
-
如果存在活动的 UpdateWorkflow,这适用。如果是这样,此方法将删除工作流功能。
返回:类型 说明 Promise<void> 删除活动的 UpdateWorkflow 后解决。 - 另请参阅:
-
destroy()inherited
-
注销微件实例。
-
在实例上发出事件。此方法仅应在创建此类的子类时使用。
参数:type String事件的名称。
event Objectoptional事件有效负载。
返回:类型 说明 Boolean true
if a listener was notified
-
起始版本:GeoScene API for JavaScript 4.19
-
isFulfilled()
可用于验证创建类的实例是否已完成(已解决或已拒绝)。如果满足,则返回true
。返回:类型 说明 Boolean 指示创建类的实例是否已完成(已解决或已拒绝)。
-
起始版本:GeoScene API for JavaScript 4.19
-
isRejected()
可用于验证创建类的实例是否被拒绝。如果被拒绝,则返回true
。返回:类型 说明 Boolean 指示创建类的实例是否已被拒绝。
-
起始版本:GeoScene API for JavaScript 4.19
-
isResolved()
可用于验证创建类的实例是否已解决。如果已解决,将返回true
。返回:类型 说明 Boolean 指示创建类的实例是否已解决。
-
在实例上注册事件处理程序。调用此方法以将事件与侦听器挂钩。
参数:要侦听的事件或事件数组。
listener Function事件触发时调用的函数。
返回:类型 说明 Object 返回带有 remove()
方法的事件处理程序,应调用该方法以停止侦听事件。属性 类型 说明 remove Function 调用时,从事件中删除侦听器。 示例:view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint); });
-
own(handles)inherited
-
微件拆卸助手。当微件被销毁时,添加到它的任何句柄都将被自动删除。
参数:handles WatchHandle|WatchHandle[]微件销毁后标记为删除的句柄。
-
postInitialize()inherited
-
此方法主要由开发人员在实现自定义微件时使用。在微件准备好渲染后执行。
-
此方法主要由开发人员在实现自定义微件时使用。它必须由子类实现以进行渲染。
返回:类型 说明 Object 渲染的虚拟节点。
-
renderNow()inherited
-
立即将微件呈现给 DOM。
-
scheduleRender()inherited
-
此方法主要由开发人员在实现自定义微件时使用。安排微件渲染。此方法对于影响 UI 的更改很有用。
-
startCreateFeaturesWorkflowAtFeatureCreation(creationInfo){Promise<void>}起始版本:GeoScene API for JavaScript 4.23
-
通过显示开始创建特征的面板来启动 CreateFeaturesWorkflow。此方法采用包含要使用的层和模板的 CreationInfo 对象。
参数:creationInfo CreationInfo包含使用编辑器小部件创建新功能所需的信息的对象。该对象提供了用于创建一个或多个新特征的特征模板和图层。
返回:类型 说明 Promise<void> 解决 CreateFeaturesWorkflow 何时启动并显示开始创建特征的面板。 - 另请参阅:
-
startCreateFeaturesWorkflowAtFeatureTypeSelection(){Promise<void>}起始版本:GeoScene API for JavaScript 4.23
-
通过显示 FeatureTemplates 面板来启动 CreateFeaturesWorkflow。
返回:类型 说明 Promise<void> 当 CreateFeaturesWorkflow 启动并显示 FeatureTemplates 面板时解决。
-
startCreateWorkflowAtFeatureCreation(creationInfo){Promise<void>}已弃用从 4.23 版开始。而是使用 startCreateFeaturesWorkflowAtFeatureCreation
-
通过显示开始创建特征的面板来启动 CreateFeaturesWorkflow。此方法采用包含要使用的层和模板的 CreationInfo 对象。
参数:creationInfo CreationInfo包含使用编辑器小部件创建新功能所需的信息的对象。 此对象提供用于创建新要素的要素模板和图层。
返回:类型 说明 Promise<void> 解决 CreateFeaturesWorkflow 何时启动并显示开始创建特征的面板。 - 另请参阅:
-
startCreateWorkflowAtFeatureEdit(feature){Promise<void>}已弃用自 4.23 起
-
此方法启动 CreateWorkflow,等待选择多个要素。
参数:feature Graphic已编辑的要素。
返回:类型 说明 Promise<void> CreateWorkflow 启动后解决,显示开始创建特征的面板,并等待选择特征。 - 另请参阅:
-
startCreateWorkflowAtFeatureTypeSelection(){Promise<void>}已弃用从 4.23 版开始。而是改用 startCreateFeaturesWorkflowAtFeatureTypeSelection。
-
通过显示 FeatureTemplates 面板来启动 CreateWorkflow。
返回:类型 说明 Promise<void> 当 CreateWorkflow 启动并显示 FeatureTemplates 面板时解决。 - 另请参阅:
-
startUpdateWorkflowAtFeatureEdit(feature){Promise<void>}
-
在属性编辑面板上启动 UpdateWorkflow。
参数:feature Graphic已更新的要素。
返回:类型 说明 Promise<void> 在 UpdateWorkflow 启动属性编辑面板后解决。
-
startUpdateWorkflowAtFeatureSelection(){Promise<void>}
-
使用当前选定的功能启动 UpdateWorkflow。
返回:类型 说明 Promise<void> 使用当前选定的功能启动 UpdateWorkflow 后解决。 - 另请参阅:
-
startUpdateWorkflowAtMultipleFeatureSelection(candidates){Promise<void>}
-
此方法启动 UpdateWorkflow,等待选择多个功能。
参数:一系列要更新的功能。这仅在有多个候选者要更新时才相关。
返回:类型 说明 Promise<void> 在 UpdateWorkflow 启动后解决,因为它等待选择多个功能。 - 另请参阅:
-
起始版本:GeoScene API for JavaScript 4.19
-
when()
一旦创建了类的实例,就可以利用它。这个方法有两个输入参数:一个callback
函数和一个errback
函数。callback
在类的实例加载时执行。如果类的实例无法加载,则执行errback
。参数:callback Function可选当 promise 解决时调用的函数。
errback Function可选当 promise 失败时执行的函数。
返回:类型 说明 Promise 返回 callback
结果的新promise,可用于链接其他函数。示例:// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way let bmGallery = new BasemapGallery(); bmGallery.when(function(){ // This function will execute once the promise is resolved }, function(error){ // This function will execute if the promise is rejected due to an error });
类型说明
-
CreationInfo
-
该对象提供了用于创建一个或多个新特征的特征模板和图层。
- 属性:
-
layer FeatureLayer
新创建要素的关联要素图层。
template FeatureTemplate用于创建新功能的关联功能模板。
-
LayerInfo
-
用于在编辑器中设置图层的可编辑首选项的配置。
- 属性:
-
layer FeatureLayer
包含可编辑字段的关联要素图层。
allowAttachments Boolean默认值:true指示是否在编辑器的 UI 中显示附件小部件。 默认情况下,如果服务 supportsAttachment,则为
true
。enabled Boolean默认值:true指示是否在图层上启用编辑。如果服务支持,则默认为
true
。addEnabled Boolean指示是否启用创建新功能的要素。如果服务支持,则默认为
true
。updateEnabled Boolean指示是否启用创建新功能的要素。如果服务支持,则默认为
true
。deleteEnabled Boolean指示是否启用删除要素的要素。如果服务支持,则默认为
true
。formTemplate FormTemplate定义功能的表单内容的模板。在设置要编辑的字段时使用它。
-
SupportingWidgetDefaults
-
设置此项以自定义任何支持的 Editor 微件的默认行为。这些微件包括 FeatureForm、FeatureTemplates 和 SketchViewModel。
- 属性:
-
featureForm Object
包含特定于自定义 FeatureForm 微件的属性的对象。
- 规格:
-
groupDisplay String
指示 groupDisplay 以及它们将如何显示给最终用户的字符串。这仅适用于使用 Editor 的 图层信息中配置的分组字段元素。
featureTemplates Object包含特定于自定义 FeatureTemplates 微件的属性的对象。
- 规格:
-
groupBy String|GroupByFunction
帮助管理各种模板项以及它们在小部件中的显示方式。请参阅 groupBy 参考手册以获取更多信息。
visibleElements.filter Boolean指示是否显示模板过滤器。
sketch Object包含特定于自定义 Sketch 微件的属性的对象。
- 规格:
-
defaultUpdateOptions Object
包含 Sketch 微件的
defaultUpdateOptions
的对象。markerSymbol SimpleMarkerSymbol用于符号化任何点要素更新的标记符号。
polygonSymbol SimpleFillSymbol用于符号化任何面要素更新的面符号。
polylineSymbol SimpleLineSymbol用于符号化任何线要素更新的线符号。