ArcGIS Web客户端开发（四）处理事件和消息

四、处理事件和消息

    （1）地图有关的事件

    和Map有关的事件，常用的主要有”load \unload \layer-add \layer-remove \click\dbl-click、mouse-down \mouse-move \mouse-up \ key-down \key-up”等，前面已经接触到不少次”load”事件的应用了。下面是鼠标在地图上单击事件的例子，功能很简单，就是单击后弹出对话框显示处单击的屏幕位置坐标和地理位置坐标：

    ...

     map.on( "click", myClickHandler);

     ...

     function myClickHandler(evt) {

        alert("User clicked at " +

        evt.screenPoint.x + ", " + evt.screenPoint.y +

            " on the screen. The map coordinate at this point is " +

            evt.mapPoint.x + ", " + evt.mapPoint.y

        );

    }

         ...

    （2）特定Layer有关的事件

    特别是GraphicLayer等用户放置业务数据的图层，常用的主要有 \click\dbl-click\mouse-over \ graphic-add \graphic-remove\graphic-draw等，前三个一般用来查询图上目标，后两个通常用于数据变化后是否保存图形等处理，graphic-draw则用来控制显示的刷新，这里的刷新除非是图上数据变化导致应用据数需要重新导入，导致显示可能需要自行变化，才需要处理，否则，一般arcgis都给你做好了，不需费心。

      ...

//open图层

var incidentLayer = new FeatureLayer(

"https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0", {

          mode: FeatureLayer.MODE_ONDEMAND,

          outFields: ["*"],

          id: "incidentLayer"

        });

 

incidentLayer.setSelectionSymbol(

          new SimpleMarkerSymbol().setColor(new Color("red"))

 );

map.addLayers([incidentLayer]);

...

//设置图层目标单击事件处理程序

//这里是事件关联与处理程序定义在一起的做法。

incidentLayer.on("click", function(evt) {

            graphicAttributes = evt.graphic.attributes;

            title = graphicAttributes.req_type;

            content = "<b>Date Reported: </b>" + graphicAttributes.req_date

                    + "<br><b>Address: </b>" + graphicAttributes.address

                    + "<br><b>District: </b>" + graphicAttributes.district;

            relatedQuery.objectIds = [graphicAttributes.objectid];

         

            incidentLayer.queryRelatedFeatures(relatedQuery, function(relatedRecords) {

              var fset = relatedRecords[graphicAttributes.objectid];

              var count = (fset) ? fset.features.length : 0;

              content = content + "<br><hr><br><i><span id='numPeople'>" + count +

                    "</span> people think this is important.</i>";

        content = content + "<br><br><img style='cursor:pointer' src='images/thumbsup.jpeg'  οnclick='voteOnIncident(" + graphicAttributes.objectid + ");'>";

              map.infoWindow.setTitle(title);

              map.infoWindow.setContent(content);

              map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

            });

          });

   }

     ....

    （3）图形绘制事件

图形最重要的事件消息处理，是在图形的绘制编辑中。在交互输入中，esri/toolbars/draw提供有关绘制动作处理函数， esri/toolbars/Edit 提供目标图形编辑处理函数，这两个包提供的事件和编辑能力是极为重要的，要重点掌握。

 处理绘制动作事件的过程主要是：

...

//引入Draw模块

require([ "esri/Darw", ... ], function(Draw, ... ){

   var tb;

   ...

   tb = new Draw(map);

   //关联draw-end事件处理对象

   tb.on("draw-end", addGraphic);

   //选中激活绘图工具

   tb.activate(“point”); //画点

   ...

   //定义绘制结束事件处理函数

  //将数据存入GraphicaLayer中。

   function addGraphic(evt) {

                //deactivate the toolbar and clear existing graphics

                tb.deactivate();

                map.enableMapNavigation();

                // figure out which symbol to use

                var symbol;

                if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {

                     symbol = markerSymbol;

                } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {

                     symbol = lineSymbol;

                }

                else {

                    symbol = fillSymbol;

                }

                //创建图形对象加到地图缺省的GraphicLayer中

                //实际上，应在自己的服务器上创建一个

                //可保存的GraphicLayer

                map.graphics.add(new Graphic(evt.geometry, symbol));

}

...

});

绘制工具最常用的绘制动作包括这些类型，point、multipoint、line、polyline、freehandpolyline、triangle、rectangle、circle、ellipse、polygon、freehandpolygon、arrow等。

（4）图形编辑事件

处理编辑动作的主要过程是：

 ....

require([ "esri/toolbars/edit", "dojo/_base/event", "dojo/parser",...],

        function ( Edit, event, parser,... ) {

...

//创建编辑工具

var editTb = new Edit(map);

...

//单击选中目标时激活编辑工具

map.graphics.on("click", function (evt) {

    //检查没有处于绘图状态

    if (!drawediting) {

        event.stop(evt);

        //设置编辑工具可以具备的编辑动作类型

        var tool = 0;

        tool = tool | Edit.MOVE | Edit.EDIT_VERTICES | Edit.SCALE | Edit.EDIT_TEXT;

        editTb.activate(tool, evt.graphic);

    }

 });

 //当单击非目标上时，取消编辑工具

  map.on("click", function (evt) {

        if (!drawediting)

              editTb.deactivate();

});

....

    上述过程，已经基本能够完成绝大多数图形编辑的工作，如果在编辑完成后还需要进一步做工作，则需要通过监视Layer的事件进行相关的进一步处置，如保存数据等。