描述
这个示例展示了如何能用一个动画图片显示地图正在加载。在这个示例中，图片是一个小的动画GIF。当地图第一次加载或用户缩放和平移地图时显示图片。当所有图层加载完成图片消失。
这个示例是通过events驱动的。地图的onLoad, onZoomStart和onPanStart事件加载图片显示。图层的onUpdate事件删除图标。
图片路径在HTML body里面引用。可以使用命名空间方法esri.show和esri.hide来开关图片的可见性。该例使用一个计数器变量layersLoaded在隐藏图片前确认所有图层被加载。图片隐藏以后，计数器设回0.
本例的所有逻辑在init函数里，除了全局变量。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 7 <title>Map Loading Image.</title> 8 9 <link rel="stylesheet" type="text/css" href="styles.css" 10 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"> 11 <link rel="stylesheet" type="text/css" href="styles.css" 12 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/soria/soria.css"> 13 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 14 <style type="text/css"> 15 #pic{ 16 max-width:100px; 17 max-height:100px; 18 } 19 .infowindow .window .top .right .user .titlebar .title{ 20 font-family: Arial,Helvetica,sans-serif; 21 font-weight: bold; 22 font-size: 14pt; 23 } 24 .infowindow .window .top .right .user.content{ 25 font-style: italic; 26 font-size: 10pt; 27 } 28 29 </style> 30 31 <script type="text/javascript"> 32 dojo.require("esri.map"); 33 var map; 34 function init(){ 35 //esri.config.defaults.io.proxyUrl="/proxy/proxy.ashx"; 36 var layersLoaded=0; 37 var loading=dojo.byId("loadingImg"); 38 39 40 map=new esri.Map("map"); 41 dojo.connect(map,"onLoad",showLoading); 42 dojo.connect(map,"onZoomStart",showLoading);//用户开始缩放时触发事件。 43 dojo.connect(map,"onPanStart",showLoading);//用户开始移动时触发事件。 44 45 var tiledMapServiceLayer=new esri.layers.ArcGISTiledMapServiceLayer( 46 "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" 47 ); 48 map.addLayer(tiledMapServiceLayer); 49 50 dojo.connect(tiledMapServiceLayer,"onUpdate",hideLoading); 51 52 function showLoading(){ 53 esri.show(loading);//显示图片 54 map.disableMapNavigation();//除了滑动条和移动箭头，不允许其它所有地图导航。 55 map.hideZoomSlider();//隐藏地图缩放滚动条。 56 } 57 58 function hideLoading(){ 59 layersLoaded++; 60 if(layersLoaded==map.layerIds.length){ 61 esri.hide(loading);//隐藏图片 62 map.enableMapNavigation();//允许所有地图导航 63 map.showZoomSlider();//显示地图缩放滚动条 64 layersLoaded=0; 65 66 } 67 } 68 } 69 70 dojo.addOnLoad(init); 71 </script> 72 </head> 73 74 <body class="tundra"> 75 <table> 76 <tr> 77 <td> 78 <div id="map" class="soria" style="position:relative;900px;height:600px;border:1px solid #000"> 79 <span id="scale" style="position:absolute;right:10px;bottom:10px;z-index:100;color:white"></span> 80 </div> 81 </td> 82 <td valign="top"> 83 84 <div><img id="loadingImg" src="images/dtdq.gif" style="right:512px;top:256px;z-index:100;"/></div> 85 </td> 86 </tr> 87 </table> 88 <div id="info1" style="padding:5px; margin:5px;background-color: #eee;" ></div> 89 </body> 90 </html> 91 92 93