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

来源：互联网发布：护手霜知乎编辑：程序博客网时间：2024/06/06 00:23

四、处理事件和消息

（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 = "Date Reported: " + graphicAttributes.req_date

+ " Address: " + graphicAttributes.address

+ " District: " + 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 + " <hr> " + count +

" people think this is important.";

content = content + " <img style='cursor:pointer' src='images/thumbsup.jpeg' onclick='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的事件进行相关的进一步处置，如保存数据等。

1 0