一、
描述：
此示例示範了如何使用動畫圖像顯示的地圖正在加載。圖像是一個小的GIF動畫。圖像出現在地圖第一次加載和使用者縮放或平移時已加載，所有圖層加載完畢的圖像消失。
檢視原文：http://www.ibloger.net/article/375.html
線上示範：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 >
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<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 >
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<!-- 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>
效果如下圖：
