描述

本例展示了如何设置地图的范围为地图其中一个图层的范围。本例有两个图层：ArcGIS Online上的世界地图图层ArcGISTiledMapServiceLayer和堪萨斯州的要素的图层ArcGISDynamicMapServiceLayer。本例展示了如何设置地图总是以堪萨斯州范围开始。

代码包含两个事件监听器，一个是为了每个图层。这些监听器帮助记录多少图层被加载。当图层计数是2，createMapAddLayers函数被调用。这个函数创建一个地图，设置地图范围是myService2（堪萨斯州服务）的范围：

myMap = new esri.Map("mapDiv", { extent:myService2.fullExtent });

地图被创建以后，图层被增加。注意加载图层和增加图层不是一回事。在本例中，地图被创建前图层加载，地图创建以后图层被加到地图里。

直到所有图层被加载前要避免访问地图属性。如果代码中没有包含事件监听器，有可能在myService2完全加载前地图就会尝试去设置它的范围，这回引起意想不到的结果。

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>Set Map Extent Using Second Service</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">

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

     <script type="text/javascript">

         dojo.require("esri.map");

         var map,myservice1,myservice2;

         function init(){

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

              myService1=new esri.layers.ArcGISTiledMapServiceLayer(

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

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

             );

             var secondaryMapServiceURL = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";

             //var secondaryMapServiceURL = "http://118.144.36.6:6080/arcgis/rest/services/chakan/henan530/MapServer";

             myService2 = new esri.layers.ArcGISDynamicMapServiceLayer(secondaryMapServiceURL,{opacity:0.65});

             var layerLoadCount=0;

             //当两个图层加载时运行creatMapAddLayers

             if(myService1.loded){

                 layerLoadCount+=1;

                 if(layerLoadCount == 2){

                     creatMapAddLayers(myService1,myService2);

                 }

             }else{

                 dojo.connect(myservice1,"onLoad",function(service){

                     layerLoadCount += 1;

                     if(layerLoadCount == 2){

                         creatMapAddLayers(myService1,myService2);

                     }

                 });

             }

             if(myService2.loded){

                 layerLoadCount+=1;

                 if(layerLoadCount == 2){

                     creatMapAddLayers(myService1,myService2);

                 }

             }else{

                 dojo.connect(myservice2,"onLoad",function(service){

                     layerLoadCount += 1;

                     if(layerLoadCount == 2){

                         creatMapAddLayers(myService1,myService2);

                     }

             });

         }

         //创建一个地图，设置范围并添加到地图服务中

         function creatMapAddLayers(myService1,myService2){

         //创建地图

             map=new esri.Map("mapDiv",{extent:myservice2.fullExtent});

             map.addLayer(myService1);

             map.addLayer(myService2);

             dojo.connect(map,"onClick",addPoint);

             function addPoint(event){

                 map.infoWindow.setTitle("Coordinates-坐标");

                 map.infoWindow.setContent("经/纬：" + event.mapPoint.x + "," + event.mapPoint.y

                 +"<br/>screen x/y: " + event.screenPoint.x + ","+event.screenPoint.y);

                 map.infoWindow.show(event.screenPoint,map.getInfoWindowAnchor(event.screenPoint));

             }

         }

         }

         dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

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

     <br>

     This map shows two services:

     <ul>

     <li>An ArcGIS Online tiled service that has a world extent.</li>

     <li>A second dynamic service with an extent of the State of Kansas.  This is the extent used when the maps are first displayed. </li>

     </ul>

     Note that if you want to combine to tiled services in the same map, they must have the same tile configuration.

   </body>

 </html>

