一、
描述：
此示例演示了如何使用动画图像显示的地图正在加载。图像是一个小的GIF动画。图像出现在地图第一次加载和用户缩放或平移时已加载，所有图层加载完毕的图像消失。
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_showloading/index.html
引用联接：http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm
例子中使用事件驱动方式。onUpdateStart函数是在更新地图内容时显示图片。onUpdateEnd函数是在更新加载完毕后将图片消失。
图片路径被引用在HTML的身体。您可以使用命名空间的方法esri.show 和 esri.hide切换图像显示。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>地图加载图像</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
var map;
var loading;
/**
* 初始化函数
*/
function init() {
loading = dojo.byId("loadingImg"); // 加载图像. DomID
var initialExtent = new esri.geometry.Extent( // 地图范围
11858134, // 右上角X坐标
2685691, // 左下角X坐标
14362823, // 右上角Y坐标
3938035, // 左下角Y坐标
new esri.SpatialReference({ // 空间参考
wkid:102100
})
);
map = new esri.Map("map",{
extent:initialExtent // 范围
}
);
dojo.connect(map,"onUpdateStart",showLoading); // 绑定函数
dojo.connect(map,"onUpdateEnd",hideLoading);
// 一个URL到地图中的地图服务。
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(tiledMapServiceLayer); // 添加到地图中
// 非缓存的地图服务的URL。
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
dynamicMapServiceLayer.setOpacity(0.4); // 设置透明度
map.addLayer(dynamicMapServiceLayer);
}
function showLoading() {
esri.show(loading); // 显示图片
map.disableMapNavigation(); // 禁止所有的地图导航,除了滑块和平移箭头。
map.hideZoomSlider(); // 隐藏地图的缩放滑块。
}
function hideLoading(error) {
esri.hide(loading);
map.enableMapNavigation();
map.showZoomSlider();
}
dojo.addOnLoad(init); // 初始化加载
</script>
</head>
<body class="claro">
<div id="map" style="position:relative; width:1024px; height:512px; border:1px solid #000;">
<img id="loadingImg" src="images/loading.gif" style="position:absolute; right:512px; top:256px; z-index:100;" />
</div>
</body>
</html>显示效果如下：
二、
描述方式同上，这个加载文字效果。与图片相比，少了些步骤而已，其实也挺简单的
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_showloadingtext/index.html
引用联接：http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>地图加载文字</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<!-- css to style the loading text-->
<style>
#mapDiv {
border: 1px solid #666;
}
#status {
background-color: black;
color: white;
padding: 3px;
border: solid 1px white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 79px;
}
</style>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map"); // 导入包
var map;
function init() {
var initialExtent = new esri.geometry.Extent( // 范围
11858134,
2685691,
14362823,
3938035,
new esri.SpatialReference({ // 空间参考
wkid:102100
})
);
map = new esri.Map("map",{extent:initialExtent});
dojo.connect(map,"onUpdateStart",function(){
esri.show(dojo.byId("status"));
});
dojo.connect(map,"onUpdateEnd",function(){
esri.hide(dojo.byId("status"));
});
// 一个URL到地图中的地图服务
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(tiledMapServiceLayer);
// 非缓存的地图服务的URL
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
dynamicMapServiceLayer.setOpacity(0.4);
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad(init); // 初始化加载
</script>
</head>
<body class="claro">
<div id="map" style="position:relative; width:1024px; height:512px; border:1px solid #000;">
<span id="status" style="position: absolute; z-index: 100; right: 443px; top: 242px;">
正在加载...
</span>
</div>
</body>
</html>效果如下图：
