描述

本例展示了如何使用按钮在地图里的两个不同的图层间切换。所有地图里的图层恰巧是来自ArcGIS Online的ArcGISTiledMapServiceLayers。按钮是Dojo dijit按钮，不过也可以使用HTML按钮，radio按钮等调用相同的函数。

当应用运行时，发生下面的事情：

1.init函数被调用，创建一个地图并且通过map.addLayer方法直接加入影像图层。函数也填充了图层名字的数组，但是没有创建除影像图层之外的任何图层。

2.用户单击按钮，调用changeMap函数。一个包含与按钮一致的图层ID的单个项目数组作为输入参数被传递给changeMap函数。

3.changeMap直接调用hideImageTiledLayers函数，传给hideImageTiledLayers函数同样的包含和被点击的按钮一致的图层ID的单个项目的数组。hideImageTiledLayers函数循环访问地图里的每个图层，和传入函数的图层ID不匹配的图层ID的图层被隐藏。

4.函数 当hideImageTiledLayers函数完成，changeMap函数循环访问图层数组里的每个图层，并调用函数initLayer。 记住数组仅仅包含一个图层，和被单击的按一致的图层

5.initLayer函数创建图层，然后增加图层到地图里。

6.changeMap函数显示图层(使图层可见)。

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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>显示多个ArcGIS Online服务</title>

     <script type="text/javascript">djConfig = { isDebug:true };</script>

     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">

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

     <script type="text/javascript">

         dojo.require("esri.map");

         dojo.require("dijit.form.Button");

         var map;

         var streetMap, imageryPrime, shadedRelief, ngsTopoUS, boundariesWorld;

         function init(){

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

             imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer", {id:"imageryPrime"});

                map.addLayer(imageryPrime);

             streetMap = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer", "streetMap");

             shadedRelief = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_ShadedRelief_World_2D/MapServer", "shadedRelief");

             ngsTopoUS = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer", "ngsTopoUS");

             boundariesWorld = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/ESRI_BoundariesPlaces_World_2D/MapServer", "boundariesWorld");

         }

         function initLayer(url, id) {

             var layer = new esri.layers.ArcGISTiledMapServiceLayer(url, {id:id, visible:false});

                map.addLayer(layer);

                return layer;

         }

         function changeMap(layers) {

             hideImageTiledLayers(layers);

             for (var i=0;i<layers.length;i++) {

                 layers[i].show();

             }

         }

         function hideImageTiledLayers(layers) {

         alert(map.layerIds.length);

             for(var i=0,j=map.layerIds.length;i<j;i++) {

                 var layer = map.getLayer(map.layerIds[i]);

                 if(dojo.indexOf(layers,layer) == -1) {//没有找到

                     layer.hide();

                 }

             }

         } 

         dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

       <div id="map" style="width: 1100px;height: 600px;border: 1px solid #000"></div>

       <div  style="position: absolute;right: 175px;top: 10px;z-index: 999;">

           <button dojoType="dijit.form.Button" onclick="changeMap([imageryPrime]);"> imageryPrime</button>

           <button dojoType="dijit.form.Button" onclick="changeMap([imageryPrime,boundariesWorld]);">imageryPrime,boundariesWorld </button>

           <button dojoType="dijit.form.Button" onclick="changeMap([streetMap]);"> streetMap</button>

           <button dojoType="dijit.form.Button" onclick="changeMap([ngsTopoUS]);">ngsTopoUS </button>

           <button dojoType="dijit.form.Button" onclick="changeMap([shadedRelief]);">shadedRelief </button>

       </div>

   </body>

 </html>

