cl991036
管理员
管理员
  • 注册日期2003-07-25
  • 发帖数5913
  • QQ14265545
  • 铜币29658枚
  • 威望213点
  • 贡献值0点
  • 银元0个
  • GIS帝国居民
  • GIS帝国铁杆
阅读:2656回复:1

ArcGIS Server地图加载过程显示等待状态标志

楼主#
更多 发布于:2008-03-25 18:35
<P>给自己项目加了标志,看到的帖子,我想做GIS的一般都要用到:<BR>How to track pending tiles and display a busy indicator in a Web mapping applicationRex Hansen contributed this post about how to use some of the enhanced JavaScript in Service Pack 2 to track pending tiles and display a busy indicator (such as an animated "Loading" graphic) over the Web ADF's Map control:<BR>As a Web ADF developer working in an asynchronous communication environment, it is often beneficial to provide an end user with some indication that a user action is being processed. Since most Web ADF applications are centered on working with a map, the ability of an end user to effectively interact with map contents is essential. The Web ADF has the ability to asynchronously retrieve map data from multiple sources and consolidate it in a single map control. In general, data sources often differ in the time it takes to respond to a request. Since the Web ADF Map control is capable of rendering map data as it is returned to the browser, it’s possible that some portion of data in the map is visible and accessible before another portion. In this case, it will likely be important to let the end user know when the map control has finished loading map data from any and all sources.<BR>To support this capability, 9.2 service pack 2 includes an enhanced Web ADF JavaScript Map object. The JavaScript Map object has a set of “event handlers” on the pendingTiles property. The pendingTiles property references an array of map image tiles to be rendered. The array is updated when the map needs new image tiles based on the current extent. Events on the pendingTiles property are listed below:</P>
<P>Use these handlers on the Map object’s pendingTiles property to register a JavaScript function with the event. For example:<BR><FONT style="FONT-SIZE: 10pt">map.pendingTiles.add_onRequestsPending(showBusyIndicator)</FONT><BR><BR>where map is the Map object and showBusyIndicator is a JavaScript function to call when the number of items in the pendingTiles array changes from 0 to a higher value.<BR>The JavaScript function showBusyIndicator may appear as follows.<BR><FONT style="FONT-SIZE: 10pt">function</FONT><FONT style="FONT-SIZE: 10pt"> showBusyIndicator(sender) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>showLayer(<FONT color=maroon>"BusyIndicator"</FONT>);</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue>if</FONT> (sender!=<FONT color=blue>null</FONT>) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>window.status = <FONT color=maroon>"Pending Tiles: "</FONT> + sender.pendingTiles.length; </FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>}</FONT><BR><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><BR>The argument to the function is a reference to the JavaScript Map object. This argument can be used to gain access to map properties, such as the number of map image tiles left in the pendingTiles array. In this example, the number of pending tiles is output to the browser window’s status bar. If the argument is null, the pendingTiles array contains 0 items. The Web ADF includes two convenient JavaScript functions to show or hide a layer (div) based on its id, named showLayer and hideLayer, respectively. The functions are contained in the display_common.js file which is by default embedded with the Web ADF controls. In this example, the showLayer function is used to make the contents in the div tag with an id of “BusyIndicator” visible.<BR><BR>Included below is a simple Web page with a MapResourceManager, Map, and a div tag containing an image. The JavaScript Map object events are handled after the form to let the content of the form load before interacting with it.<BR><BR><BR><BR><FONT style="FONT-SIZE: 10pt"><%</FONT><FONT style="FONT-SIZE: 10pt">@</FONT><FONT style="FONT-SIZE: 10pt"> <FONT color=maroon>Page</FONT> <FONT color=red>Language</FONT><FONT color=blue>="C#"</FONT> <FONT color=red>AutoEventWireup</FONT><FONT color=blue>="true"</FONT><BR><FONT color=red>CodeFile</FONT><FONT color=blue>="Default.aspx.cs"</FONT> <FONT color=red>Inherits</FONT><FONT color=blue>="_Default"</FONT> %></FONT><BR><FONT style="FONT-SIZE: 10pt"><%</FONT><FONT style="FONT-SIZE: 10pt">@</FONT><FONT style="FONT-SIZE: 10pt"> <FONT color=maroon>Register</FONT> <FONT color=red>Assembly</FONT><FONT color=blue>="ESRI.ArcGIS.ADF.Web.UI.WebControls, Version=9.2.2.1350, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86"</FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=red>Namespace</FONT><FONT color=blue>="ESRI.ArcGIS.ADF.Web.UI.WebControls"</FONT> <FONT color=red>TagPrefix</FONT><FONT color=blue>="esri"</FONT> %></FONT><BR><FONT style="FONT-SIZE: 10pt"><!</FONT><FONT style="FONT-SIZE: 10pt">DOCTYPE</FONT><FONT style="FONT-SIZE: 10pt"> <FONT color=red>html</FONT> <FONT color=red>PUBLIC</FONT> <FONT color=blue>"-//W3C//DTD XHTML 1.0 Transitional//EN"</FONT> <FONT color=blue>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><</FONT><FONT style="FONT-SIZE: 10pt">html</FONT><FONT style="FONT-SIZE: 10pt"> <FONT color=red>xmlns</FONT><FONT color=blue>="http://www.w3.org/1999/xhtml"</FONT> <FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><</FONT><FONT style="FONT-SIZE: 10pt">head</FONT><FONT style="FONT-SIZE: 10pt"> <FONT color=red>runat</FONT><FONT color=blue>="server"></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>title</FONT><FONT color=blue>></FONT>Untitled Page<FONT color=blue></</FONT><FONT color=maroon>title</FONT><FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"></</FONT><FONT style="FONT-SIZE: 10pt">head</FONT><FONT style="FONT-SIZE: 10pt">></FONT><BR><FONT style="FONT-SIZE: 10pt"><</FONT><FONT style="FONT-SIZE: 10pt">body</FONT><FONT style="FONT-SIZE: 10pt">></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>form</FONT> <FONT color=red>id</FONT><FONT color=blue>="form1"</FONT> <FONT color=red>runat</FONT><FONT color=blue>="server"></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>div</FONT><FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>esri</FONT><FONT color=blue>:</FONT><FONT color=maroon>MapResourceManager</FONT> <FONT color=red>ID</FONT><FONT color=blue>="MapResourceManager1"</FONT> <FONT color=red>runat</FONT><FONT color=blue>="server"></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>ResourceItems</FONT><FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue></</FONT><FONT color=maroon>ResourceItems</FONT><FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue></</FONT><FONT color=maroon>esri</FONT><FONT color=blue>:</FONT><FONT color=maroon>MapResourceManager</FONT><FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>esri</FONT><FONT color=blue>:</FONT><FONT color=maroon>Map</FONT> <FONT color=red>ID</FONT><FONT color=blue>="Map1"</FONT> <FONT color=red>runat</FONT><FONT color=blue>="server"</FONT> <FONT color=red>Height</FONT><FONT color=blue>="453px"</FONT> <FONT color=red>Width</FONT><FONT color=blue>="556px"</FONT> <FONT color=red>MapResourceManager</FONT><FONT color=blue>="MapResourceManager1"></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue></</FONT><FONT color=maroon>esri</FONT><FONT color=blue>:</FONT><FONT color=maroon>Map</FONT><FONT color=blue>></FONT><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue></</FONT><FONT color=maroon>div</FONT><FONT color=blue>></FONT><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>div</FONT> <FONT color=red>id</FONT><FONT color=blue>="BusyIndicator"</FONT> <FONT color=red>style</FONT><FONT color=blue>="z-index: 1000; left: 25px; width: 100px; position: absolute; top: 422px;height: 100px"></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>img</FONT> <FONT color=red>src</FONT><FONT color=blue>="images/CircleThickbox.gif"</FONT> <FONT color=blue>/></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue></</FONT><FONT color=maroon>div</FONT><FONT color=blue>></FONT> </FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue></</FONT><FONT color=maroon>form</FONT><FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue><</FONT><FONT color=maroon>script</FONT> <FONT color=red>language</FONT><FONT color=blue>="javascript"</FONT> <FONT color=red>type</FONT><FONT color=blue>="text/javascript"></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue>function</FONT> showBusyIndicator(sender) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>showLayer(<FONT color=maroon>"BusyIndicator"</FONT>);</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue>if</FONT> (sender!=<FONT color=blue>null</FONT>) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>window.status = <FONT color=maroon>"Pending Tiles: "</FONT> + sender.pendingTiles.length; </FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>}<BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>}</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue>function</FONT> showPendingTiles(sender) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue>if</FONT> (sender!=<FONT color=blue>null</FONT>) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>window.status = <FONT color=maroon>"Pending Tiles: "</FONT> + sender.pendingTiles.length; </FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>}<BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>}</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue>function</FONT> hideBusyIndicator(sender) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>hideLayer(<FONT color=maroon>"BusyIndicator"</FONT>);</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue>if</FONT> (sender!=<FONT color=blue>null</FONT>) {</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>window.status = <FONT color=maroon>""</FONT>; </FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>}<BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>} </FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=green>// add busy indicator functions to the map</FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>map = Maps[<FONT color=maroon>"Map1"</FONT>];</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>map.pendingTiles.add_onRequestsPending(showBusyIndicator);</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>map.pendingTiles.add_onRequestsRemove(showPendingTiles);</FONT><BR><FONT style="FONT-SIZE: 10pt"><BR>map.pendingTiles.add_onRequestsCompleted(hideBusyIndicator);<BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR><FONT color=blue></</FONT><FONT color=maroon>script</FONT><FONT color=blue>></FONT></FONT><BR><FONT style="FONT-SIZE: 10pt"><BR></FONT><BR><FONT style="FONT-SIZE: 10pt"></</FONT><FONT style="FONT-SIZE: 10pt">body</FONT><FONT style="FONT-SIZE: 10pt">></FONT><BR><FONT style="FONT-SIZE: 10pt"></</FONT><FONT style="FONT-SIZE: 10pt">html</FONT><FONT style="FONT-SIZE: 10pt">></FONT></P>
<P><FONT size=2></FONT> </P>
<P><IMG src="http://bbs.esrichina-bj.cn/ESRI/attachments/forumid_25/20080318_17ab1acd6273b40612a6WTs4NnLtAvaR.jpg"> </P>
喜欢0 评分0
没钱又丑,农村户口。头可断,发型一定不能乱。 邮箱:gisempire@qq.com
cl991036
管理员
管理员
  • 注册日期2003-07-25
  • 发帖数5913
  • QQ14265545
  • 铜币29658枚
  • 威望213点
  • 贡献值0点
  • 银元0个
  • GIS帝国居民
  • GIS帝国铁杆
