<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.20/3.20/init.js"></script>
<style>
#myMapDiv{
height: 500px;
width: 900px;
border: 1px solid black;
}
</style>
<script>
require(["dojo/dom","esri/layers/FeatureLayer","esri/dijit/editing/Add","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleMarkerSymbol","dojo/colors","esri/graphic","esri/layers/GraphicsLayer","esri/geometry/Point","esri/toolbars/draw","esri/map","esri/layers/ArcGISDynamicMapServiceLayer","dojo/domReady!"],
function (dom,FeatureLayer,Add,SimpleLineSymbol,SimpleMarkerSymbol,Color,Graphic,GraphicsLayer,Point,Draw,Map,ArcGISDynamicMapServiceLayer) {
var map=new Map("myMapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/服务/point要素服务/MapServer");
map.addLayer(layer);
var featureLayer=new FeatureLayer("http://localhost:6080/arcgis/rest/services/服务/point要素服务/FeatureServer/0");
var draw=new Draw(map,{showTooltips:true}); //定义工具
dom.byId("btn").onclick=function () { //点击按钮事件
draw.activate(Draw.POINT); //激活绘制工具，并定义绘制要素的类型
catchGridePoint(); //执行捕捉格网点的函数
};
function changePoint(x,y) { //定义生成点的函数
var point = new Point({
"x":x,
"y":y,
"spatialReference":{"wkid":102100}
});
return point;
};
function dis(p1,p2) { //定义两点距离函数
return(Math.sqrt(Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2)));
}
var gridePointGraphicLayer=new GraphicsLayer(); //定义一个存放捕捉格网点的graphicLayer
var grideP; //标记某个捕捉的格网的点
var mouseMoveEvent; //定义鼠标移动事件函数
function catchGridePoint() { //捕捉格网点函数
mouseMoveEvent= map.on("mouse-move",function (evt) { //鼠标移动函数
gridePointGraphicLayer.clear(); //在捕捉到某个点之前，先把之前捕捉的点给清空
for(var i=-10;i<10;i++) //两个循环遍历出格网所有的点
{
for(j=-10;j<10;j++)
{
var p=changePoint(0+i*0.01,0+j*0.01); //格网的点
if(dis(evt.mapPoint,p)<0.003) //如果鼠标的点与格网的点之间的距离小于3毫米，则执行以下事件
{
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0,0,0]),2);
var markerSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,lineSymbol,new Color([0,0,0]));
var gridePointGraphic=new Graphic(p,markerSymbol);//定义一个graphic，存放捕捉的格网的点
gridePointGraphicLayer.add(gridePointGraphic);//将这个点放在graphicLayer
map.addLayer(gridePointGraphicLayer); //将这个graphicLayer添加到地图中
grideP=p; //得到这个捕捉的点，在下面在要素服务图层添加点用
}
}
}
})
}
draw.on("draw-complete",function () { //绘制事件结束
var drawPointGraphihc=new Graphic(grideP,null,{"X":grideP.x,"Y":grideP.y,"行号":grideP.y/0.01,"列号":grideP.x/0.01, "类型":"厚管","是否堵":"是","查询次数":0,"符号类型":"BS"});//定义一个graphic，为了添加到要素服务图层中，这个{}非常重要，就算为空也要写上
var add=new Add({ //定义添加函数
"featureLayer":featureLayer,
"addedGraphics":[drawPointGraphihc]
});
add.performRedo(); //执行添加函数
layer.refresh(); //刷新layer
draw.deactivate(); //关闭绘制事件
mouseMoveEvent.remove(); //将鼠标移动事件撤销
gridePointGraphicLayer.clear(); //这个时候，地图上会有添加的要素，但是也有一个gridePointGraphicLayer，这个时候要给它清除了
})
})
</script>
</head>
<body>
<div id="myMapDiv"></div>
<input type="button" value="按钮" id="btn">
</body>
</html>
