ArcGIS API for JavaScript学习笔记(6)网页端编辑Web图层

一、发布要素类为Web图层

从ArcGIS Pro中共享要素类为Web图层,并在配置中启用编辑并设置编辑权限。
在这里插入图片描述
共享成功后在要素图层页面复制URL链接备用
在这里插入图片描述

二、编写html

代码如下,url处粘贴上一步复制的链接

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>网页端编辑Web图层</title>
  <style>
    html, body, #viewDiv {
     
     
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css">  
  <script src="https://js.arcgis.com/4.16/"></script>
  
  <script>
    require([
      "esri/WebMap",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Editor"
    ], function(WebMap, MapView, FeatureLayer, Editor) {
     
     

      var myFeatureLayer = new FeatureLayer({
     
     
        url: "https://services5.arcgis.com/6TqOiOhyqcUv6dB0/arcgis/rest/services/铅山县乡镇/FeatureServer/0"
      });

      var webmap = new WebMap({
     
     
        portalItem: {
     
     
          id: "52f08e7f7f9947b0a6592a284ce816f8"
        },
        layers: myFeatureLayer
      });

      var view = new MapView({
     
     
        container: "viewDiv",
        map: webmap,
        center: [117.70,28.31],
        zoom: 10
      });
      
      // Editor widget
      var 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>

三、浏览器中编辑要素图层

双击html,在浏览器中打开
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/baidu_28157641/article/details/108326901