编辑要素数据
了解如何添加、更新和删除要素服务中的要素。
通过 Editor 微件可以对要素图层进行添加、更新和删除要素。此微件允许编辑几何和属性。要使用微件，需确保您拥有访问和编辑要素图层的正确凭据，并且该要素图层要在设置中启用编辑，属性设置为 true。凭据可以从门户上生成，启用编辑可在资源对应详情页面中设置。
在本教程中，将使用 Editor 微件在 My Points 要素图层中添加、更新和删除要素。
步骤
创建新 Pen
添加模块
在
require语句中，添加FeatureLayer和Editor模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. Change line 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<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene JavaScript Tutorials: 编辑要素数据 </title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer", "geoscene/widgets/Editor" ], function(geosceneConfig,Map, MapView, FeatureLayer, Editor) { // Reference a feature layer to edit const myPointsFeatureLayer = new FeatureLayer({ url: "https://services3.arcgis.com/<YOUR ID>/arcgis/rest/services/my_points/FeatureServer" }); const map = new Map({ basemap: "tianditu-vector", // Basemap layer service layers: [myPointsFeatureLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.02700], zoom: 13 }); // Editor widget const editor = new Editor({ view: view }); // Add widget to the view view.ui.add(editor, "top-right"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
添加要素图层
通过 FeatureLayer 类定义 My Points 要素图层，然后通过 layers 属性将要素图层添加到地图中。
在
map上方，创建myPointsFeatureLayer并设置其url属性以访问要素服务。Add line. Add line. Add line. Add line. 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<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene JavaScript Tutorials: 编辑要素数据 </title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer", "geoscene/widgets/Editor" ], function(geosceneConfig,Map, MapView, FeatureLayer, Editor) { // 引用要素图层以进行编辑 const myPointsFeatureLayer = new FeatureLayer({ url: "https://services3.arcgis.com/arcgis/rest/services/my_points/FeatureServer" });
const map = new Map({ basemap: "tianditu-vector", // 底图图层服务 layers: [myPointsFeatureLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.02700], zoom: 13 }); // Editor widget const editor = new Editor({ view: view }); // Add widget to the view view.ui.add(editor, "top-right"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>将
map中的layers属性设置为myPointsFeatureLayer。Add line. 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<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene JavaScript Tutorials: 编辑要素数据 </title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer", "geoscene/widgets/Editor" ], function(geosceneConfig,Map, MapView, FeatureLayer, Editor) { // 引用要素图层进行编辑 const myPointsFeatureLayer = new FeatureLayer({ url: "https://services3.arcgis.com/arcgis/rest/services/my_points/FeatureServer" }); const map = new Map({ basemap: "tianditu-vector", // 底图图层服务 layers: [myPointsFeatureLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.02700], zoom: 13 }); // Editor widget const editor = new Editor({ view: view }); // Add widget to the view view.ui.add(editor, "top-right"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
创建编辑器微件
通过 Editor 微件，您可以以交互方式添加、更新和删除要素。该微件能自动检测到地图中的可编辑图层。
创建
editor并将其添加到view的ui中。Add line. Add line. Add line. Add line. Add line. Add line. 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<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene JavaScript Tutorials: 编辑要素数据 </title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer", "geoscene/widgets/Editor" ], function(geosceneConfig,Map, MapView, FeatureLayer, Editor) { // Reference a feature layer to edit const myPointsFeatureLayer = new FeatureLayer({ url: "https://services3.arcgis.com/<YOUR ID>/arcgis/rest/services/my_points/FeatureServer" }); const map = new Map({ basemap: "tianditu-vector", // Basemap layer service layers: [myPointsFeatureLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.02700], zoom: 13 }); // 编辑器微件 const editor = new Editor({ view: view }); // 将微件添加至视图 view.ui.add(editor, "top-right"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>您应在浏览器的右上角看到此微件。
编辑要素
使用 Editor 微件添加、更新和删除要素。
如果应用程序未运行，请在右上角单击运行。
在编辑器中，单击添加要素。单击地图以创建具有以下属性的新要素：
- id：
100 - name：
My Point - rating：
Good
单击添加将要素添加至
view中。单击 < 以返回主窗口。- id：
在编辑器中，单击编辑要素。单击创建的要素并更新其属性值。
- id：
101 - name：
Awesome Beach - rating：
Excellent
单击更新以更新
view中的要素。单击 < 以返回主窗口。- id：
在编辑器中，单击编辑要素。单击编辑的要素，然后单击删除。
运行应用程序
在 CodePen 中，运行代码以显示地图。
现在，您应能够从 My Points 要素图层中添加、更新和删除要素。
下一步是什么？
要了解如何使用其他API 功能，请参阅以下教程：
解决方案
估计时间
7 分钟