简要说明
- 主要是在官方的demo上修改的
- 使用的是ArcGIS Server发布的FeatureService
- 主要是点要素的编辑，面线等其他要素的编辑方法类似，不同之处在于添加要素前绘制Graphic
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>要素编辑</title>
<link type="text/css" rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css"/>
<script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.editArea-container {
background: #fff;
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5em;
overflow: auto;
padding: 12px 15px;
width: 300px;
}
.edit-button:hover,
.edit-button:focus {
background-color: #e4e4e4;
}
.inputInfo {
font-size: 12px;
height: 32px;
margin-bottom: 6px;
padding: 0 6px;
width: 100%;
}
.list-heading {
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
color: #323232;
}
.edit-button {
font-size: 14px;
height: 32px;
margin-top: 10px;
width: 100%;
background-color: transparent;
border: 1px solid #0079c1;
color: #0079c1;
}
.or-wrap {
background-color: #e0e0e0;
height: 1px;
margin: 2em 0;
overflow: visible;
}
.or-text {
background: #fff;
line-height: 0;
padding: 0 1em;
position: relative;
top: -.75em;
}
input:invalid {
border: 1px solid red;
}
input:valid {
border: 1px solid green;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/Layer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Expand",
"esri/geometry/Extent",
"esri/Viewpoint",
"dojo/on",
"dojo/dom",
"esri/config",
"dojo/domReady!"
],
function(
Map, SceneView, Layer,FeatureLayer, Graphic, Expand,
Extent, Viewpoint,
on, dom,esriConfig
) {
esriConfig.request.corsEnabledServers.push("localhost:6080");//设置地图服务器已允许跨域
var editExpand;
var editArea, attributeEditing,
inputUserInfo, updateInstructionDiv;
//当前选中要素
var editFeature;
var map = new Map({
basemap: "streets"
});
// 要素服务范围
var initialExtent = new Extent({
xmin: 1.2700412318100002E7,
ymin: 2989372.047600001,
xmax: 1.2945809132E7,
ymax: 3341430.8713999987,
spatialReference: 102100
});
var view = new SceneView({
container: "viewDiv",
map: map,
extent: initialExtent
});
//属性模版
var popupTemplate = {
title: "测试数据",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "info",
label: "信息",
format: {
places: 0,
digitSeparator: true
}
}
]
}]
};
//添加ArcGIS Server FeatureService服务
var featureLayer = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/featureedit/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate
});
map.add(featureLayer);
setupEditing();
setupView();
function applyEdits(params) {
unselectFeature();
var promise = featureLayer.applyEdits(params);
editResultsHandler(promise);
}
//编辑修改成功后，回调更新要素
function editResultsHandler(promise) {
promise
.then(function(editsResult) {
var extractObjectId = function(result) {
return result.objectId;
};
if (editsResult.addFeatureResults.length > 0) {
var adds = editsResult.addFeatureResults.map(
extractObjectId);
newIncidentId = adds[0];
selectFeature(newIncidentId);
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
//添加点击事件，通过点击获得objectIdField，进行查询
view.on("click", function(event) {
unselectFeature();
view.hitTest(event).then(function(response) {
if (response.results.length > 0 && response.results[0].graphic) {
var feature = response.results[0].graphic;
selectFeature(feature.attributes[featureLayer.objectIdField]);
inputUserInfo.value = feature.attributes[
"info"];
attributeEditing.style.display = "block";
updateInstructionDiv.style.display = "none";
}
});
});
//通过objectId，在FeatureLayer中查询到Feature,设置高亮样式，并添加到graphics显示
function selectFeature(objectId) {
// 点要素选中样式
var selectionSymbol = {
type: "simple-marker",
color: [0, 0, 0, 0],
style: "square",
size: "40px",
outline: {
color: [0, 255, 255, 1],
width: "3px"
}
};
var query = featureLayer.createQuery();
query.where = featureLayer.objectIdField + " = " + objectId;
featureLayer.queryFeatures(query).then(function(results) {
if (results.features.length > 0) {
editFeature = results.features[0];
editFeature.symbol = selectionSymbol;
view.graphics.add(editFeature);
}
});
}
// 清除选中信息
function unselectFeature() {
//隐藏编辑面板
attributeEditing.style.display = "none";
updateInstructionDiv.style.display = "block";
inputUserInfo.value = null;
view.graphics.removeAll();
}
// 添加折叠编辑面板
function setupView() {
editExpand = new Expand({
expandIconClass: "esri-icon-edit",
expandTooltip: "Expand Edit",
expanded: true,
view: view,
content: editArea
});
view.ui.add(editExpand, "top-right");
}
//初始化各类查询按钮监听
function setupEditing() {
editArea = dom.byId("editArea");
updateInstructionDiv = dom.byId("updateInstructionDiv");
attributeEditing = dom.byId("featureUpdateDiv");
inputUserInfo = dom.byId("inputUserInfo");
//各类按钮监听事件设置
//更新要素
on(dom.byId("btnUpdate"), "click", function(event) {
if (editFeature) {
editFeature.attributes["info"] = inputUserInfo.value;
var edits = {
updateFeatures: [editFeature]
};
applyEdits(edits);
}
});
//添加要素
on(dom.byId("btnAddFeature"), "click", function() {
unselectFeature();
on.once(view, "click", function(event) {
event.stopPropagation();
if (event.mapPoint) {
point = event.mapPoint.clone();
point.z = undefined;
point.hasZ = false;
newIncident = new Graphic({
geometry: point,
attributes: {}
});
var edits = {
addFeatures: [newIncident]
};
applyEdits(edits);
attributeEditing.style.display = "block";
updateInstructionDiv.style.display = "none";
dom.byId("viewDiv").style.cursor = "auto";
} else {
console.error("event.mapPoint is not defined");
}
});
dom.byId("viewDiv").style.cursor = "crosshair";
editArea.style.cursor = "auto";
});
//要素删除
on(dom.byId("btnDelete"), "click", function() {
var edits = {
deleteFeatures: [editFeature]
};
applyEdits(edits);
});
}
});
</script>
</head>
<body>
<div id="editArea" class="editArea-container">
<div id="addFeatureDiv">
<h3 class="list-heading">编辑要素</h3>
<ul style="font-size: 13px; padding-left: 1.5em;">
<li>点击加点</li>
<li>点击地图添加点</li>
</ul>
<input type="button" class="edit-button" value="添加点要素" id="btnAddFeature">
</div>
<div id="updateInstructionDiv" style="text-align:center">
<p class="or-wrap">
<span class="or-text">Or</span>
</p>
<p>选择一个点进行编辑或删除</p>
</div>
<div id="featureUpdateDiv" style="display:none; margin-top: 1em;">
<h3 class="list-heading">进入点信息</h3>
<div id="attributeArea">
<label for="inputUserInfo">信息:</label>
<input class="inputInfo" required type="email" name="email" id="inputUserInfo" pattern="[^ @]*@[^ @]*"
placeHolder="Enter email address">
<br>
<input type="button" class="edit-button" value="更新要素信息" id="btnUpdate">
</div>
<div id="deleteArea">
<input type="button" class="edit-button" value="删除要素" id="btnDelete">
</div>
</div>
</div>
<div id="viewDiv"></div>
</body>
</html>界面大致效果
经过编辑前后，使用ArcMap打开发布的地图文档对比
说明，编辑FeatureLayer地图服务后，服务的数据源已经进行了改变，FeatureLayer的编辑操作是对数据源进行更改。
扫一扫
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
