编辑要素数据

了解如何添加、更新和删除要素服务中的要素。

通过 Editor 微件可以在要素图层中添加、更新和删除要素，包括几何和属性的编辑。使用前，首先要确保拥有访问和编辑要素图层的访问凭据，并在要素图层的项目页面中，勾选启用编辑选项。凭据可以在门户中生成，并能在项目属性页面上验证。 在本教程中，我们使用 Editor 微件在 My Point 要素图层中添加、更新和删除要素。

步骤 ​

创建新 Pen ​

1. 在此之前，先了解显示地图教程 。

添加模块 ​

1. 通过 require 引入FeatureLayer 和 Editor 模块。

   更多信息

   GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD 使用require 函数加载模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持引用模块和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   js

       const map = new Map({
           basemap: "tianditu-vector" // Basemap layer service
       });

   1
   2
   3
   

添加要素图层 ​

使用 FeatureLayer 类来访问 My Point 要素图层。然后通过 layers 属性将要素图层添加到地图中。

1. 在 map 上方，创建 myPointsFeatureLayer 并设置其 url 属性以访问要素服务。

   js

   require([
   "geoscene/config",
   "geoscene/Map",
   "geoscene/views/MapView",
   
   "geoscene/layers/FeatureLayer",
   "geoscene/widgets/Editor"
   
   ], function(geosceneConfig, Map, MapView, FeatureLayer, Editor) {

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

2. 将 map 中的 layers 属性设置为 myPointsFeatureLayer。

   js

   // Reference a feature layer to edit
   const myPointsFeatureLayer = new FeatureLayer({
       url: "https://www.geosceneonline.cn/server/rest/services/Hosted/My_Point/FeatureServer"
   });
   
   
   const map = new Map({
       basemap: "tianditu-vector", // Basemap layer service
   
       layers: [myPointsFeatureLayer]
   
   });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

创建编辑器微件 ​

通过 Editor 微件，可以以交互方式添加、更新和删除要素。该微件能自动检测到地图中的所有可编辑图层。

1. 创建 editor 并将其添加到 view 的 ui 中。

   js

   const view = new MapView({
       container: "viewDiv",
       map: map,
       center: [116.3,39.9],
       zoom: 9
   });
   
   // Editor widget
   const editor = new Editor({
       view: view
   });
   // Add widget to the view
   view.ui.add(editor, "top-right");

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   

2. 在浏览器的右上角可看到此微件。

编辑要素 ​

使用 Editor 微件添加、更新和删除要素。

1. 如果应用程序未运行，请在右上角单击运行。

2. 在编辑器中，单击添加要素。单击地图以创建具有以下属性的新要素：

   • id： 100
   • name： My Point
   • rating： Good 单击添加将要素添加至 view。单击 < 以返回主窗口。

3. 在编辑器中，单击编辑要素。单击创建的要素并更新其属性值。

   • id： 101
   • name： Awesome Beach
   • rating： Excellent 单击更新以更新 view 中的要素。单击 < 以返回主窗口。

4. 在编辑器中，单击编辑要素。单击编辑的要素，然后单击删除。

运行应用程序 ​

在 CodePen 中，运行代码以显示地图。

现在，可以从 My Point 要素图层中添加、更新和删除要素。

下一步是什么？ ​

要了解如何使用其他API 功能，请参阅以下教程：

• 查询要素图层 (SQL)

• 查询要素图层 (空间)