<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebGIS</title>
<link rel="stylesheet" type="text/css" href="../3.27/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="../3.27/esri/css/esri.css" />
<script type="text/Javascript" src="../3.27/init.js"></script>
<style type="text/css">
.MapClass {
width: 100%;
height: 500px;
border: 1px solid #000;
}
</style>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var map;
require(["esri/map",
"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/json",
'esri/Evented',
'esri/tasks/PrintTemplate',
'esri/tasks/PrintTask',
'esri/tasks/PrintParameters',
'esri/request',
'esri/config',
'dojo/_base/array',
'dojo/dom',
'dojo/parser',
"esri/InfoTemplate",
"dojo/domReady!"
],
function(Map, on, query, ArcGISDynamicMapServiceLayer, Draw, FeatureLayer, Graphic, Add, Delete, Update, Query,
jsonUtil,
Evented,
PrintTemplate,
PrintTask,
PrintParameters,
esriRequest,
esriConfig,
arrayUtils,
dom,
parser,
InfoTemplate
) {
var featureUrl = "http://localhost:6080/arcgis/rest/services/ZC/aa/FeatureServer/0";
var baseUrl = "http://localhost:6080/arcgis/rest/services/ZC/zc/MapServer";
//map = new esri.Map("MyMapDiv");
map = new Map("MyMapDiv", {
basemap: 'osm',
center: [113.851625, 23.373552],
zoom: 10
})
var layer = new ArcGISDynamicMapServiceLayer(baseUrl);
//map.addLayer(layer);
var infoTemplate = new InfoTemplate("Attributes", "name:${name}");
var layers = new FeatureLayer(featureUrl, {
id: "lay",
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: infoTemplate,
outFields: ["*"]
});
map.addLayer(layers);
/*map.on('click',function(evt){
console.log(evt.mapPoint);
})*/
//用于操作的要素图层，注意我们是操作的宿舍楼图层
var featureLayer = new FeatureLayer(featureUrl, {
mode: FeatureLayer.MODE_SNAPSHOT,
// infoTemplate: infoTemplate,
outFields: ["*"]
});
//map.addLayer(featureLayer);
//在添加要素时，利用Draw工具获得geometry对象
var d = new Draw(map, {
showTooltips: true
});
//要操作的graphic
var g;
query("button").on("click", function(event) {
debugger;
var value = this.innerHTML;
switch (value) {
case "添加要素":
d.activate(Draw.POLYGON);
/*var aajson = {
geometry:{
spatialReference: {wkid: 4326, latestWkid: 4326},
x: "113.05923821722959",
y: "23.839534074518017"
},
symbol:null,
attributes:{
//"OBJECTID": 227,
"农作物输出":"" ,
"土壤本底值": "0.132294",
"大气沉降": "0.036585",
"年净累积率": "0.000436",
"年净累积量": "1.169477",
"灌溉水输入": "1.098019",
"点位编号": "333-33-33",
"纬度": "23.83083",
"经度": "113.17028",
"肥料输入": "0.280426"
}
}
var graphic = new Graphic(aajson);
var add=new Add({
"featureLayer":featureLayer,//给哪一个要素图层添加要素
"addedGraphics":[graphic] //用于添加的要素
})
//执行添加函数
add.performRedo();
//刷新视图
layer.refresh();*/
break;
case "删除要素":
//创建Graphic对象，删除OBJECTID为34的元素，
//因为OBJECTID是主键，所以只需要指定主键即可
// var data =[];
// for(var i=0;i<227;i++){
// var gg=new Graphic("","",{
// "OBJECTID":i
// //点位编号: "333-33-33"
// });
// data.push(gg)
// }
delEle();
g = new Graphic("", "", {
"OBJECTID": 2
//点位编号: "333-33-33"
});
//创建删除对象
var de = new Delete({
"featureLayer": featureLayer,
"deletedGraphics": [g]
//"deletedGraphics":data
});
//执行删除结果
//de.performRedo();
//刷新图层
//layer.refresh();
break;
case "修改要素":
//用于修改要素的函数,查询更新为36的要素
updateFeature(1);
break;
case "查询要素":
//用于查询要素的函数，查询主键为36的要素
searchFeather(1);
break;
}
});
function delEle() {
var html = "";
for (var i = 0; i < map.getLayer("lay").graphics.length; i++) {
html += '<option value="' + map.getLayer("lay").graphics[i].attributes["OBJECTID"] + '">' + map.getLayer("lay")
.graphics[i].attributes["OBJECTID"] + '</option>'
}
$("#sel").html(html);
$("#sel").show();
}
$("#sel").change(function() {
//alert($(this).val())
g = new Graphic("", "", {
"OBJECTID": $(this).val()
//点位编号: "333-33-33"
});
//创建删除对象
var de = new Delete({
"featureLayer": featureLayer,
"deletedGraphics": [g]
//"deletedGraphics":data
});
//执行删除结果
de.performRedo();
//刷新图层
setTimeout(function() {
layers.refresh();
}, 2000)
$("#sel").hide();
})
//当画图完毕时，添加要素
on(d, "draw-complete", function(result) {
//要素只赋予了geometry，属性信息为空
var infoTemplate = new InfoTemplate("Attributes", "name:${name}");
var graphic = new Graphic(result.geometry, null, {
"name": "tt"
}, infoTemplate);
//var graphic = new Graphic(result.geometry, null,{});
var add = new Add({
"featureLayer": featureLayer, //给哪一个要素图层添加要素
"addedGraphics": [graphic] //用于添加的要素
})
//执行添加函数
add.performRedo();
//刷新视图
setTimeout(function() {
layers.refresh();
}, 2000)
//layers.refresh();
//关闭绘图对象
d.deactivate();
});
//根据id修改要素
function updateFeature(id) {
//注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据
searchFeather(id, function(result) {
//获得旧的要素
var oldgraphic = result[0];
//新的要素
//var newgraphic=new Graphic(oldgraphic.toJson());
var oldjson = oldgraphic.toJson();
oldjson.attributes["name"] = "kk"
var newgraphic = new Graphic(oldjson);
//将alias属性修改为:修改后的A区宿舍
//newgraphic.attributes.农作物输出="0.245553";
//创建更新对象
var update = new Update({
"featureLayer": featureLayer,
"postUpdatedGraphics": [newgraphic], //修改之后的要素
"preUpdatedGraphics": [oldgraphic] //修改之前的要素
})
//执行刷新操作
update.performRedo();
//刷新视图
//layer.refresh();
setTimeout(function() {
layers.refresh();
}, 2000)
console.log("修改成功");
})
}
//根据id查询要素
function searchFeather(id, callback) {
//得到要素图层的主键属性
var idProperty = 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) {
alert(result.length);
//因为我们根据主键查询，一定只有一个元素
var graphic = result[0];
//获得属性
var attributes = graphic.attributes;
//得到该属性信息转换成字符串
var result = jsonUtil.stringify(attributes)
//将结果弹出一下
alert(result);
} else //如果callback存在，说明是更新操作
{
callback(result);
}
});
}
});
</script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<button class="btn">添加要素</button>
<button class="btn">删除要素</button>
<button class="btn">修改要素</button>
<button class="btn">查询要素</button>
<select id='sel' style='display: none;'>
<option value="请选择"></option>
</select>
</body>
</html>
