ArcGIS api for javascript——加入地图并显示当前地图范围
描述
这个示例使用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 + " "
+"YMin: " + extent.ymin + " "
+"XMax: " + extent.xmax + " "
+"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——加入地图并显示当前地图范围的更多相关文章
- ArcGIS API For JavaScript 开发（二）基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
- ArcGIS api for javascript——使用图层定义显示地图
描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...
- ArcGIS api for javascript——鼠标悬停时显示信息窗口
描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...
- arcgis api for javascript 学习（五） 实现地图绘制工具
1.本文实现的功能为鼠标与地图之间的交互,能够在地图上绘制不同形状的图形 2.代码部分主要讲到的为Graphic函数的相关功能 <!DOCTYPE html> <html> & ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- 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 ...
- ArcGIS api for javascript——加载查询结果，悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
- arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中
吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...
- arcgis api for javascript 学习（四） 地图的基本操作
1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...
- ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...
随机推荐
- 1028C：Rectangles
You are given n rectangles on a plane with coordinates of their bottom left and upper right points. ...
- 初识Git(一)
以前经常听到Git,作为一个菜鸟级自学选手从没有真正去了解Git,借刘铁猛老师在油管上的<对答如刘>初步认识了git,作以下记录. 1.初始化一个git管理的文件夹 首先我在我的电脑C盘P ...
- 浅谈Android和IOS系统的差异
总结:事件响应级别.GPU加速.进程前后台.代码运行速度.内存管理机制. 进程管理机制.内存管理机制.cpu效率.GPU加速.事件响应级别. 1. 渲染机制不同 IOS的UI渲染采用实时优先级, ...
- 在js中关于同名变量和函数的地位争夺问题
先上一段让大家比较蒙圈的代码,接下来再慢慢讲解 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 路飞学城Python-Day14
转载:python之路-路飞学城-python-book [25.常用模块-logging模块详解] [26.常用模块-logging模块详解2] [27.常用模块-logging模块日志过滤和日志文 ...
- Django学习之配置篇
MTV Model Template View 数据库 模版文件 业务处理 了解Django框架,功能齐全 一.安装Django&Django基本配置 安装Django pip3 django ...
- 紫书 例题 10-2 UVa 12169 （暴力枚举）
就是暴力枚举a, b然后和题目给的数据比较就ok了. 刘汝佳这道题的讲解有点迷,书上讲有x1和a可以算出x2, 但是很明显x2 = (a * x1 +b) 没有b怎么算x2?然后我就思考了很久,最后去 ...
- 面试题——ArrayList和LinkedList的区别
List概括 先回顾一下List在Collection的框架图: 从图中可以看出: List是一个接口,他继承Collection接口,代表有序的队列. AbstractList是一个抽象类, ,它继 ...
- 为什么button在设置标题时要用一个方法，而不像lable一样直接用一个属性
为什么button在设置标题时要用一个方法.而不像lable一样直接用一个属性 原因是有时我们对 button做一次点击,须要改变button的标题.仅仅实用方法才干做到,而label是标签 ...
- Android清单文件具体解释(六) ---- <activity>节点的属性
1.android:allowTaskReparenting android:allowTaskReparenting是一个任务调整属性,它表明当这个任务又一次被送到前台时,该应用程序所定义的Acti ...