描述

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

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

图片路径在HTML body里面引用。可以使用命名空间方法esri.showesri.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. Linux部署之批量自动安装系统之NFS篇

    1.         编辑配置文件让远端设备可访问vim /etc/exports   2.         启动服务

  2. hiho150周 - 动态规划*

    题目链接 一个n*m的迷宫由‘.’和'b'组成,从(1,1)走到(n,m),只能向右或者向下走,但遇到‘b’时才能改变方向,开始时方向向右. 问到达(n,m)至少改变几个位置上的值 /******** ...

  3. windows2008搭建ftp服务器

    控制面板 操作—〉添加角色 (web,文件服务) windows 搜索中: 添加ftp站点: 计算机---管理 –服务器管理  --- 添加一个用户 ,密码. 防护墙高级设置中添加 出入站规则 允许2 ...

  4. Swift 闭包中 self? 的由来

    class UIViewSpringAnimator: SwipeAnimator { // 动画完成的闭包 var completion:((Bool) ->Void)? func addCo ...

  5. 我的Java历程_maven配置的心路历程

    从github上download了个maven管理的开源项目,接下来随笔下安装maven的心路历程: 异常尴尬的是import进ide之后一个红色的感叹号!震惊!google一下知道了,maven没配 ...

  6. [agc015c]nuske vs phantom thnook

    题意: 有一个n*m的网格图,每个格子是蓝色或白色.四相邻的两个格子连一条边,保证蓝格子构成一个森林. 有q组询问,每次询问给出一个矩形,问矩形内蓝格子组成的联通块个数. $1\leq n,m\leq ...

  7. UI控件设置

    去掉cesium默认的版权信息: 在style样式中添加 .cesium-widget-credits {display:none !important} 去掉动画控件.地址搜索控件.图层选择控件.操 ...

  8. VMware exsi 虚拟化嵌套

    默认情况下exsi 虚拟化嵌套是没开启的 需要我们连接exsi主机,从后台找到对应的虚拟机修改配置文件开启虚拟化功能 1.连接exsi主机,开启ssh功能 2.ssh到exsi主机,修改配置文件 查找 ...

  9. windows下命令行复制

    在CMD命令提示符窗口中点击鼠标右键,选择“标记”选项,然后按住鼠标左键不动,拖动鼠标标记想要复制的内容.标记完成以后请按键盘上的“回车”键

  10. nginx和apache作为webserver的差别

    1.两者所用的驱动模式不同. nginx使用的是epoll的非堵塞模式事件驱动. apache使用的是select的堵塞模式事件驱动. 2.fastcgi和cgi的差别 当用户请求web服务的时候.w ...