ArcGIS api for javascript——加载图标
描述
这个示例展示了如何能用一个动画图片显示地图正在加载。在这个示例中，图片是一个小的动画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——加载图标的更多相关文章
- ArcGIS api for javascript——加载查询结果，悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
- ArcGIS API for Javascript 加载天地图（经纬度投影）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ArcGIS API for Javascript 加载天地图（墨卡托投影）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ArcGIS api for javascript——加载查询结果，单击显示信息窗口
描述 本例在开始和地图交互前执行一个查询并加载结果.这允许用户点击任意郡县立即看到一个InfoWindow. QueryTask构造函数接受被查询的图层,即ESRI sample server上ESR ...
- ArcGIS API For JavaScript 加载地图，设置地图中心点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ArcGIS API for Silverlight 加载google地图
原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...
- ArcGIS API for Silverlight加载google地图（后续篇）
原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...
- 解决ArcGIS API for Silverlight 加载地图的内外网访问问题
原文:解决ArcGIS API for Silverlight 加载地图的内外网访问问题 先上一个类,如下: public class BaseClass { public static string ...
- arcgis api for javascipt 加载天地图、百度地图
写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...
随机推荐
- Maven配置文件中配置指定JDK版本
1. 在setting.xml文件中的<profiles>标签加入如下配置: <profile> <id>jdk-1.8</id> <activa ...
- MariaDB GALERA 集群双节点部署
节点1:10.2.2.41 节点2:10.2.2.42 软件: mariadb-galera-10.0.22-linux-x86_64.tar.gz #galera相关参数:(两个节点配置文件类似) ...
- LAMP 建立 Wordpress 站点 Linux Apache MariaDB PHP
使用LAMP建立Wordpress, 要求如下: 准备工作: VMware 14 CentOS 7.4 最小化 安装镜像 Wordpress 安装包, 下载 预热: 使用VMware新建4台虚拟机, ...
- 路飞学城Python-Day11
[44.函数-生成器] 需求:有一个列表 [0,1,2,3,4,5,6,7,8,9],对这个列表循环+1 li = [0,1,2,3,4,5,6,7,8,9] li = map(lambda x:x+ ...
- python中*号用法总结
python 中有很多地方用到星号,有时候会想知道这个*是干嘛用的,总结如下,有不当之处,还望不吝指出,谢谢.1.乘法: 在很多时候是用作乘法的,例如: In [90]: 2*7 Out[90]: 1 ...
- 【转载】python学习之 字符串前'r'的用法
文章转载:https://www.cnblogs.com/cyiner/archive/2011/09/18/2180729.html 在打开文件的时候open(r'c:\....') 加r和不加'' ...
- Testing for SSL renegotiation
https://blog.ivanristic.com/2009/12/testing-for-ssl-renegotiation.html
- poj 2079 Triangle，旋转卡壳求点集的最大三角形
给出一个点集,求顶点在点集中的最大的三角形面积. 我们知道这三角形的三个点肯定在凸包上,我们求出凸包之后不能枚举,由于题目n比較大,枚举的话要O(n^3)的数量级,所以採用旋转卡壳的做法: 首先枚举三 ...
- 泛泰 A850 4.1.2 刷第三方专用Recovery合集
下载 http://download.csdn.net/detail/benjaminwan/7406089 专用于刷基于AOSP4.1.2的乐蛙和MIUIV5 由于本人制作的第三方ROM,为了通刷, ...
- 搭建基于qemu + eclipse的kernel调试环境(by quqi99)
作者:张华 发表于:2016-02-06版权声明:能够随意转载.转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 使用q ...