1楼#
发布于:2008-03-25 18:53
<P>路人甲说。</P>
<P>Eric, You'll need to trigger the busy indicator when the initial callback is sent to the server. If this happens when using a tool in a Web ADF Toolbar control, the callback is sent when the tool interacts with the Map. Depending on the tools ClientAction, this may occur during an onclick, onmouseup, etc. event on the div object that contains the map. So one easy way to implement this is to listen for the appropriate event in the browser, check the mode on the map to determine which tool is active, then choose to show the busy indicator. In the server implementation of the tool you'll need to create a custom CallbackResult using JavaScript to locate and hide the busy indicator. Add the CallbackResult to the callback response (via the Map). Two code snippets are provided below. The name of the custom tool is "CustomTool". 1) Custom client code to listen for an event on the map div (same location as the custom JavaScript for the pending tiles example).</P><PRE>. . .var map = Maps['Map1'];map.divObject.onmouseup = function() {if (map.mode == 'CustomTool'){       document.getElementById('BusyIndicator').style.visibility = 'visible';                         }}    . . .</PRE>
<P>2) Custom CallbackResult to use in the tool implementation on the server.</P><PRE>Map adfMap = (Map)args.Control;. . . string jsHideLoading = "document.getElementById('BusyIndicator').style.visibility = 'hidden'";CallbackResult hideLoadingCallbackResult = new</PRE>


没钱又丑,农村户口。头可断,发型一定不能乱。 邮箱:gisempire@qq.com
举报 回复(0) 喜欢(0)     评分
游客

返回顶部