代码：

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo:Edit Features</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.17/"></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #fff;
            overflow: hidden;
            font-family: sans-serif;
        }
        #mainWindow {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #header {
            font-size: 1.1em;
            font-family: sans-serif;
            padding-left: 1em;
            padding-top: 2px;
            color: #0026ff;
            text-align: center;
        }
        #templatePickerPane {
            width: 200px;
            height: 100%;
        }
        #panelHeader {
            background-color: #92A661;
            border-bottom: solid 1px #92A860;
            color: #FFF;
            font-size: 18px;
            height: 24px;
            line-height: 22px;
            margin: 2px;
            overflow: hidden;
            padding: 2px;
        }        
    </style>
     
    <script>
        var map;
        var widgetEditor;        
        require([
            "esri/geometry/Extent",
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/dijit/editing/Editor",
            "esri/tasks/GeometryService",
            "esri/dijit/editing/TemplatePicker",
            "dojo/ready",
            "dojo/parser",
            "dojo/on",
            "dojo/_base/array",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ],
          function (Extent, Map, FeatureLayer, Editor, GeometryService, TemplatePicker,
            ready, parser, on, array,
            BorderContainer, ContentPane) {
              parser.parse();
              var startExtent = new Extent({
                  "xmin": 73.441277,
                  "ymin": 34.334934,
                  "xmax": 96.388373,
                  "ymax": 49.178574,
                  "spatialReference": { "wkid": 4326 }
              });
              map = new Map("map", {
                  basemap: "topo",
                  extent: startExtent,
                  zoom: 5,
                  sliderStyle: "large",
                  logo: false
              });
              var token = "MPNBJEn-yBwnji4k9nkh-oMoYieNlFVzlx2-CZqJKN8pIuEcyGFYncPALY8PgPgv";
              var flFirePoints = new FeatureLayer("http://159.75.129.108:6080/arcgis/rest/services/MyGP/TestFeature/FeatureServer/0?token=" + token, {
                  outFields: ["*"]
              });
              var flFireLines = new FeatureLayer("http://159.75.129.108:6080/arcgis/rest/services/MyGP/TestFeature/FeatureServer/1?token=" + token, {
                  outFields: ["*"]
              });
              var flFirePolygons = new FeatureLayer("http://159.75.129.108:6080/arcgis/rest/services/MyGP/TestFeature/FeatureServer/2?token=" + token, {
                  outFields: ["*"]
              });
              // Listen for the editable layers to finish loading
              map.on("layers-add-result", initEditor);
              // add the editable layers to the map
              map.addLayers([flFirePolygons, flFireLines, flFirePoints]);
              //加载编辑方法
              function initEditor(results) {
                  // Map the event results into an array of layerInfo objects
                  var layerInfosWildfire = array.map(results.layers, function (result) {
                      return {
                          featureLayer: result.layer,
                          showAttachments: false,
                          isEditable: true,
                          fieldInfos: [
                              { fieldName: 'SYMBOLID', visible: true, isEditable: true, label: '类型:' },
                              { fieldName: 'DESCRIPTION', visible: true, isEditable: true, label: '名称:' }
                          ]
                      };
                  });
                  /*
                   * Step: Map the event results into an array of Layer objects
                   */
                  var layersWildfire = array.map(results.layers, function (result) {
                      return result.layer;
                  });
                  /*
                   * Step: Add a custom TemplatePicker widget
                   */
                  var tpCustom = new TemplatePicker({
                      featureLayers: layersWildfire,
                      columns: 2
                  }, 'templatePickerDiv');
                  tpCustom.startup();
                  /*
                   * Step: Prepare the Editor widget settings
                   */
                  var editorSettings = {
                      map: map,
                      geometryService: new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"),
                      layerInfos: layerInfosWildfire,
                      toolbarVisible: true,
                      templatePicker: tpCustom,
                      createOptions: { polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON, Editor.CREATE_TOOL_RECTANGLE, Editor.CREATE_TOOL_TRIANGLE, Editor.CREATE_TOOL_CIRCLE] },
                      toolbarOptions: {
                          reshapeVisible: true
                      },
                      enableUndoRedo: true,
                      maxUndoRedoOperations: 20
                  };
                  /*
                   * Step: Build the Editor constructor's first parameter
                   */
                  var editorParams = {
                      settings: editorSettings
                  };
                  /*
                   * Step: Construct the Editor widget
                   */
                  var widgetEditor = new Editor(editorParams, 'divEditor');
                  widgetEditor.startup();
              }
          });
    </script>
</head>
<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
        <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
            Web地图在线编辑演示，当前登录用户为：<label id="userInfo">testc</label>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
        <div id="templatePickerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="panelHeader">默认编辑器</div>
            <div id="templatePickerDiv"></div>
            <div id="divEditor"></div>
        </div>
    </div>
    <!--http://codepen.io/lorencem/pen/KdrEqP-->