ArcGIS api for javascript——用第二个服务的范围设置地图范围的更多相关文章

  1. ArcGIS api for javascript——以地理处理结果为条件查询地图

    这里发生什么任务呢?当第一次单击地图,单击的坐标被发送到一个Geoprocessor任务.该任务访问服务器上的通过ArcGIS Server 地理处理服务提供的可用的GIS模型.本例中模型计算驱动时间 ...

  2. ArcGIS api for javascript——地理处理任务-服务区域任务

    描述 本例展示了如何发送一些输入值到ArcGIS Server上的GIS模型并获得结果反馈给web应用.本例中,模型计算自在地图上单击点起始的驱动时间多边形. 例如,这个分析类型可用于想要知道多少人生 ...

  3. ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图

    3D地图又叫场景. 由上一篇可知, require入口函数的第一个参数是字符串数组 ["esri/Map", "esri/views/MapView", &qu ...

  4. arcgis api for javascript 学习（二） 发布并调用地图切片

    文章将从发布切片地图到调用切片地图整个过程都展示出来. (一).切片地图的发布 1.还是前面的arcgis展示的地图 2.与发布动态地图前面的步骤是一样的 打开分享后,如图 3.一切就绪后,到达缓存的 ...

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

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

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

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

  7. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

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

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

  9. ArcGIS api for javascript 离线部署

    一.说明: 1.本篇文章以及之后的相关的文章所使用的ArcGIS API for javascript 的版本是3.3.初学者为了学习简单,可以引用在线的 Javascript.但是如果只能连接内网, ...

随机推荐

  1. SpringBoot学习笔记(9)----SpringBoot中使用关系型数据库以及事务处理

    在实际的运用开发中,跟数据库之间的交互是必不可少的,SpringBoot也提供了两种跟数据库交互的方式. 1. 使用JdbcTemplate 在SpringBoot中提供了JdbcTemplate模板 ...

  2. 算法38---292. Nim游戏

    1.题目: 你和你的朋友,两个人一起玩 Nim游戏:桌子上有一堆石头,每次你们轮流拿掉 1 - 3 块石头. 拿掉最后一块石头的人就是获胜者.你作为先手. 你们是聪明人,每一步都是最优解. 编写一个函 ...

  3. windows下命令行复制

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

  4. 紫书 习题 8-2 UVa 1610 （暴力出奇迹）

    这道题我真的想的非常的复杂, 拿草稿纸一直在找规律,推公式, 然后总有一些特殊的情况. 然后就WA了N次.无奈之下看了别人的博客, 然后就惊了.直接暴力枚举两个相邻字符串 里面的所有可能就可以了--真 ...

  5. 【Henu ACM Round#24 D】Iterated Linear Function

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把B提取出来就是一个等比数列了. 求和一下会发现是这种形式. \(B*\frac{(A^n-1)}{A-1}+A^n*x\) 则求一 ...

  6. 对于树的序列化，用了stream，很好

    https://leetcode.com/problems/serialize-and-deserialize-binary-tree/?tab=Description 下面这个解法里面的C++部分很 ...

  7. 微信开发出现 redirect-uri參数错误原因是设置回调页面域名不要加HTTP：//

    OAuth2.0 网页授权设置.回调页面域名不要加HTTP:// NND  微信的研发.你程序处理下非常麻烦吗?给个提示非常麻烦吗?让我查了1个多小时.

  8. 捕捉到来自宇宙深空的神奇X-射线信号

    请看下图: 这是专门用于捕捉X-射线信号的航天望远镜,约有5吨重,执行轨道距离地面大约有5万多公里.6月24日,美国宇航局NASA宣布,这台航天望远镜从银河系深处捕捉到一种波长非常特殊的神奇X-射线信 ...

  9. Android蓝牙技术Bluetooth使用流程（具体解释）

    一:蓝牙设备之间的通信主要包含了四个步骤 设置蓝牙设备 寻找局域网内可能或者匹配的设备 连接设备 设备之间的传输数据 二:详细编程实现 1. 启动蓝牙功能 首先通过调用静态方法getDefaultAd ...

  10. 拥抱PBO（基于项目的组织）聚焦核心价值创造

    近年来.PBO(Project-Based Organizations)作为一种新兴的整合各类专业智力资源和专业知识的组织结构,受到越来越多的关注,第五版PMBOK出现的新词汇.三种组织(职能型.矩阵 ...