ArcGIS Server地图加载过程显示等待状态
2007-11-15 09:26
435 查看
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 |
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.
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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<esri:MapResourceManager ID="MapResourceManager1" runat="server">
<ResourceItems>
</ResourceItems>
</esri:MapResourceManager>
<esri:Map ID="Map1" runat="server" Height="453px" Width="556px" MapResourceManager="MapResourceManager1">
</esri:Map>
</div>
<div id="BusyIndicator" style="z-index: 1000; left: 25px; width: 100px; position: absolute; top: 422px;height: 100px">
<img src="images/CircleThickbox.gif" />
</div>
</form>
<script language="javascript" type="text/javascript">
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
相关文章推荐
- Javascript在ajax提交过程中页面显示加载中,请等待效果,并在提交过程中限制确定按钮防止多次提交,提交完成后,解除提交限制
- arcgis web 显示加载arcgis server地图,提供查询标记功能
- 浏览器第一次加载HTML Viewer,显示初始地图时的函数调用过程
- recyclerview添加上拉加载显示加载状态
- AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题
- Flex :自定义Loading载入状态(含图标) 及解决Flex中GIF动画图片加载时显示动起来
- ArcGIS API For Javascript之地图基本加载与显示,地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现
- arcgis for javascript 加载瓦片地图出现显示混乱的问题
- 一个页面从输入URL到页面加载显示完成,这个过程都发生什么?
- ArcEngine中加载ArcGIS Server地图服务
- AjaxLoading:利用Ajax加载数据,并显示友好的等待界面
- ArcGIS Server网站发布后地图显示空白的原因之一
- ArcGis For Silverlight API,地图显示Gis,绘制点,线,绘制图等(二)--Silverlight 配置动态的 webService、动态加载ArcGis地图服务
- listview上拉加载,和显示地图mark
- ArcGIS Server发布的地图服务不显示地图的原因分析
- 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
- 一个页面从输入URL到页面加载显示完成,这个过程发生了什么?
- 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
- 一个页面从输入URL 到页面加载显示完成,这个过程中都发生了什么?
- ASP 查询数据库 等待状态显示