描述

这个示例展示了如何能用一个动画图片显示地图正在加载。在这个示例中，图片是一个小的动画GIF。当地图第一次加载或用户缩放和平移地图时显示图片。当所有图层加载完成图片消失。

这个示例是通过events驱动的。地图的onLoad, onZoomStart和onPanStart事件加载图片显示。图层的onUpdate事件删除图标。

图片路径在HTML body里面引用。可以使用命名空间方法esri.show和esri.hide来开关图片的可见性。该例使用一个计数器变量layersLoaded在隐藏图片前确认所有图层被加载。图片隐藏以后，计数器设回0.

本例的所有逻辑在init函数里，除了全局变量。

  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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" />

     <title>Map Loading Image.</title>

     <link rel="stylesheet" type="text/css" href="styles.css"

           href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">

     <link rel="stylesheet" type="text/css" href="styles.css"

           href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/soria/soria.css">

     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

     <style type="text/css">

         #pic{

             max-width:100px;

             max-height:100px;

         }

         .infowindow .window .top .right .user .titlebar .title{

             font-family: Arial,Helvetica,sans-serif;

             font-weight: bold;

             font-size: 14pt;

         }

         .infowindow .window .top .right .user.content{

             font-style: italic;

             font-size: 10pt;

         }

     </style>

     <script type="text/javascript">

         dojo.require("esri.map");

         var map;

         function init(){

             //esri.config.defaults.io.proxyUrl="/proxy/proxy.ashx";

             var layersLoaded=0;

             var loading=dojo.byId("loadingImg");

         map=new esri.Map("map");

         dojo.connect(map,"onLoad",showLoading);

         dojo.connect(map,"onZoomStart",showLoading);//用户开始缩放时触发事件。

         dojo.connect(map,"onPanStart",showLoading);//用户开始移动时触发事件。

           var tiledMapServiceLayer=new esri.layers.ArcGISTiledMapServiceLayer(

             "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"

         );

         map.addLayer(tiledMapServiceLayer);        

         dojo.connect(tiledMapServiceLayer,"onUpdate",hideLoading);

         function showLoading(){

             esri.show(loading);//显示图片

             map.disableMapNavigation();//除了滑动条和移动箭头，不允许其它所有地图导航。

             map.hideZoomSlider();//隐藏地图缩放滚动条。

         }

         function hideLoading(){

             layersLoaded++;

             if(layersLoaded==map.layerIds.length){

                 esri.hide(loading);//隐藏图片

                 map.enableMapNavigation();//允许所有地图导航

                 map.showZoomSlider();//显示地图缩放滚动条

                 layersLoaded=0;

             }

         }

         }

         dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

       <table>

           <tr>

               <td>

                  <div  id="map" class="soria" style="position:relative;width:900px;height:600px;border:1px solid #000">

                      <span id="scale" style="position:absolute;right:10px;bottom:10px;z-index:100;color:white"></span>

                  </div>

               </td>

               <td valign="top">

                 <div><img id="loadingImg" src="data:images/dtdq.gif" style="right:512px;top:256px;z-index:100;"/></div>

               </td>

           </tr>

       </table>

       <div id="info1" style="padding:5px; margin:5px;background-color: #eee;"  ></div>

   </body>

 </html>

ArcGIS api for javascript——加载图标的更多相关文章

  1. ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  2. ArcGIS API for Javascript 加载天地图（经纬度投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. ArcGIS API for Javascript 加载天地图（墨卡托投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ArcGIS api for javascript——加载查询结果，单击显示信息窗口

    描述 本例在开始和地图交互前执行一个查询并加载结果.这允许用户点击任意郡县立即看到一个InfoWindow. QueryTask构造函数接受被查询的图层,即ESRI sample server上ESR ...

  5. ArcGIS API For JavaScript 加载地图，设置地图中心点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. ArcGIS API for Silverlight 加载google地图

    原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...

  7. ArcGIS API for Silverlight加载google地图（后续篇）

    原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...

  8. 解决ArcGIS API for Silverlight 加载地图的内外网访问问题

    原文:解决ArcGIS API for Silverlight 加载地图的内外网访问问题 先上一个类,如下: public class BaseClass { public static string ...

  9. arcgis api for javascipt 加载天地图、百度地图

    写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...

随机推荐

  1. hiho 1571 - 贪心好题*

    题目链接 小Hi在帮助钢铁侠开发新的盔甲.这套新盔甲一共包含M种武器插槽,其中第i种插槽有Ci个.每个插槽最多安装一个武器模块. 小Hi一共准备了N个武器模块,编号1~N.每个武器模块都有三个参数Vi ...

  2. 服务器搭建域控与SQL Server的AlwaysOn环境过程（四）配置AlwaysOn

    0 引言 这一篇才真正开始搭建AlwaysOn,前三篇是为搭建AlwaysOn 做准备的. 步骤 1.3 配置AlwaysOn 请先使用本地用户Administrator登录这两个集群节点并执行下面的 ...

  3. React项目构建（利用webpack打包）

    引言 最近React作为当前最为火热的前端框架.最近也相继而出来相关ES7的新语法. 当然,在使用React开发web项目的时候,不得不提到的就是与之配套的相应的打包技术,之前上文已经简单的提到Rea ...

  4. keepalived + nginx 实现高可用

    原理 nginx 可以实现负载均衡,但 nginx 自身存在单点故障的问题,这时候最先想到的就是 keepalived,可以解决单点故障的问题 由于没有使用 lvs,所以这里 nginx 之间不存在负 ...

  5. Android群英传-拼图游戏puzzle-代码设计和实现

    上个周末,3个小时总体上读完了<Android群英传>,本周主要在研究代码层次的设计和实现.  编译安装在手机上,玩了几把,结合代码,一周时间才掌握了整体的思路.  大部分时间,其实花在了 ...

  6. Mybaties下的分页功能的实现

    jsp页面 <!-- 页码 --> <div class="ipRListNav2"> <a href="zyxx.do?findZyxx& ...

  7. Qt之QSS（语法高亮）

    简述 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,例如:编程语言.标记语言,这些语言的语法错误显示是有区别的. 简述 详细 ...

  8. Qt之QSS（动态属性）

    简述 QSS可以定制应用程序的外观,无需关注Qt样式背后的魔力.从非常轻微到极其复杂的调整,样式表都可以做到.对于一个完全定制和独特的用户体验,QtQuick和QGraphicsView是更好的选择. ...

  9. BZOJ 4236~4247 题解

    BZOJ 4236 JOIOJI f[i][0..2]表示前i个字符中′J′/′O′/′I′的个数 将二元组<f[i][0]−f[i][1],f[i][1]−f[i][2]>扔进map,记 ...

  10. linux 抓包 tcpdump 简单应用

    在linuxserver上,常常要定位网络问题,就须要用到抓包. 比如:tcpdump -X -s 0 host 10.17.81.22 and port 9999 -w /home/text.cap ...