1：在处理在线要素数据编辑首先要进行数据库的添加，发布要素服务。
参考文章：https://mp.youkuaiyun.com/postedit/78993203
2：在线要素的加载
/**
* 添加线要
* @param {Object} url 线要素服务地址
*/
function addFeatureLine(url){
if(featureLayer!=undefined ){
map.removeLayer(featureLayer)
}
featureLayer = new FeatureLayer(url,{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
//设置要素的样式
var outline = new
SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setWidth(5).setColor(new Color([255,255,0,1]));
var renderer = new SimpleRenderer(outline);
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
}3：要素的添加（面要素为类）
（1）开启添加
$("#add").click(function(){
d.activate(Draw.POLYGON);
});（2）：检测绘制完成后添加数据
on(d, "draw-complete", function (result) {
geometry = result.geometry;
//要素添加的属性
var atturibute = {
"grid_name":"1",
"name":name,
"code":code
};
var graphic = new Graphic(geometry,null,attribute);
var add=new Add({
"featureLayer":featureLayer,//给哪一个要素图层添加要素
"addedGraphics":[graphic]//用于添加的要素
})
//执行添加函数
add.performRedo();
//刷新视图
featureLayer.refresh();
//关闭绘图对象
d.deactivate();
});3.数据的修改
（1）启动编辑（双击开始，双击结束要素修改）
/**
* 要素处于编辑状态
*/
function changeFeature(){
var editingEnabled = false;
featureLayer.on("dbl-click", function(evt) {
event.stop(evt);
if (editingEnabled === false) {
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
} else {
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
}（2）修改属性
/**
* 修改要素属性函数
* @param {Object} id 修改的要素属性的ID值
* @param {Object} attribute 修改后的要素属性对象
*/
function updateFeatureAttribute(id,attribute){
//注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据
searchFeather(id,function(result){
//获得旧的要素
var oldgraphic=result[0];
//新的要素
var newgraphic=new Graphic(oldgraphic.toJson());
//循环修改要素的属性
for(var item in attribute){
newgraphic.attributes[item] = attribute[item]
}
//创建更新对象
var update=new Update({
"featureLayer":featureLayer,
"postUpdatedGraphics":[newgraphic],//修改之后的要素
"preUpdatedGraphics":[oldgraphic]//修改之前的要素
})
//执行刷新操作
update.performRedo();
//刷新视图
featureLayer.refresh();
})
}
//根据id查询要素
function searchFeather(id,callback){
//得到要素图层的主键属性
var idProper
//ty = featureLayer.objectIdField;
//定义查询参数
var query = new Query();
//是否返回几何形状
query.returnGeometry = false;
//图层的主键名称（根据自己要求修改）
query.objectIds = [id];
//查询条件1=1意思是：只根据主键查询，忽略where子句
query.where = "1=1";
//进行查询
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){
//如果callback不存在，说明仅仅是查询操作
if(!callback){
//因为我们根据主键查询，一定只有一个元素
var graphic=result[0];
//获得属性
var attributes=graphic.attributes;
//得到该属性信息转换成字符串
var result=jsonUtil.stringify(attributes)
//将结果弹出一下
alert(result);
}else//如果callback存在，说明是更新操作
{
callback(result);
}
});
}
});（3）修改属性数据需要id值，这个值需要数据鼠标点击获取要素的id
4:全部代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>在线数据采集工具</title>
<link rel="shortcut icon" href="../css/favicon.ico" />
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<link href="../css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="../css/jquery.toast.css" />
<link rel="stylesheet" href="../css/animate.min.css" />
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.showBtn{
position: absolute;
top:10px;
left: 100px;
z-index: 999999;
}
.panel{
position: absolute;
top:100px;
left: 20px;
z-index: 999999;
display: none;
}
#grid{
width: 350px;
}
#root{
width: 475px;
}
.lable{
height: 34px;
padding-top: 5px;
padding-right: 10px;
text-align: right;
padding-left: 0px;
font-size: 16px;
}
.col-md-9,.col-md-8{
padding-left: 0px;
}
/*.btn{
margin-top: 10px;
margin-left: 80px;
}*/
#addBtn,#addLineBtn{
width: 235px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 80px;
}
#addLineBtn{
width: 300px;
margin-left: 140px;
}
#closepanel,#closeLinePanel{
float: right;
position: absolute;
top:12px;
right: 10px;
}
.label{
text-align: right !important;
}
</style>
<!--<script src="https://js.arcgis.com/3.25/"></script> -->
<!--服务器的端口是8081-->
<script src="http://117.159.25.220:8081/arcgis_js_api/library/3.20/3.20/init.js"></script>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript" src="../js/bootstrap.js" ></script>
<script type="text/javascript" src="../js/jquery.toast.js" ></script>
<script type="text/javascript" src="../js/config.js" ></script>
</head>
<body>
<div id="map">
<!--数据添加控件-->
<div class="showBtn">
<div class="btn-group" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="title">
三级网格
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">三级网格</a></li>
<li><a href="#">路长数据</a></li>
</ul>
</div>
<button type="button" class="btn btn-default" id="add">添加要素</button>
<button type="button" class="btn btn-default" id="change">修改要素</button>
</div>
</div>
<!--对话框-->
<div class="panel panel-default" id="grid">
<div class="panel-heading">
<h3 class="panel-title" id="grid-panel-title">输入增加网格的信息</h3>
<img id="closepanel" src="../img/iconClose.png">
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-3 lable">网格名称</div>
<div class="col-xs-6 col-md-9">
<input type="text" class="form-control" id="gridname" placeholder="请输入网格名称">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-3 lable">网格长</div>
<div class="col-xs-6 col-md-9">
<input type="text" class="form-control" id="gridperson" placeholder="请输入网格员名字">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-3 lable">区划编码</div>
<div class="col-xs-6 col-md-9">
<input type="text" class="form-control" id="code" placeholder="街道区划码+一级网格码+二级网格码+三级网格码">
</div>
</div>
<button type="button" class="btn btn-primary" id="addBtn">确认添加</button>
</div>
</div>
<!--对话框-->
<div class="panel panel-default" id="root">
<div class="panel-heading">
<h3 class="panel-title" id="root-panel-title">输入路长制基本信息</h3>
<img id="closeLinePanel" src="../img/iconClose.png">
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4 lable">
路段名称 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="name" placeholder="请输入路段名称" required="required">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
路段编码 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="code" placeholder="路段编码" >
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
所属办事处 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="office" placeholder="所属办事处">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
二级路长姓名
<span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="two_name" placeholder="二级路长姓名">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
二级路长电话 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="two_tel" placeholder="二级路长电话">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
三级路长姓名 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="three_name" placeholder="三级路长姓名">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
三级路长电话 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="three_tel" placeholder="二级路长电话">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
寻路员姓名 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="findp_name" placeholder="寻路员姓名">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
寻路员电话 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="findp_tel" placeholder="寻路员姓名">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-6 col-md-4 lable">
路段描述 <span style="color: red;">*</span>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" class="form-control" id="descrition" placeholder="请输入路段范围的描述（50字以内）">
</div>
</div>
<button type="button" class="btn btn-primary" id="addLineBtn">确认添加</button>
</div>
</div>
</div>
<script>
var map,featureLayer,updataId,upDataLineId;
var featureType = 0 ,eventType = 0,eventLineType = 0;
require([
"esri/SnappingManager",
"dojo/keys",
"esri/sniff",
"esri/map",
"esri/dijit/Search",
"esri/toolbars/edit",
"esri/layers/LabelClass",
"esri/symbols/TextSymbol",
"esri/Color",
"../js/tiandituVecLayer.js",
"../js/tiandituAnnoLayer.js",
"esri/geometry/Extent",
'esri/layers/WMSLayer',
'esri/layers/WMSLayerInfo',
"dojo/keys",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleLineSymbol",
"dojo/on",
"dojo/query",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/toolbars/draw",
"esri/layers/FeatureLayer",
"esri/graphic",
"esri/dijit/editing/Add",
"esri/dijit/editing/Delete",
"esri/dijit/editing/Update",
"esri/tasks/query",
"dojo/_base/array",
"dojo/_base/event",
"dojo/json",
"esri/geometry/Point",
"dojo/domReady!"
],
function(SnappingManager,keys,has,Map,Search,Edit,LabelClass,TextSymbol,Color,TiandituVecLayer,TiandituAnnoLayer,Extent,WMSLayer, WMSLayerInfo,keys, SimpleMarkerSymbol,
SimpleFillSymbol,SimpleRenderer,SimpleLineSymbol,on,query, ArcGISDynamicMapServiceLayer, Draw,FeatureLayer,Graphic,Add,Delete,Update,Query,jsonUtil,
event,Point){
//禁止整个浏览器的右键事件
document.oncontextmenu = function(){
return false;
}
//地图
map = new Map("map", {
center: [113.774215698242,34.7932548522949],
zoom: 14,
logo:false,
showLabels : true //一定要设置为true
});
//多边形编辑工具
var currentLayer = null;
var editToolbar = new Edit(map);
editToolbar.on("deactivate", function(evt) {
currentLayer.applyEdits(null, [evt.graphic], null);
});
//添加天地图
var veclayer=new TiandituVecLayer();
map.addLayer(veclayer);
var annolayer=new TiandituAnnoLayer();
map.addLayer(annolayer,1);
// http://localhost:6080/arcgis/rest/services/grid_new/MyMapService/FeatureServer
//动态加载网格
var url = appConfig.domain+"grid_new/MyMapService/FeatureServer/0";
addFeatureLayer(url,0);
/**
*服务的切换
*/
$("ul li").click(function(evt){
var id = $(this).index()
switch (id){
case 0:
var url = appConfig.domain+"grid_new/MyMapService/FeatureServer/0";
addFeatureLayer(url,0);
$("#title").html('三级网格 <span class="caret"></span>');
featureType = 0;
break;
case 1:
var url = appConfig.domain+"root/MyMapService/FeatureServer/0";
addFeatureLine(url)
$("#title").html('路长数据 <span class="caret"></span>');
featureType = 1;
break;
default:
break;
}
});
/**
* 添加发布的面状数据要素服务的地址
* @param {Object} url 要素服务的地址
* @param {Object} id 服务的图层
*/
function addFeatureLayer(url,id){
if(featureLayer!=undefined ){
map.removeLayer(featureLayer)
}
featureLayer = new FeatureLayer(url,{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
//设置面要素的样式
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setColor(new Color([255,255,0,0.25]));
var renderer = new SimpleRenderer(defaultSymbol);
featureLayer.setRenderer(renderer);
//要素服务添加标注
var statesLabel = new TextSymbol().setColor(new Color("#0a162c"));
statesLabel.font.setSize("12pt");
statesLabel.font.setWeight(600);
//显示网格的名称
var labelClass = new LabelClass({
"labelExpressionInfo": {
"value": "{grid_name}"
}
});
labelClass.symbol = statesLabel;
featureLayer.setLabelingInfo([labelClass]);
//开启焦点捕捉
startSnap(featureLayer);
//开启右键事件
mouseRightEvent();
map.addLayer(featureLayer);
}
/**
* 开启焦点捕捉函数
* @param {Object} featureLayer 要捕捉的图层
*/
function startSnap(featureLayer){
//开启焦点捕捉
var snapManager = map.enableSnapping({
tolerance:2,
snapKey: has("mac") ? keys.META : keys.CTRL
});
var layerInfos = [{
layer: featureLayer
}];
snapManager.setLayerInfos(layerInfos);
}
/**
* 添加线要素
* @param {Object} url 线要素服务地址
*/
function addFeatureLine(url){
if(featureLayer!=undefined ){
map.removeLayer(featureLayer)
}
featureLayer = new FeatureLayer(url,{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
//设置要素的样式
var outline = new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setWidth(5).setColor(new Color([255,255,0,1]));
var renderer = new SimpleRenderer(outline);
featureLayer.setRenderer(renderer);
//开启焦点捕捉
startSnap(featureLayer);
//开启右键修改属性
mouseRightEvent();
map.addLayer(featureLayer);
}
//在添加要素时，利用Draw工具获得geometry对象
var d = new Draw(map, { showTooltips: true });
//要操作的graphic
var g;
$("#add").click(function(){
switch (featureType){
case 0:
d.activate(Draw.POLYGON);
$("#grid-panel-title").html("输入增加网格的信息");
break;
case 1:
d.activate(Draw.POLYLINE);
eventLineType =0;
break;
default:
break;
}
});
/**
* 修改要素
*/
$("#change").click(function(){
//在修改要素前首先关闭绘图功能，避免出现在修改要素的过程中出现绘图的功能
d.deactivate();
changeFeature();
});
var geometry ;
//当画图完毕时，弹出要素属性
on(d, "draw-complete", function (result) {
if(featureType == 0){
$("#grid").addClass("animated fadeInLeft");
$("#grid").show();
$("#grid").css("top",100);
$("#grid").css("left",20);
}else{
$("#root").addClass("animated fadeInLeft");
$("#root").show();
}
geometry = result.geometry;
//关闭绘图对象
d.deactivate();
});
//要素属性添加完毕后将数据保存到数据库
$("#addBtn").click(function(){
var grid = $("#gridname").val();
var name = $("#gridperson").val();
var code = $("#code").val();
if(grid==''|| name==''||code==''){
toast("网格属性数据不能为空");
return false;
}
var atturibute = {
"grid_name":grid,
"name":name,
"code":code
};
if(eventType == 0&&featureType==0){
addFeature(null,atturibute);
toast("数据添加成功");
clearInputValue("#grid input");
$("#grid").hide();
}else if(eventType == 1&&featureType==0){
updateFeatureAttribute(updataId,atturibute);
eventType = 0;
clearInputValue("#grid input");
$("#grid").hide();
}
});
/**
* 路长信息的保存
*/
$("#addLineBtn").click(function(){
var atturibute = {}
$("#root input").each(function(){
if($(this).val()==""||$(this).val()==undefined){
toast("数据不能为空");
return false;
}
var id = $(this).attr("id")
atturibute[id] = $(this).val();
return ;
})
//设置线要素样式
var outline = new SimpleLineSymbol(new Color([255,255,0,1])).setWidth(5);
if(eventLineType == 0){
//添加线要素
addFeature(outline,atturibute);
toast("信息添加成功");
}else{
//修改要素属性
updateFeatureAttribute(upDataLineId,atturibute);
clearInputValue("#root input");
toast("信息修改成功");
}
$("#root").hide();
});
//取消添加数据
$("#closepanel").click(function(){
if(featureType==0&&eventType == 0){
// $("#grid").addClass("animated fadeOutLeft");
$("#grid").hide();
}else if(featureType==0&&eventType == 1){
// $("#grid").addClass("animated fadeOutLeft");
$("#grid").hide();
eventType=0;
clearInputValue("#grid input");
}
})
/**
* 关闭路长制面板
*/
$("#closeLinePanel").click(function(){
//$("#root").addClass("animated fadeOutLeft");
$("#root").hide();
clearInputValue("#root input");
})
/**
* 弹出框
*/
function toast(text){
$.toast({
heading: '温馨提示',
text: text,
position: 'top-center',
stack: false,
hideAfter: 1500,
loader: false,
}) ;
}
/**
* 循环将一个input组的input属性清除
* @param {Object} id 表单的根节点
*/
function clearInputValue(id){
$(id).each(function(){
$(this).val("")
})
}
//
changeFeature();
/**
* 要素处于编辑状态
*/
function changeFeature(){
var editingEnabled = false;
featureLayer.on("dbl-click", function(evt) {
event.stop(evt);
if (editingEnabled === false) {
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
} else {
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
}
/**
* 点击确定将添加的要素保存在数据库中
*/
function addFeature(symbol,attribute){
var graphic = new Graphic(geometry,symbol,attribute);
var add=new Add({
"featureLayer":featureLayer,//给哪一个要素图层添加要素
"addedGraphics":[graphic]//用于添加的要素
})
//执行添加函数
add.performRedo();
//刷新视图
featureLayer.refresh();
}
//开启右键功能
mouseRightEvent();
/**
* 要素服务的右键事件
*/
function mouseRightEvent(){
featureLayer.on("mouse-down", function(evt) {
event.stop(evt);
if(evt.button == 2){
if(featureType == 0){
$("#grid-panel-title").html("修改要素属性信息")
var info = evt.graphic.attributes;
$("#grid").addClass("animated fadeInLeft");
$("#grid").show();
$("#grid").css("top",$(window).height()/2-200);
$("#grid").css("left",$(window).width()/2);
$("#gridname").val(info.grid_name);
$("#gridperson").val(info.name);
$("#code").val(info.code);
map.centerAt(evt.mapPoint);
eventType = 1;
updataId = info.objectid_12;
}else{
changLineAttribute(evt.mapPoint,evt.graphic.attributes);
eventLineType = 1;
}
}
});
}
/**
* 右键线要素属性
* @param {Object} centerPoint
* @param {Object} attributes
*/
function changLineAttribute(centerPoint,attributes){
$("#root-panel-title").html("修改要素属性信息") ;
$("#root").addClass("animated fadeInLeft");
$("#root").show();
map.centerAt(centerPoint);
upDataLineId = attributes.objectid;
//循环填充input
$("#root input").each(function(){
var id = $(this).attr("id")
$(this).val(attributes[id]);
return ;
})
}
/**
* 修改要素属性函数
* @param {Object} id 修改的要素属性的ID值
* @param {Object} attribute 修改后的要素属性对象
*/
function updateFeatureAttribute(id,attribute){
//注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据
searchFeather(id,function(result){
//获得旧的要素
var oldgraphic=result[0];
//新的要素
var newgraphic=new Graphic(oldgraphic.toJson());
//循环修改要素的属性
for(var item in attribute){
newgraphic.attributes[item] = attribute[item]
}
//创建更新对象
var update=new Update({
"featureLayer":featureLayer,
"postUpdatedGraphics":[newgraphic],//修改之后的要素
"preUpdatedGraphics":[oldgraphic]//修改之前的要素
})
//执行刷新操作
update.performRedo();
//刷新视图
featureLayer.refresh();
})
}
//根据id查询要素
function searchFeather(id,callback){
//得到要素图层的主键属性
var idProper
//ty = featureLayer.objectIdField;
//定义查询参数
var query = new Query();
//是否返回几何形状
query.returnGeometry = false;
//图层的主键名称（根据自己要求修改）
query.objectIds = [id];
//查询条件1=1意思是：只根据主键查询，忽略where子句
query.where = "1=1";
//进行查询
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){
//如果callback不存在，说明仅仅是查询操作
if(!callback){
//因为我们根据主键查询，一定只有一个元素
var graphic=result[0];
//获得属性
var attributes=graphic.attributes;
//得到该属性信息转换成字符串
var result=jsonUtil.stringify(attributes)
//将结果弹出一下
alert(result);
}else//如果callback存在，说明是更新操作
{
callback(result);
}
});
}
});
</script>
</body>
</html>
config.js
扫一扫
8650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
