ArcGIS api for javascript——加載圖標

時間 2019-12-01

標籤 arcgis api javascript 加載圖標欄目 JavaScript 简体版

原文原文鏈接

描述

這個示例展現瞭如何能用一個動畫圖片顯示地圖正在加載。在這個示例中，圖片是一個小的動畫GIF。當地圖第一次加載或用戶縮放和平移地圖時顯示圖片。當全部圖層加載完成圖片消失。javascript

這個示例是經過events驅動的。地圖的onLoad, onZoomStart和onPanStart事件加載圖片顯示。圖層的onUpdate事件刪除圖標。css

圖片路徑在HTML body裏面引用。可使用命名空間方法esri.show和esri.hide來開關圖片的可見性。該例使用一個計數器變量layersLoaded在隱藏圖片前確認全部圖層被加載。圖片隱藏之後，計數器設回0.html

本例的全部邏輯在init函數裏，除了全局變量。java

 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;width: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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。