ArcGIS For JavaScript API Show loading ico/text(加载时显示图标/文本)————（十一）

最新推荐文章于 2022-11-01 10:30:48 发布

X-rapido

最新推荐文章于 2022-11-01 10:30:48 发布

阅读量3.4k

点赞数

分类专栏： ArcGIS Api For Javascript 文章标签： ArcGIS ForJavaScript ArcGIS二次开发

本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8485741

版权

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

一、

描述：

此示例演示了如何使用动画图像显示的地图正在加载。图像是一个小的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 lang="en">
    <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">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <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 lang="en">
<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">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
  <!-- 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>

效果如下图：

X-rapido

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS For JavaScript API Show loading ico/text(加载时显示图标/文本)————（十一）

一、描述：此示例演示了如何使用动画图像显示的地图正在加载。图像是一个小的GIF动画。图像出现在地图第一次加载和用户缩放或平移时已加载，所有图层加载完毕的图像消失。在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_showloading/index.html引用联接：http://help.
复制链接

扫一扫