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

来源：互联网发布：animates.js 编辑：程序博客网时间：2024/05/22 03:02

How to track pending tiles and display a busy indicator in a Web mapping application

Rex 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:

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.

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:

Event Description add_onRequestsPending Triggered when the number of items in the pendingTiles array changes from 0 to a higher value add_onRequestsRemove Triggered when an item is removed from the pendingTiles array add_onRequestsCompleted Triggered when the number of item in the pendingTiles array changes to 0

Use these handlers on the Map object’s pendingTiles property to register a JavaScript function with the event. For example:

map.pendingTiles.add_onRequestsPending(showBusyIndicator)

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.

The JavaScript function showBusyIndicator may appear as follows.

function showBusyIndicator(sender) {

showLayer("BusyIndicator");

if (sender!=null) {

window.status = "Pending Tiles: " + sender.pendingTiles.length;

}

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.

You can show the number of pending tiles and a "busy indicator" in a Web mapping application

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.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="ESRI.ArcGIS.ADF.Web.UI.WebControls, Version=9.2.2.1350, Culture=neutral, PublicKeyToken=8fc3cc631e44ad86"

Namespace="ESRI.ArcGIS.ADF.Web.UI.WebControls" TagPrefix="esri" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

<div>

<esri:MapResourceManager ID="MapResourceManager1" runat="server">

</ResourceItems>

</esri:MapResourceManager>

<esri:Map ID="Map1" runat="server" Height="453px" Width="556px" MapResourceManager="MapResourceManager1">

</esri:Map>

</div>

</div>

</form>

function showBusyIndicator(sender) {

showLayer("BusyIndicator");

if (sender!=null) {

window.status = "Pending Tiles: " + sender.pendingTiles.length;

}

function showPendingTiles(sender) {

if (sender!=null) {

window.status = "Pending Tiles: " + sender.pendingTiles.length;

}

function hideBusyIndicator(sender) {

hideLayer("BusyIndicator");

if (sender!=null) {

window.status = "";

}

// add busy indicator functions to the map

map = Maps["Map1"];

map.pendingTiles.add_onRequestsPending(showBusyIndicator);

map.pendingTiles.add_onRequestsRemove(showPendingTiles);

map.pendingTiles.add_onRequestsCompleted(hideBusyIndicator);

</script>

</body>

</html>

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).

. . .var map = Maps['Map1'];map.divObject.onmouseup = function() {if (map.mode == 'CustomTool'){       document.getElementById('BusyIndicator').style.visibility = 'visible';                         }}    . . .

2) Custom CallbackResult to use in the tool implementation on the server.

Map adfMap = (Map)args.Control;. . . string jsHideLoading = "document.getElementById('BusyIndicator').style.visibility = 'hidden'";CallbackResult hideLoadingCallbackResult = new CallbackResult(null, null, "javascript", jsHideLoading);adfMap.CallbackResults.Add(hideLoadingCallbackResult);

Hope this helps, -Rex

Monday, September 17, 2007 2:53 PM by Rex Hansen

Published Tuesday, May 01, 2007 12:05 PM by Sterling

Filed under: ADF, .NET, Code Snippet, AJAX, 92 SP2, Web Mapping Application