ArcGIS api for javascript——显示多个ArcGIS Online服务的更多相关文章

  1. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  2. ArcGIS API for JavaScript开发笔记(一)——ArcGIS for Javascript API 3.14本地部署

    堪称史上最详细的< ArcGIS forJavascript API 3.14本地部署>文档,有图有真相~~~ ---------环境:Windows server 2012R2,IIS ...

  3. ArcGIS API for JavaScript 4.3 与ArcGIS Server联动使用【地图服务】

    [前言] 有好些网友问我怎么使用Server发布的地图服务了,其实非常的简单. 我在这里先声明:不提供Server软件,需要的请自行使用互联网搜索资源: 不阐述Server如何发布各各种服务,但是我会 ...

  4. ArcGIS api for javascript——显示地图属性

    描述 本例展示了如哦读取地图和图层的属性和返回信息给用户.本例中的四个按钮允许用户接收地图属性.每个按钮调用不同的函数. ·Get All Map Layers - 这个按钮调用getMapLayer ...

  5. ArcGIS api for javascript——显示多个查询结果

    描述 本例展示了在重叠的多边形处理查询的一种方式.单击一个石油和天然气的字段来查看地图上的高亮显示.如果仅仅点击一个要素,能够在单击一次来查看包含一些属性的InfoWindow.如果偶然单击到重叠的要 ...

  6. ArcGIS api for javascript——显示一个信息窗口

    描述 这个示例展示了在用户单击地图时如何在InfoWindow中显示信息.信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本,字符,图片和任何通过HTML表示的事物.这个例子在 ...

  7. ArcGIS api for javascript——合并两个ArcGIS Online服务

    描述 这个示例创建一个地图并ArcGIS Online增加连个图层到地图.ArcGIS Online是由ESRI体提供的一组切片地图服务,可以用来通过高质量的地图和数据增强应用.这个示例增加影像和运输 ...

  8. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  9. ArcGIS API for JavaScript开发初探——基础知识

    1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...

随机推荐

  1. PC比价软件

    方法:从百度中搜索比较软件排行,并且根据将搜索时间缩小在一年内.统计前面一页结果网站中的比价软件. 名称 备注 统计 淘淘搜购物助手 淘宝购物比价神器 1 省省比价软件 主流网购商城进行横向比较的智能 ...

  2. POJ 2976 Dropping tests【二分 最大化平均值】

    题意:定义最大平均分为 (a1+a2+a3+---+an)/(b1+b2+---+bn),求任意去除k场考试的最大平均成绩 和挑战程序设计上面的最大化平均值的例子一样 判断是否存在x满足条件 (a1+ ...

  3. 洛谷P3834 【模板】可持久化线段树 1 主席树

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 2000000 ...

  4. Qt之pro配置详解

    简述 使用Qt的时候,我们经常会对pro进行一系列繁琐的配置,为方便大家理解.查找,现将常用的配置进行整理. 简述 配置 注释 CONFIG DEFINES DEPENDPATH DESTDIR FO ...

  5. NIO框架之MINA源代码解析（一）：背景

     "你们的agent占了好多系统的port.把我们的非常多业务系统都给整死了,给我们造成了非常大的损失.要求你们的相关领导下周过来道歉"   --   来自我们的一个客户.   ...

  6. Woody的Python学习笔记4

    Python模块 Import语句 想要使用Python源文件,仅仅须要在还有一个源文件中运行import语句.语法例如以下: import module1 当解释器遇到import语句.假设模块在当 ...

  7. mysql-高级语言语法

    一.注释 从#字符到行尾 从'-- '序列到行尾.两个破折号之后至少要有一个空格符或制表符. 二.设置变量 用户变量的形式为@var_name,其中变量名varname可以有当前字符集的文字数字字符. ...

  8. Visual Assist X 10.8.2036的Crack破解补丁.2014.05.22 (General release.)

    说起来,VA公布上一个Genreal Release版本号已经是过春节那阵子时候的事了,时间过得真快. VA小组又给我们带来了新版本号的Visual Assist编码助手的 2036 版本号, 这个版 ...

  9. Android之Http通信——1.初识Http协议

    Android之Http通信--1.初识Http协议 引言: 今天是六一儿童节,先在这里给各位超龄儿童说声节日快乐哈~( ╯□╰ ),小猪也象征性地给群里的小朋友们派了红包-嗯,忙碌的五月最终过去了, ...

  10. Windows API Hook

    原文地址:http://blog.sina.com.cn/s/blog_628821950100xmuc.html 原文对我的帮助极大,正是由于看了原文.我才学会了HOOK.鉴于原文的排版不是非常好, ...