文章目录
- 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。
![](https://file.jishuzhan.net/article/1761637131496722434/dc0e2f6678c55cfeaf530dc7036dd9fe.webp)
(2)新建点、线、面要素
创建要素时,添加字段,名称:va,类型:文本。
![](https://file.jishuzhan.net/article/1761637131496722434/de4305d1eec2b782354f8289a266fca8.webp)
创建结果如下:
![](https://file.jishuzhan.net/article/1761637131496722434/4ff465f56151df6a86749817db3efa92.webp)
(3)注册要素
![](https://file.jishuzhan.net/article/1761637131496722434/636f4aeb30470106a650de4afe7d9c8b.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/c3e2e8b5ec1270e7123c0e5d5bed7e48.webp)
(4)编辑点、线、面要素
![](https://file.jishuzhan.net/article/1761637131496722434/1aba3147d27689687479e737e25ccef5.webp)
设置各要素的值,以下以点为例:
![](https://file.jishuzhan.net/article/1761637131496722434/4d7f1eb3f3d6bdb8d3df0ddfab43f447.webp)
再设置线要素和面要素的va值。
(5)设置点、线、面样式
![](https://file.jishuzhan.net/article/1761637131496722434/5936cd5560af98b907c5a7e8d143d01b.webp)
(6)可以保存要素为模板
![](https://file.jishuzhan.net/article/1761637131496722434/d36d96ef25d40b9889e188784b099f9c.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/d345070ffd2423c29a3c004d659c9d4c.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/0107fe92737704f338ac8a6b87ad9d16.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/b815a057476a321ec88395b0f452e9d1.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/54f689675191dce884b7afb5169a5c1b.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/f522305c7d15c6e9694ba58de7a09134.webp)
2.ArcGIS Server发布几何要素
![](https://file.jishuzhan.net/article/1761637131496722434/769538aa7c5610e5e31f6754651b51f5.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/3c9ef045fab433b8f9fa8306ffd5acf0.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/2a0cde2c7c93563468e2dfa019462bd7.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/3404241a4be441e6008e87b6479c15cb.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/d8158ebb76c744090b1843a1b4f9b6dd.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/975a7b38c873a93541566e28e746cb00.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/4efd989efa009744237d11d23b48a494.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/d0b4a90f94a22ab93139b06fed2de8ed.webp)
在ArcGIS Server中查看发布的几何要素。
![](https://file.jishuzhan.net/article/1761637131496722434/75651418a669c2c9ed6e17203bff6332.webp)
![](https://file.jishuzhan.net/article/1761637131496722434/bb495d4a3e5a3ffb9d1e1c51b39a6539.webp)
REST URL:http://localhost:6080/arcgis/rest/services/geoedit/FeatureServer
![](https://file.jishuzhan.net/article/1761637131496722434/f1598d225ac2f50a02b3b4fcc6841860.webp)
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)实现结果
![](https://file.jishuzhan.net/article/1761637131496722434/fdb6592829538ffa559c76637963ec56.webp)
参考资料:
[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].