</body>
</html>

运行结果：

相关文献：

https://developers.arcgis.com/javascript/3/jssamples/ed_feature_creation.html

http://blog.csdn.net/lrspace/article/details/41730707

本文转自stock0991 51CTO博客，原文链接http://blog.51cto.com/qing0991/1795400：，如需转载请自行联系原作者

ArcGIS JavaScript在线编辑相关推荐

  1. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /*** Created by WanderGIS on 2015/7/15.*/ define(["dojo/_bas ...

  2. 《ArcGIS Runtime SDK for .NET开发笔记》--在线编辑

    介绍 ArcGIS可以发布具有编辑功能的Feature Service.利用Feature Service我们可以实现对数据的在线编辑.  数据制作参考:  https://server.arcgis ...

  3. （转）openlayers实现在线编辑

    http://blog.csdn.net/gisshixisheng/article/details/46054949 概述: 在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的 ...

  4. 在线编辑word文档 可保存到服务器(转）

    使用说明:该方法只在office xp 和 2003上 测试通过,2000及以下 版本没试. 注意:你要打开的服务器端的word文档要有写权限.iis要开起 web服务扩展中的webdav为允许 具体 ...

  5. 前端实现导入PPT在线编辑

    主要实现一个在线课件系统,需要对课件进行web的接入和编辑 需求分析: 上传ppt 转换数据,上传完以后,等待端转ppt,然后返回,前端开始数据转换 需要枚举的数据较多,所以拆分了多个方法,分2类,一 ...

  6. ①. SpringBoot整合PageOffice实现在线编辑Word和Excel

    ①. SpringBoot整合PageOffice实现在线编辑Word和Excel PageOffice官网: http://www.zhuozhengsoft.com/ PageOffice集成说明 ...

  7. 文档在线编辑开发心得

    一.背景 在本次公司的开发任务中,偶然接触到了畅写office的文档在线编辑集成开发,在开发中遇到点问题,觉得这个东西挺有趣的,写此文章保存开发心得. 二.前期准备 文档在线编辑功能只有一个api.文 ...

  8. 关于HTML在线编辑文本的编码与解码

    很多在线编辑的网页都需要对用户输入的文本进行html的编码,避免输入的内容影响正常的网页排版,重新编辑时又需要进行对应的解码操作.用google搜索了一下,发现网上引用最多的两个函数是: //编码 f ...

  9. 实现word文档在线编辑

    实现word文档在线编辑 前言 一.docker部署onlyoffice 二.前端demo 三.后端回调处理 四.效果 前言 我们通过使用docker部署的onlyoffice来实现文档的预览编辑,做 ...

最新文章

  1. 2019～2020这个时间段适合买房吗？
  2. 一个地址或二维码自动识别设备，并跳转到各自相应的下载地址，兼容微信
  3. 诊断案例：从实例挂起到归档失败和内存管理的蝴蝶效应
  4. python合并ts视频_python爬取视频网站m3u8视频，下载.ts后缀文件，合并成整视频
  5. Oracle role and user privileges
  6. 6加载光盘 virtualbox vm_6个轻量级Linux发行版（2019年）
  7. Hibernate使用createSqlQuery进行模糊查询时找不到数据
  8. Oracle-随笔笔记
  9. 计算机成人本科学历,计算机专业成人本科
  10. C语言程序设计—01基础知识
  11. 土豪也不会告诉你的IBM X3850 X5
  12. lbj学习日记 03 循环和选择结构的刷题心得
  13. python画两条曲线_python 实现将多条曲线画在一幅图上的方法
  14. 文献阅读-GNC----IEEE Robotics and Automation Letters (RA-L), 2020.
  15. Nvidia TX2+rplidar+autolabor pro1实现自主导航机器人
  16. PHP下载APK文件
  17. Nature：肠道微生物异常为何会导致肝病？
  18. 海尔微型计算机一键还原怎么操作,电脑的一键还原在哪_电脑一键还原详细教程_电脑一键还原怎么操作...
  19. inxni扫地机器人_inxni以内智能扫地机器人APP下载与使用说明
  20. imei生成 java_Imei 生成－java版

热门文章

  1. VB表格控件总览与例程分析
  2. Linux开机过程（转）
  3. 对前后端分离和FastDFS的使用的再理解
  4. 人人都能有数字替身：量子动力FACEGOOD发布AI交互实时数字人
  5. 机器人汉堡店即将开业，做一个汉堡需要5分钟
  6. 论PS的功力，英伟达的AI这次谁也不服
  7. 北大主场夺金ACM-ICPC全球总决赛，总教练罗国杰分享背后“秘笈”
  8. 使用extundelete恢复测试liunx的删除文件
  9. 【344天】我爱刷题系列103（2018.01.15）
  10. Angular Material 教程之布局篇 (五) : 布局参数