目的:
1.MapIdentify功能,自定义Tool以及TaskResults应用。
准备:
1.(一、四)的工程,具体见前篇。
开始:
1.......看前一篇。
2.......看前一篇。
3.......看前一篇。
4.切换到Measure.ascx的html代码视图,给主table添加id为MeasureToolbar,添加style属性为color:Black;background-color:White;border-color:Black; border-width:1px;border-style:Outset;width:275px;visibility:hidden;position: absolute; left: 285px; top: 298px; z-index:11000; 这样可以是这个用户控件浮在地图之上同时默认为不显示。
5.其他的也做相应的设置,完成后的代码和说明如下:
1
<%
@ Control Language="C#" AutoEventWireup="true" CodeBehind="Measure.ascx.cs" Inherits="MappingApp.Measure"
%>
2 < script language ="javascript" type ="text/javascript" src ="JavaScript/display_measure.js" ></ script >
3 < style type ="text/css" >
4<!--
5.STYLE1 {}{
6 font-size: 12px;
7 font-weight: bold;
8}
9-->
10 </ style >
11
12 < table width ="400" border ="1" cellspacing ="0" cellpadding ="0" id ="MeasureToolbar" style ="color:Black;background-color:White;border-color:Black; border-width:1px;border-style:Outset;width:275px;visibility:hidden;position: absolute; left: 10px; top: 10px; z-index:11000; " >
13 <!-- 给tr加上拖拽的事件 -->
14 < tr id ="MeasureToolbar_Title" onmousedown ="dragMeasureToolbarStart(event, 'MeasureToolbar')" onmouseover ="this.style.cursor='move'" style ="background-image:url(images/blank.gif); cursor:move; " >
15 < td >< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" >
16 < tr >
17 < td width ="92%" >< span class ="STYLE1" > 距离测量 </ span ></ td >
18 < td width ="30" >
19 <!-- 给给关闭按钮图片加上关闭事件的事件 -->
20 < img src ="images/dismiss.png" width ="20" height ="20" id ="MeasureToolbar_CloseButton" onclick ="closeMeasureToolbarTool('MeasureToolbar')" style ="cursor:pointer;" alt ="Close" hspace ="0" vspace ="0" /></ td >
21 </ tr >
22 < tr >
23 < td >< table cellpadding ="0" cellspacing ="0" >< tr >
24 <!-- 点功能按钮 -->
25 < td id ="MeasureToolbarButton_point" style ="border: solid White 1px; background-color: White;" onmouseover ="this.style.cursor='pointer'; this.style.borderColor='Black';" onmouseout ="checkMeasureToolbarBorder(this, 'point')" onmousedown ="setMeasureToolbarTool('point')" >< img id ="ToolbarImage_point" src ="images/measure-point.png" align ="middle" alt ="Point - Coordinates" title ="Point - Coordinates" style ="padding: 0px 0px 0px 0px" /></ td >
26 <!-- 线功能按钮 -->
27 < td id ="MeasureToolbarButton_polyline" style ="border: solid Black 1px; background-color: #EEEEEE;" onmouseover ="this.style.cursor='pointer';this.style.borderColor='Black';" onmouseout ="checkMeasureToolbarBorder(this, 'polyline')" onmousedown ="setMeasureToolbarTool('polyline')" >< img id ="ToolbarImage_polyline" src ="images/measure-line.png" align ="middle" alt ="Line - Distance" title ="Line - Distance" style ="padding: 0px 0px 0px 0px" /></ td >
28 <!-- 面功能按钮 -->
29 < td id ="MeasureToolbarButton_polygon" style ="border: solid White 1px; background-color: White;" onmouseover ="this.style.cursor='pointer';this.style.borderColor='Black';" onmouseout ="checkMeasureToolbarBorder(this, 'polygon')" onmousedown ="setMeasureToolbarTool('polygon')" >< img id ="ToolbarImage_polygon" src ="images/measure-poly.png" align ="middle" alt ="Polygon - Area" title ="Polygon - Area" style ="padding: 0px 0px 0px 0px" /> </ td >
30 </ tr ></ table >
31 <!-- 测试单位隐藏值 -->
32 < input id ="MeasureUnits" type ="hidden" value ="<%=MeasureUnits %>" />
33 <!-- 面积单位隐藏值 -->
34 < input id ="AreaUnits" type ="hidden" value ="<%=AreaUnits %>" />
35 </ td >
36 < td > </ td >
37 </ tr >
38 <!-- 显示测量结果的表格行 -->
39 < tr id ="MeasureToolbar_BodyRow" >
40 < td id ="MeasureToolbar_BodyCell" style ="background-image:url(images/blank.gif);vertical-align:top;padding-left:5px;padding-top:5px;" >
41
42 < table id ="MeasureToolbarTable" cellspacing ="2" cellpadding ="1" style =" width: 100%;font: normal 7pt Verdana; " >
43 < tr >< td style ="background-color: #ffffff" id ="MeasureDisplay" colspan ="2" valign ="top" >
44 在地图上点击画线,双击鼠标结束画线
45 </ td ></ tr >
46 </ table >
47
48 </ td >
49 < td id ="MeasureToolbar_SideResizeCell" >< img width ="5px" height ="100%" src ="images/blank.gif" alt ="" /></ td >
50 </ tr >
51 </ table ></ td >
52 </ tr >
53 < tr id ="MeasureToolbar_ResizeRow" >
54 < td >< img height ="5px" width ="100%" src ="images/blank.gif" alt ="" /></ td >
55 < td >< img width ="5px" src ="images/blank.gif" alt ="" /></ td >
56 </ tr >
57 </ table >
58
59 < script language ="javascript" type ="text/javascript" >
60 //回调脚本段
61 var measureVectorCallbackFunctionString = "<%=m_callbackInvocation %>";
62 //根据浏览器的不同设置相应的图片显示
63 if (isIE && ieVersion<7)
64 {
65 setIE6MeasureToolbarImages();
66 }
67 </ script >
68
6.在完成上面的代码后,就把这个用户控件拖到Default.aspx页面中,并且设置相应的属性,具体设置好后的代码如下:
2 < script language ="javascript" type ="text/javascript" src ="JavaScript/display_measure.js" ></ script >
3 < style type ="text/css" >
4<!--
5.STYLE1 {}{
6 font-size: 12px;
7 font-weight: bold;
8}
9-->
10 </ style >
11
12 < table width ="400" border ="1" cellspacing ="0" cellpadding ="0" id ="MeasureToolbar" style ="color:Black;background-color:White;border-color:Black; border-width:1px;border-style:Outset;width:275px;visibility:hidden;position: absolute; left: 10px; top: 10px; z-index:11000; " >
13 <!-- 给tr加上拖拽的事件 -->
14 < tr id ="MeasureToolbar_Title" onmousedown ="dragMeasureToolbarStart(event, 'MeasureToolbar')" onmouseover ="this.style.cursor='move'" style ="background-image:url(images/blank.gif); cursor:move; " >
15 < td >< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" >
16 < tr >
17 < td width ="92%" >< span class ="STYLE1" > 距离测量 </ span ></ td >
18 < td width ="30" >
19 <!-- 给给关闭按钮图片加上关闭事件的事件 -->
20 < img src ="images/dismiss.png" width ="20" height ="20" id ="MeasureToolbar_CloseButton" onclick ="closeMeasureToolbarTool('MeasureToolbar')" style ="cursor:pointer;" alt ="Close" hspace ="0" vspace ="0" /></ td >
21 </ tr >
22 < tr >
23 < td >< table cellpadding ="0" cellspacing ="0" >< tr >
24 <!-- 点功能按钮 -->
25 < td id ="MeasureToolbarButton_point" style ="border: solid White 1px; background-color: White;" onmouseover ="this.style.cursor='pointer'; this.style.borderColor='Black';" onmouseout ="checkMeasureToolbarBorder(this, 'point')" onmousedown ="setMeasureToolbarTool('point')" >< img id ="ToolbarImage_point" src ="images/measure-point.png" align ="middle" alt ="Point - Coordinates" title ="Point - Coordinates" style ="padding: 0px 0px 0px 0px" /></ td >
26 <!-- 线功能按钮 -->
27 < td id ="MeasureToolbarButton_polyline" style ="border: solid Black 1px; background-color: #EEEEEE;" onmouseover ="this.style.cursor='pointer';this.style.borderColor='Black';" onmouseout ="checkMeasureToolbarBorder(this, 'polyline')" onmousedown ="setMeasureToolbarTool('polyline')" >< img id ="ToolbarImage_polyline" src ="images/measure-line.png" align ="middle" alt ="Line - Distance" title ="Line - Distance" style ="padding: 0px 0px 0px 0px" /></ td >
28 <!-- 面功能按钮 -->
29 < td id ="MeasureToolbarButton_polygon" style ="border: solid White 1px; background-color: White;" onmouseover ="this.style.cursor='pointer';this.style.borderColor='Black';" onmouseout ="checkMeasureToolbarBorder(this, 'polygon')" onmousedown ="setMeasureToolbarTool('polygon')" >< img id ="ToolbarImage_polygon" src ="images/measure-poly.png" align ="middle" alt ="Polygon - Area" title ="Polygon - Area" style ="padding: 0px 0px 0px 0px" /> </ td >
30 </ tr ></ table >
31 <!-- 测试单位隐藏值 -->
32 < input id ="MeasureUnits" type ="hidden" value ="<%=MeasureUnits %>" />
33 <!-- 面积单位隐藏值 -->
34 < input id ="AreaUnits" type ="hidden" value ="<%=AreaUnits %>" />
35 </ td >
36 < td > </ td >
37 </ tr >
38 <!-- 显示测量结果的表格行 -->
39 < tr id ="MeasureToolbar_BodyRow" >
40 < td id ="MeasureToolbar_BodyCell" style ="background-image:url(images/blank.gif);vertical-align:top;padding-left:5px;padding-top:5px;" >
41
42 < table id ="MeasureToolbarTable" cellspacing ="2" cellpadding ="1" style =" width: 100%;font: normal 7pt Verdana; " >
43 < tr >< td style ="background-color: #ffffff" id ="MeasureDisplay" colspan ="2" valign ="top" >
44 在地图上点击画线,双击鼠标结束画线
45 </ td ></ tr >
46 </ table >
47
48 </ td >
49 < td id ="MeasureToolbar_SideResizeCell" >< img width ="5px" height ="100%" src ="images/blank.gif" alt ="" /></ td >
50 </ tr >
51 </ table ></ td >
52 </ tr >
53 < tr id ="MeasureToolbar_ResizeRow" >
54 < td >< img height ="5px" width ="100%" src ="images/blank.gif" alt ="" /></ td >
55 < td >< img width ="5px" src ="images/blank.gif" alt ="" /></ td >
56 </ tr >
57 </ table >
58
59 < script language ="javascript" type ="text/javascript" >
60 //回调脚本段
61 var measureVectorCallbackFunctionString = "<%=m_callbackInvocation %>";
62 //根据浏览器的不同设置相应的图片显示
63 if (isIE && ieVersion<7)
64 {
65 setIE6MeasureToolbarImages();
66 }
67 </ script >
68
1
<
uc1:Measure
id
="Measure1"
runat
="server"
AreaUnits
="Sq_Miles"
MapBuddyId
="Map1"
MapUnits
="Resource_Default"
MeasureUnits
="Meters"
NumberDecimals
="3"
>
2 </ uc1:Measure >
7
. 在Toolbar1中新增加一个Tool,设置相应的属性,如果设置后代码如下:2 </ uc1:Measure >
1
<
esri:Tool
ClientAction
="startMeasure()"
DefaultImage
="~/images/measure.png"
HoverImage
="~/images/measure_HOVER.gif"
JavaScriptFile
=""
Name
="Measure"
SelectedImage
="~/images/measure_ON.gif"
Text
="Measure"
ToolTip
="Measure"
/>
8
.接下来实现ClientAction的startMeasure()的js方法,在javascript目录中新建display_measure.js文件,同时在Measure.ascx文件中添加对这个js文件的引用。
1
<
script
language
="javascript"
type
="text/javascript"
src
="JavaScript/display_measure.js"
></
script
>
9.在js文件中编写startMeasure()方法,代码和说明如下:
1
//
测量控件的内容显示,必须定义为m_measureDisplay,在Esri的display_dotnetadf.js的processCallbackResult的方法中有用到
2 var m_measureDisplay = " MeasureDisplay " ;
3 // 测量控件的状态
4 var m_currentMeasureToolbarTool = " polyline " ;
5
6 // 测量类型
7 var m_MeasureTypes = new Array();
8 m_MeasureTypes[ 0 ] = " point " ;
9 m_MeasureTypes[ 1 ] = " polyline " ;
10 m_MeasureTypes[ 2 ] = " polygon " ;
11
12 //
13 function startMeasure() {
14 var md;
15 // 获取测量控件的内容显示
16 if (m_measureDisplay!=null) {
17 md = document.getElementById(m_measureDisplay);
18 }
19
20 if (m_currentMeasureToolbarTool=="point")//点
21 {
22 if (md!=null)
23 {
24 //设置信息提示
25 md.innerHTML = "Click on the map to return the coordinate location of the point.<br />";
26 }
27 //点状态初始化方法
28 MeasurePoint(map.controlName);
29 }
30 else if (m_currentMeasureToolbarTool=="polyline")//线
31 {
32 if (md!=null)
33 {
34 md.innerHTML = "Click on the map and draw a line. Double-click to end the line.<br />";
35 }
36 //线状态初始化方法
37 MeasurePolyline(map.controlName);
38 }
39 else//面
40 {
41 if (md!=null)
42 {
43 md.innerHTML = "Click on the map and draw a polygon. Double-click to end the polygon.<br />";
44 }
45 //面状态初始化方法
46 MeasurePolygon(map.controlName);
47 }
48}
49
50
51 function MeasurePoint(divid) {
52 map = Maps[divid];
53 if (map!=null)
54 {
55 //显示的容器,Esri的display_map.js中有定义
56 vectortoolbar = "MeasureToolbar";
57 //setTool方法Esri的display_map.js中有定义,参数说明(模式,是否显示载入中提示,客户端函数,鼠标指针,vectorMode等于-1时不显示,vectortoolbar是否显示,浏览器状态栏显示内容,是否清除DrawnVectors,客户端回调脚本)
58 map.setTool("Measure", false, "Point", "pointer", -1, "visible","");
59
60 map.divObject.onmousedown = MapCoordsClick;
61 map.mode = "MeasurePoint";
62 var vo = map.vectorObject;
63 //显示vectorObject
64 showLayer(vo.divId);
65 //先清除原来的
66 vo.clear();
67 //把点画上去
68 vo.draw();
69 }
70}
71
72 function MeasurePolyline(divid)
73 {
74 map = Maps[divid];
75 if (map!=null)
76 {
77 //回调客户端脚本段,WebForm_DoCallback('ctl02',argument,processCallbackResult,context,null,true)
78 map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
79 //显示的容器,Esri的display_map.js中有定义
80 vectortoolbar = "MeasureToolbar";
81 //setTool方法Esri的display_map.js中有定义,参数说明(模式,是否显示载入中提示,客户端函数,鼠标指针,vectorMode等于-1时不显示线条,vectortoolbar是否显示,浏览器状态栏显示内容,是否清除DrawnVectors,客户端回调脚本)
82 map.setTool("Measure", false, "ClickShape", "crosshair", 1, "visible", "Measure-Polyline - Click to start line. Click again to add vectors. Double-click to add last vector and complete polyline.", false, measureVectorCallbackFunctionString);
83 }
84}
85
86 function MeasurePolygon(divid)
87 {
88 map = Maps[divid];
89 if (map!=null)
90 {
91 //回调客户端脚本段,WebForm_DoCallback('ctl02',argument,processCallbackResult,context,null,true)
92 map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
93 //显示的容器,Esri的display_map.js中有定义
94 vectortoolbar = "MeasureToolbar";
95 map.setTool("Measure", false, "ClickShape", "crosshair", 2, "visible", "Measure-Polygon - Click to start line. Click again to add vectors. Double-click to add last vector and complete polygon.", false, measureVectorCallbackFunctionString);
96 }
97}
98
99 // 点
100 function MapCoordsClick(e)
101 {
102 var vo = map.vectorObject;
103 var pix = vo.pixelObject;
104 var xycoord = vo.xyCoord;
105 getXY(e);
106 zleft = mouseX - map.containerLeft;
107 ztop = mouseY - map.containerTop;
108 vo.clear();
109 vo.crosshair(zleft, ztop);
110 vo.draw();
111
112 map.xMin=zleft;
113 map.yMin=ztop;
114 map.getTopLeftTile();
115 coordString = + zleft + ":" + ztop;
116 var argument = "ControlID=" + map.controlName + "&EventArg=Point&ControlType=Map&coords=" + coordString + "&VectorMode=Measure&VectorAction=Coordinates&minx=" + zleft + "&miny=" + ztop;
117 if(checkForFormElement(document, 0, "MeasureUnits"))
118 {
119 argument += "&MeasureUnits=" + document.forms[0].MeasureUnits.value;
120 }
121 if(checkForFormElement(document, 0, "AreaUnits"))
122 {
123 argument += "&AreaUnits=" + document.forms[0].AreaUnits.value;
124 }
125 if(checkForFormElement(document, 0, "MapUnits"))
126 {
127 argument += "&MapUnits=" + document.forms[0].MapUnits.options[document.forms[0].MapUnits.selectedIndex].value;
128 }
129 var context = map.controlName + ",Point";
130 map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
131 eval(map.vectorCallbackFunctionString);
132
133}
10.在js文件中添加测量工具的checkMeasureToolbarBorde方法和setMeasureToolbarTool方法,代码和说明如下:2 var m_measureDisplay = " MeasureDisplay " ;
3 // 测量控件的状态
4 var m_currentMeasureToolbarTool = " polyline " ;
5
6 // 测量类型
7 var m_MeasureTypes = new Array();
8 m_MeasureTypes[ 0 ] = " point " ;
9 m_MeasureTypes[ 1 ] = " polyline " ;
10 m_MeasureTypes[ 2 ] = " polygon " ;
11
12 //
13 function startMeasure() {
14 var md;
15 // 获取测量控件的内容显示
16 if (m_measureDisplay!=null) {
17 md = document.getElementById(m_measureDisplay);
18 }
19
20 if (m_currentMeasureToolbarTool=="point")//点
21 {
22 if (md!=null)
23 {
24 //设置信息提示
25 md.innerHTML = "Click on the map to return the coordinate location of the point.<br />";
26 }
27 //点状态初始化方法
28 MeasurePoint(map.controlName);
29 }
30 else if (m_currentMeasureToolbarTool=="polyline")//线
31 {
32 if (md!=null)
33 {
34 md.innerHTML = "Click on the map and draw a line. Double-click to end the line.<br />";
35 }
36 //线状态初始化方法
37 MeasurePolyline(map.controlName);
38 }
39 else//面
40 {
41 if (md!=null)
42 {
43 md.innerHTML = "Click on the map and draw a polygon. Double-click to end the polygon.<br />";
44 }
45 //面状态初始化方法
46 MeasurePolygon(map.controlName);
47 }
48}
49
50
51 function MeasurePoint(divid) {
52 map = Maps[divid];
53 if (map!=null)
54 {
55 //显示的容器,Esri的display_map.js中有定义
56 vectortoolbar = "MeasureToolbar";
57 //setTool方法Esri的display_map.js中有定义,参数说明(模式,是否显示载入中提示,客户端函数,鼠标指针,vectorMode等于-1时不显示,vectortoolbar是否显示,浏览器状态栏显示内容,是否清除DrawnVectors,客户端回调脚本)
58 map.setTool("Measure", false, "Point", "pointer", -1, "visible","");
59
60 map.divObject.onmousedown = MapCoordsClick;
61 map.mode = "MeasurePoint";
62 var vo = map.vectorObject;
63 //显示vectorObject
64 showLayer(vo.divId);
65 //先清除原来的
66 vo.clear();
67 //把点画上去
68 vo.draw();
69 }
70}
71
72 function MeasurePolyline(divid)
73 {
74 map = Maps[divid];
75 if (map!=null)
76 {
77 //回调客户端脚本段,WebForm_DoCallback('ctl02',argument,processCallbackResult,context,null,true)
78 map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
79 //显示的容器,Esri的display_map.js中有定义
80 vectortoolbar = "MeasureToolbar";
81 //setTool方法Esri的display_map.js中有定义,参数说明(模式,是否显示载入中提示,客户端函数,鼠标指针,vectorMode等于-1时不显示线条,vectortoolbar是否显示,浏览器状态栏显示内容,是否清除DrawnVectors,客户端回调脚本)
82 map.setTool("Measure", false, "ClickShape", "crosshair", 1, "visible", "Measure-Polyline - Click to start line. Click again to add vectors. Double-click to add last vector and complete polyline.", false, measureVectorCallbackFunctionString);
83 }
84}
85
86 function MeasurePolygon(divid)
87 {
88 map = Maps[divid];
89 if (map!=null)
90 {
91 //回调客户端脚本段,WebForm_DoCallback('ctl02',argument,processCallbackResult,context,null,true)
92 map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
93 //显示的容器,Esri的display_map.js中有定义
94 vectortoolbar = "MeasureToolbar";
95 map.setTool("Measure", false, "ClickShape", "crosshair", 2, "visible", "Measure-Polygon - Click to start line. Click again to add vectors. Double-click to add last vector and complete polygon.", false, measureVectorCallbackFunctionString);
96 }
97}
98
99 // 点
100 function MapCoordsClick(e)
101 {
102 var vo = map.vectorObject;
103 var pix = vo.pixelObject;
104 var xycoord = vo.xyCoord;
105 getXY(e);
106 zleft = mouseX - map.containerLeft;
107 ztop = mouseY - map.containerTop;
108 vo.clear();
109 vo.crosshair(zleft, ztop);
110 vo.draw();
111
112 map.xMin=zleft;
113 map.yMin=ztop;
114 map.getTopLeftTile();
115 coordString = + zleft + ":" + ztop;
116 var argument = "ControlID=" + map.controlName + "&EventArg=Point&ControlType=Map&coords=" + coordString + "&VectorMode=Measure&VectorAction=Coordinates&minx=" + zleft + "&miny=" + ztop;
117 if(checkForFormElement(document, 0, "MeasureUnits"))
118 {
119 argument += "&MeasureUnits=" + document.forms[0].MeasureUnits.value;
120 }
121 if(checkForFormElement(document, 0, "AreaUnits"))
122 {
123 argument += "&AreaUnits=" + document.forms[0].AreaUnits.value;
124 }
125 if(checkForFormElement(document, 0, "MapUnits"))
126 {
127 argument += "&MapUnits=" + document.forms[0].MapUnits.options[document.forms[0].MapUnits.selectedIndex].value;
128 }
129 var context = map.controlName + ",Point";
130 map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
131 eval(map.vectorCallbackFunctionString);
132
133}
1
//
测量按钮鼠标移上去的显示效果
2 function checkMeasureToolbarBorder(cell, type)
3 {
4 if (type.toLowerCase()==m_currentMeasureToolbarTool)
5 {
6 cell.style.borderColor = "Black";
7 }
8 else
9 {
10 cell.style.borderColor = "White";
11 }
12
13}
14
15 // 测量按钮切换
16 function setMeasureToolbarTool(type)
17 {
18 m_currentMeasureToolbarTool = type.toLowerCase();
19 var cellObj;
20 var buttonId = "";
21 //显示状态切换
22 for(var i=0; i<m_MeasureTypes.length; i++)
23 {
24 buttonId = "MeasureToolbarButton_" + m_MeasureTypes[i];
25 cellObj = document.getElementById(buttonId);
26 if (cellObj!=null)
27 {
28 if (m_MeasureTypes[i]==m_currentMeasureToolbarTool)
29 {
30 cellObj.style.borderColor = "Black";
31 cellObj.style.backgroundColor = "#EEEEEE";
32 startMeasure();
33 }
34 else
35 {
36 cellObj.style.borderColor = "White";
37 cellObj.style.backgroundColor = "White";
38 }
39 }
40 }
41}
11.接下来添加测量控件的拖拽事件dragMeasureToolbarStart具体的代码和说明如下:2 function checkMeasureToolbarBorder(cell, type)
3 {
4 if (type.toLowerCase()==m_currentMeasureToolbarTool)
5 {
6 cell.style.borderColor = "Black";
7 }
8 else
9 {
10 cell.style.borderColor = "White";
11 }
12
13}
14
15 // 测量按钮切换
16 function setMeasureToolbarTool(type)
17 {
18 m_currentMeasureToolbarTool = type.toLowerCase();
19 var cellObj;
20 var buttonId = "";
21 //显示状态切换
22 for(var i=0; i<m_MeasureTypes.length; i++)
23 {
24 buttonId = "MeasureToolbarButton_" + m_MeasureTypes[i];
25 cellObj = document.getElementById(buttonId);
26 if (cellObj!=null)
27 {
28 if (m_MeasureTypes[i]==m_currentMeasureToolbarTool)
29 {
30 cellObj.style.borderColor = "Black";
31 cellObj.style.backgroundColor = "#EEEEEE";
32 startMeasure();
33 }
34 else
35 {
36 cellObj.style.borderColor = "White";
37 cellObj.style.backgroundColor = "White";
38 }
39 }
40 }
41}
1
//
测量控件拖拽开始
2 function dragMeasureToolbarStart(e, id)
3 {
4 if (id!=null) m_measureToolbarId = id;
5 m_measureToolbar = document.getElementById(m_measureToolbarId);
6 if (m_measureToolbar!=null)
7 {
8 getXY(e);
9 var box = calcElementPosition(m_measureToolbarId);
10 m_measureXOffset = mouseX - box.left;
11 m_measureYOffset = mouseY - box.top;
12 }
13 m_measureMoveFunction = document.onmousemove;
14 document.onmousemove = dragMeasureToolbarMove;
15 document.onmouseup = dragMeasureToolbarStop;
16 return false;
17}
18
19 // 测量控件拖拽移动
20 function dragMeasureToolbarMove(e)
21 {
22 getXY(e);
23 m_measureToolbar.style.left = (mouseX-m_measureXOffset) + "px";;
24 m_measureToolbar.style.top = (mouseY-m_measureYOffset) + "px";
25 return false;
26}
27
28 // 测量控件拖拽停止
29 function dragMeasureToolbarStop(e)
30 {
31 document.onmousemove = m_measureMoveFunction;
32 document.onmouseup = null;
33 return false;
34}
12.到这里这个Common_WebMappingAppCSharp.zip示例大体上分析完成了,剩下的就是一些比较简单的功能这样也不作分析了。2 function dragMeasureToolbarStart(e, id)
3 {
4 if (id!=null) m_measureToolbarId = id;
5 m_measureToolbar = document.getElementById(m_measureToolbarId);
6 if (m_measureToolbar!=null)
7 {
8 getXY(e);
9 var box = calcElementPosition(m_measureToolbarId);
10 m_measureXOffset = mouseX - box.left;
11 m_measureYOffset = mouseY - box.top;
12 }
13 m_measureMoveFunction = document.onmousemove;
14 document.onmousemove = dragMeasureToolbarMove;
15 document.onmouseup = dragMeasureToolbarStop;
16 return false;
17}
18
19 // 测量控件拖拽移动
20 function dragMeasureToolbarMove(e)
21 {
22 getXY(e);
23 m_measureToolbar.style.left = (mouseX-m_measureXOffset) + "px";;
24 m_measureToolbar.style.top = (mouseY-m_measureYOffset) + "px";
25 return false;
26}
27
28 // 测量控件拖拽停止
29 function dragMeasureToolbarStop(e)
30 {
31 document.onmousemove = m_measureMoveFunction;
32 document.onmouseup = null;
33 return false;
34}