没有合适的资源?快使用搜索试试~ 我知道了~
首页ArcGis-javaScript最全的中文API.docx
ArcGis-javaScript最全的中文API.docx
3星 · 超过75%的资源 需积分: 2 49 下载量 142 浏览量
更新于2023-03-16
评论 2
收藏 300KB DOCX 举报
ArcGis-javaScript,ArcGis-中文文档,ArcGisAPi,Arcgis地图技术
资源详情
资源评论
资源推荐
ArcGis-for-javaScript 最全中文 API
1.示例概述
这些示例展示了如何使用 的各种功能。每个示例页包含一个在线的演示,示例里做了什么的描述和源代码。查看视频展示如何拷贝示例代码并在机器上运行。
这些示例使用一颗星,两颗星或三颗星对相关复杂度进行了分类。如果刚刚学习 ,从一颗星示例开始可以更好的理解示例。在很多情况下,可以扩展或合并示例来为自己
的应用创建一个起始点。查看视频来学习如何创建起始点。
示例使用的服务来自 示例服务器和 和 。能够在自己的测试应用中使用来自 示例服务器上的服务来学习 。也可以在自己的应用
中使用 图层。使用条款见 的首页。
2.地图
2.1 加入一个地图
描述
这个示例显示 的一个地图。 地图是缓存的,意味着它有服务器管理员建来提升性能的一组预先渲染的切片。由于这个原因地图通过
表示。
如果地图服务没有一个可用的缓存,使用 ! 。如果不知道地图服务是否有缓存可用,使用 !"
寻找。
注意切片地图服务图层的构造函数包含服务的 #$%&&'"'"&&&&( ()"(!&,使用 !"
找到自己的地
图服务的 #。
这行加入 地图
map.addLayer(tiledMapServiceLayer);
代码
<!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>Create Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/
tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/
ESRI_Imagery_World_2D/MapServer");
map.addLayer(tiledMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
Creates a map and adds an ArcGISTiledMapServiceLayer.<br />
Map navigation using mouse:
<ul>
<li>Drag to pan</li>
<li>SHIFT + Click to recenter</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>
2.2 加入地图并显示当前地图范围
描述
这个示例使用 '*"
属性接收地图范围的左下角和右上角坐标 +书签+。
使用下列行创建地图%
var map = new esri.Map("map");
上面行中++出现了三次。第一次是对象的名称,第二次 '是类的名称,第三次++是将包含地图的 !- 的名称。
这个示例加入一个
到底图,表示一个 $ 地图服务,但是也可以使用 ! 。这种方式接收的地图的范围是相
同的。
注意切片地图服务层的构造函数需要服务的 端点的 #$%&&'"'"&&&&(()"(!&。可以使用
!"
找到地图服务的 #。
下行代码为地图的 showExtent 事件增加了一个事件监听器:
dojo.connect(map, "onExtentChange", showExtent);
这意味着如果地图的范围被修改,回调函数 showExtent 将被调用。showExtent 函数构建一个包含地图的两个角的坐标的字符串。
"./"0*'*,*'
#$"0*'**,*' *
这两个角是需要知道用于地图的边界框的。showExtent 函数的最后一行通过增加完整的字符串到1/"1!- 在页面上显示坐标%
dojo.byId("info").innerHTML = s;
代码
<!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>Create Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/
tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/
ESRI_StreetMap_World_2D/MapServer");
map.addLayer(tiledMapServiceLayer);
dojo.connect(map, "onExtentChange", showExtent);
}
function showExtent(extent) {
var s = "";
s = "XMin: "+ extent.xmin + " "
+"YMin: " + extent.ymin + " "
+"XMax: " + extent.xmax + " "
+"YMax: " + extent.ymax;
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>
2.3 加入地图并显示 x,y 坐标
描述
这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标。通过事件监听器来更新鼠标移到的 * 和 坐标。
下行代码创建了地图:
var map = new esri.Map("map");
上面行中++出现了三次。第一次是对象的名称,第二次 '是类的名称,第三次++是将包含地图的 !- 的名称。
这个示例加入一个
到底图,表示一个 $ 地图服务,但是也可以使用 ! 。这种方式接收的地图的范围是相
同的。
注意切片地图服务层的构造函数需要服务的 端点的 #$%&&'"'"&&&&(()"(!&。可以使用
!"
找到地图服务的 #。
这两行代码增加了事件监听器到地图。一个监听器为了 ""2" ,另外一个为了 ""2! ,但是他们都是调用函数 showCoordinates%
dojo.connect(map, "onMouseMove", showCoordinates);
dojo.connect(map, "onMouseDrag", showCoordinates);
这些事件都传递地图点坐标到 showCoordinates 函数。下列代码是函数如何获得坐标并写到+/"+标签:
var mp = evt.mapPoint;
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
代码
<!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>Create Map Display Mouse Coordinates</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/
tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
dojo.connect(map, "onLoad", function() {
//after map loads, connect to listen to mouse move & drag events
dojo.connect(map, "onMouseMove", showCoordinates);
dojo.connect(map, "onMouseDrag", showCoordinates);
});
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/
ESRI_StreetMap_World_2D/MapServer");
map.addLayer(tiledMapServiceLayer);
}
function showCoordinates(evt) {
//get mapPoint from event
var mp = evt.mapPoint;
//display mouse coordinates
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div id="map" style="position:relative; width:900px; height:600px; border:1px solid #000;">
<span id="info" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:50;"></span>
</div>
</body>
</html>
2.4 加入动态地图
描述
这个示例展示了增加一个按用户缩放或平移服务器每次绘制的地图。这样的地图没有切片的 $
并被调用一个动态地图服务图层。 !
表示
动态地图服务。
动态地图服务执行效率比切片地图服务慢。如果不能创建一个切片的缓存,只能使用动态地图服务。如果数据修改比更新缓存要快,可能不能创建一个缓存,或者需要实时数据的显示。
下行代码创建了地图:
var map = new esri.Map("map");
上面行中++出现了三次。第一次是对象的名称,第二次 '是类的名称,第三次++是将包含地图的 !- 的名称。
注意动态地图服务图层的构造函数需要服务的 端点的 #$%&&'"'"&&&&!"$&("2"()"&'可
以使用 !"
找到地图服务的 #。
注意图层使用
方法设置半透明的。 然后用地图的
方法增加图层到地图。
dynamicMapServiceLayer.setOpacity(0.5);
map.addLayer(dynamicMapServiceLayer);
代码
<!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>Create Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/
tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var imageParameters = new esri.layers.ImageParameters();
imageParameters.format = "png24"; //set the image type to PNG24, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/
services/Demographics/ESRI_Population_World/MapServer", {"opacity":0.5, "imageParameters":imageParameters});
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
Creates a map and adds an ArcGISDynamicMapServiceLayer.<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>
2.5 加入两个动态地图
描述
这个示例表现如何加两个动态地图到一个地图。动态服务按用户缩放或平移服务器每次绘制的地图, !
表示 动态地图服务。不像切片
地图服务,动态地图服务没有一个预先渲染的图片切片的 $ 。由于这个原因,动态地图服务比切片地图服务慢,但是对显示常常修改的和实时的数据是很有用的。
图层顺序由 '
方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。在这个示例中,# 人口普查的国家图层被放置在堪萨斯州石油和天然气图层上
方。
注意图层使用
方法设置半透明的。
dynlayer2.setOpacity(0.5);
代码
<!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>Create Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/
tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
剩余63页未读,继续阅读
月落乌梯
- 粉丝: 1
- 资源: 16
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 2023年中国辣条食品行业创新及消费需求洞察报告.pptx
- 2023年半导体行业20强品牌.pptx
- 2023年全球电力行业评论.pptx
- 2023年全球网络安全现状-劳动力资源和网络运营的全球发展新态势.pptx
- 毕业设计-基于单片机的液体密度检测系统设计.doc
- 家用清扫机器人设计.doc
- 基于VB+数据库SQL的教师信息管理系统设计与实现 计算机专业设计范文模板参考资料.pdf
- 官塘驿林场林防火(资源监管)“空天地人”四位一体监测系统方案.doc
- 基于专利语义表征的技术预见方法及其应用.docx
- 浅谈电子商务的现状及发展趋势学习总结.doc
- 基于单片机的智能仓库温湿度控制系统 (2).pdf
- 基于SSM框架知识产权管理系统 (2).pdf
- 9年终工作总结新年计划PPT模板.pptx
- Hytera海能达CH04L01 说明书.pdf
- 数据中心运维操作标准及流程.pdf
- 报告模板 -成本分析与报告培训之三.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论1