ArcgisForJS如何在线编辑ArcGIS Server发布的几何要素?

文章目录

  • 0.引言
  • 1.ArcGIS创建几何要素
  • [2.ArcGIS Server发布几何要素](#2.ArcGIS Server发布几何要素)
  • [3.ArcgisForJS在线编辑ArcGIS Server发布的几何要素](#3.ArcgisForJS在线编辑ArcGIS Server发布的几何要素)

0.引言

ArcGIS For JS 是一种用于创建和编辑地理信息的 JavaScript 库,它允许用户在线编辑 ArcGIS Server 发布的几何要素。本文从ArcGIS创建几何要素、编辑要素,然后发布要素到ArcGIS Server,最后由ArcgisForJS访问A如此GIS Server发布的几何要素。

1.ArcGIS创建几何要素

(1)新建一个mxd地图文档,命名geoedit。

(2)新建点、线、面要素

创建要素时,添加字段,名称:va,类型:文本。

创建结果如下:

(3)注册要素

(4)编辑点、线、面要素

设置各要素的值,以下以点为例:

再设置线要素和面要素的va值。

(5)设置点、线、面样式

(6)可以保存要素为模板

2.ArcGIS Server发布几何要素

在ArcGIS Server中查看发布的几何要素。

REST URL:http://localhost:6080/arcgis/rest/services/geoedit/FeatureServer

3.ArcgisForJS在线编辑ArcGIS Server发布的几何要素

(1)实现代码

csharp 复制代码
<!DOCTYPE html>
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Create Map</title>  
    <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" />  
    <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script>  
    <style>  
        html,  
        body,  
        #viewDiv {  
            padding: 0;  
            margin: 0;  
            height: 100%;  
            width: 100%;  
        }  
    </style>  
  
    <script type="text/javascript">  
        require(["esri/Map",  
            "esri/views/MapView",  
            "esri/layers/MapImageLayer",  
            "esri/layers/FeatureLayer",  
            "esri/widgets/Editor"  
        ], function (  
            Map,  
            MapView,  
            MapImageLayer,  
            FeatureLayer,  
            Editor  
        ) {  
            const myPointFeatureLayer = new FeatureLayer({  
                url:"http://localhost:6080/arcgis/rest/services/geoedit/FeatureServer/0"  
            });  
            const myLineFeatureLayer = new FeatureLayer({  
                url:"http://localhost:6080/arcgis/rest/services/geoedit/FeatureServer/1"  
            });  
            const myPolygonFeatureLayer = new FeatureLayer({  
                url:"http://localhost:6080/arcgis/rest/services/geoedit/FeatureServer/2"  
            });  
  
            const map = new Map({  
                basemap: "topo-vector"  
            });  
            map.addMany([myPointFeatureLayer, myLineFeatureLayer, myPolygonFeatureLayer]);  
            const view = new MapView({  
                container: "viewDiv", // Reference to the DOM node that will contain the view  
                map: map, // References the map object created in step 3  
                zoom: 3,  
                center: [0, 45]  
            });  
  
            // 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>

(2)实现结果

参考资料:

[1] 一入GIS深似海. 不一样的前端,JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-23].

[2] lrspace. ArcGIS API for Javascript 实现在线要素编辑(二); 2014-12-06 [accessed 2024-02-23].

[3] GIS开发者. ArcGIS API for JavaScript4.8 FeatureLayer编辑; 2018-08-07 [accessed 2024-02-23].

[4] idomyway. ArcGIS API for JavaScript 通过identifyTask实现画线批量选择要素; 2018-01-17 [accessed 2024-02-23].

相关推荐
新缸中之脑2 分钟前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8565 分钟前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习11 分钟前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript
blaizeer40 分钟前
深入理解 CSS 浮动(Float):详尽指南
前端·css
速盾cdn1 小时前
速盾:网页游戏部署高防服务器有什么优势?
服务器·前端·web安全
小白求学11 小时前
CSS浮动
前端·css·css3
什么鬼昵称1 小时前
Pikachu-csrf-CSRF(POST)
前端·csrf
XiaoYu20021 小时前
22.JS高级-ES6之Symbol类型与Set、Map数据结构
前端·javascript·代码规范
golitter.2 小时前
Vue组件库Element-ui
前端·vue.js·ui
儒雅的烤地瓜2 小时前
JS | JS中判断数组的6种方法,你知道几个?
javascript·instanceof·判断数组·数组方法·isarray·isprototypeof