ArcGIS API for js通过鼠标捕捉格网的点将点添加到规则的位置上

<!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").οnclick=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>

                       

 


 
展开阅读全文

没有更多推荐了,返回首页