尝试一下 在 CodePen 中打开 在线预览 此示例演示如何将编辑器 微件添加到 Web 应用程序。除了添加编辑器微件之外,它还展示了如何添加 SnappingControls 微件以与编辑器 一起工作。这两个微件一起使用会很有用,因为它提供了一种在利用捕捉功能的同时简化应用程序中的编辑体验的方法。
工作原理 实例化图层并指定它们的 LayerInfos应用程序加载一个 webmap 并遍历它的所有层并实例化每个层。
复制
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 ;
}
}
});
设置好图层后,设置每个图层的 layerInfo 。这需要图层和带有字段元素数组的表单模板 。这些字段元素指定 Editor
应更新哪些值。
复制
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"
}]
}
};
实例化编辑器根据要素图层上设置的编辑功能,您可以 Edit
现有要素和/或 Add
新要素。该微件将采用服务上设置的任何编辑功能。如果需要覆盖任何内容,可以通过在微件的 layerInfos 中设置特定属性来实现。可以指定诸如 allowAttachments
、 enabled
、 updateEnabled
和/或 deleteEnabled
之类的属性,以进一步限制每层可以进行多少编辑。
复制
1
2
3
4
5
// Begin Editor constructor
const editor = new Editor({
view : view,
layerInfos : [pointInfos, lineInfos, polyInfos]
// constructor snippet is finished below
捕捉捕捉是通过其 snappingOptions 在编辑器的构造函数中配置的。您可以在此处配置应如何在应用程序中使用捕捉。有两种捕捉模式:自我 捕捉和要素 捕捉。为了使这些模式中的任何一种工作,全局 enabled 属性也必须设置为 true
。 编写示例以启用两者。如果需要禁用一个或两个,请将正确的属性设置为 false
。
SnappingControls 微件通过将其 snappingOptions 属性与通过 Editor.snappingOptions 在编辑器 上设置的任何内容相关联来工作。
默认情况下,捕捉是关闭的。以下这些代码行将全局捕捉设置为 true
,因此 SnappingControls UI 将自动显示它已打开并启用捕捉。此外, SnappingControls 微件将自动显示地图中支持捕捉但不会被选中和启用的所有图层。在此示例中,使用 Editor.snappingOptions.featureSources 指定了三个层之一。
如果您的应用程序需要捕捉到应用程序中的不同图层,请通过设置关联的要素捕捉图层源 来指定应启用哪些图层。在此示例中,仅指定了 pointLayer
。SnappingControls 微件将在地图中显示其他图层,但仅将 pointLayer
显示为启用要素捕捉。
复制
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
接下来,添加 Expand 微件的实例并将其内容设置为 snappingControls
的内容。这将防止微件在您的应用程序中占用宝贵的空间。
复制
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
});
Editor
和 Expand
微件使用与其他微件相同的编码模式,即您必须指定微件要使用的视图。
最后,我们使用 View 的 UI 将微件添加到应用程序中。
复制
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" );
有关更高级的示例,请参阅具有配置的编辑器微件 ,对于 3D 编辑,请参阅示例使用编辑器微件在 3D 中编辑要素 。
已知限制
有关捕捉限制的完整列表,请参阅 SnappingOptions 参考手册 文档。