描述

这个示例使用Map.extent property属性接收地图范围的左下角和右上角坐标 "书签"。

使用下列行创建地图:

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

上面行中"Map"出现了三次。第一次(var map)是对象的名称，第二次 (esri.Map)是类的名称,第三次("map")是将包含地图的DIV的名称。

这个示例加入一个ArcGISTiledMapServiceLayer到底图，表示一个cachedArcGIS Server地图服务，但是也可以使用ArcGISDynamicMapServiceLayer。这种方式接收的地图的范围是相同的。

注意切片地图服务层的构造函数需要服务的REST端点的URL(http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services Directory找到地图服务的URL。

下行代码为地图的showExtent事件增加了一个事件监听器：

dojo.connect(map, "onExtentChange", showExtent);

这意味着如果地图的范围被修改，回调函数showExtent将被调用。showExtent函数构建一个包含地图的两个角的坐标的字符串。

Lower left corner = (extent.xmin, extent.ymin)

Upper right corner = (extent.xmax, extent.ymax)

这两个角是需要知道用于地图的边界框的。showExtent函数的最后一行通过增加完整的字符串到'info' DIV在页面上显示坐标:

dojo.byId("info").innerHTML = s;

 <%@ 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>Create Map</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");

         function init(){

             var map = new esri.Map("map");//1对象名，2类名，3div的id名

             var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(

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

             );

             map.addLayer(tiledMapServiceLayer);

             //添加一个事件监听器的地图onExtentChange事件，地图范围一旦改变，回调函数showExtent就被调用

             dojo.connect(map,"onExtentChange",showExtent);

         }

         //showExtent函数建立一个字符串，包含两个角落的地图坐标，这两个角来确定地图的边界矩形

         //Lower left corner = (extent.xmin, extent.ymin)

         //Upper right corner = (extent.xmax, extent.ymax)

         function showExtent(extent){

             var s = "";

             s = "XMin: "+ extent.xmin + "&nbsp;"

                    +"YMin: " + extent.ymin + "&nbsp;"

                    +"XMax: " + extent.xmax + "&nbsp;"

                    +"YMax: " + extent.ymax;

                    //showExtent函数的最后一行显示在页面上添加完成字符串的“info”DIV坐标

                dojo.byId("info").innerHTML = s;

         }

         dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

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

     <div id="info" style="padding:5px;margin:5px;background-color:#eee;"></div>

     Creates a map and adds an ArcGISTiledMapServiceLayer.  On map onExtentChanged event you should see the extent printed below the map.<br />

     Map navigation using mouse:

     <ul>

       <li>Drag to pan</li>

       <li>SHIFT + Click to recenter</li>

       <li>SHIFT + Drag to zoom in</li>

       <li>SHIFT + CTRL + Drag to zoom out</li>

       <li>Mouse Scroll Forward to zoom in</li>

       <li>Mouse Scroll Backward to zoom out</li>

       <li>Use Arrow keys to pan</li>

       <li>+ key to zoom in a level</li>

       <li>- key to zoom out a level</li>

       <li>Double Click to Center and Zoom in</li>

     </ul>

   </body>

 </html>

ArcGIS api for javascript——加入地图并显示当前地图范围的更多相关文章

  1. ArcGIS API For JavaScript 开发（二）基础地图

    有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...

  2. ArcGIS api for javascript——使用图层定义显示地图

    描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...

  3. ArcGIS api for javascript——鼠标悬停时显示信息窗口

    描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...

  4. arcgis api for javascript 学习（五） 实现地图绘制工具

    1.本文实现的功能为鼠标与地图之间的交互,能够在地图上绘制不同形状的图形 2.代码部分主要讲到的为Graphic函数的相关功能 <!DOCTYPE html> <html> & ...

  5. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  6. ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）

    转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...

  7. ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  8. arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  9. arcgis api for javascript 学习（四） 地图的基本操作

    1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...

  10. ArcGIS API for JavaScript根据两个点坐标在地图上画线

    ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...

随机推荐

  1. Linux部署之批量自动安装系统之Kickstart篇

    1.         安装   2.         在桌面环境下啊配置   3.         Kickstart之基本配置   4.         Kickstart之安装方法   5.    ...

  2. [转帖]关于Xilinx下Micro_Blaze中UartLite232外设的使用

    来源:https://blog.csdn.net/shen_you/article/details/78713746

  3. Failed to connect to server

    设置LR浏览器代理解决Failed to connect to server,Connection timed out问题. 虚拟机中,接口测试简单的Get请求,一直提示Failed to conne ...

  4. 优动漫PAINT中误删工具怎么办？

    最近收到一些小伙伴的提问,说我不小心把 XXX工具从面板上删掉了怎么办?本教程就来给大家分 享一下遇到这个问题时的三种解决方法,遇到同样问题的小伙伴们赶紧进来看一下哟! 优动漫PAINT下载:http ...

  5. schema文件及XML文件的DOM和Sax解析

    schema文件 <?xml version="1.0" encoding="UTF-8"?> <schema xmlns="htt ...

  6. WPF 获取应用的所有窗口

    原文:WPF 获取应用的所有窗口 本文告诉大家如何获取应用内的所有窗口,无论这些窗口有没显示 在 WPF 可以通过 Application.Current.Windows 列举应用的所有窗口 fore ...

  7. 【codeforces 404D】Minesweeper 1D

    [题目链接]:http://codeforces.com/problemset/problem/404/D [题意] 让你玩一个1维的扫雷游戏; 游戏的描述由数字0..2以及符号*表示; 分别表示这个 ...

  8. dll签名两种方法

    以下两种签名方法,都是对csp.dll签名,都不是CA颁发的,且效果不同, 一:通过自建证书签名 下载windows sdk,成功安装后,包括makecert.exe, cert2spc.exe, p ...

  9. &quot;duplicate symbol for architecture i386&quot; 解决的方法

    我在写项目的过程中,碰到了这个错误,我在网上查了一下,发现这个错误的原因是,project里面有反复的类. 解决方式:找到反复的类,然后删除掉就好了. 分析一下, 如图. 能够看出, 错误类型是 du ...

  10. poj 2513 欧拉回路+并查集推断是否联通+Trie树

    http://poj.org/problem? id=2513 最初看到 第一感觉---map  一看250000的数据量 果断放弃 然后记得曾经看过.trie取代map.尤其当数据量特别大的时候 学 ...