ArcGIS Server开发教程系列(7)使用ArcGIS API for Javascript-Hello World
ArcGIS API for Javascript API下载地址:http://support.esrichina-bj.cn/2011/0223/960.html
选择最新的下载就好了,目前是3.9
VS2010 C# 新建项目-ASP.NET Web应用程序即可。
API解压后把C:\inetpub\wwwroot\arcgis_js_v39_api复制到C:\inetpub\wwwroot\路径下,同时加载到程序中。
新建asp.net程序后,修改arcgis_js_v39_api\arcgis_js_api\library\3.9\3.9compact\init.js文件,即将“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为”localhost/arcgis_js_v39_api\arcgis_js_api\library\3.9\3.9compact\js”
Localhost是服务器名,这里用的本机。
使用web js:
<link rel="stylesheet"href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script type="text/javascript"> var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.9/"></script>
新建一个html文件编码
1. 切片服务
ArcGIS Tiled Map Service Layer(切片地图服务图层)提供对由ArcGIS Server REST API 所暴露的缓存地图服务资源的访问。缓存服务访问缓存文件夹中预先创建好的切片图片,而不是动态生成图片。
http://localhost:6080/arcgis/rest/services/test/MapServer 为服务地址,根据需要修改
注意需要首先引入esri, 引用这3个文件就可以了
dojo.require("esri.map");
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>地图-Test-切片服务</title>
<linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"
rel="stylesheet" type="text/css" />
<linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"
rel="stylesheet" type="text/css" />
<scriptsrc="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>
<style type="text/css"> .MapClass { width:900px; height:600px; border:1px solid #000;}</style>
<script type="text/javascript">
dojo.require("esri.map");
dojo.addOnLoad(function () {
var MyMap = new esri.Map("MyMapDiv");
var layer = newesri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/MapServer");
MyMap.addLayer(layer);
})
</script>
</head>
<body class="tundra">
<div id="MyMapDiv" class="MapClass"></div>
</body>
</html>
运行查看效果
成功了
2. 要素服务
FeatureLayer(要素图层)是在ArcGIS 10.0的时候增加的,是一种特殊的GraphicsLayer,它继承GraphicsLayer,用来对服务图层中的要素服务进行显示,同时还提供了支持表达式过滤,要素的关联查询以及在线编辑等功能。
在ArcGIS API for Javascript中提供了针对要素服务的图层-FeatureLayer,FeatureLayer有很多属性和方法,用于对要素服务实现查询,渲染,编辑等操作。通过设置FeatureLayer的setDefinitionExpression属性,还可以实现对数据的过滤。
要素图层有不同的查询显示模式:快照模式,选择模式,按需模式。还有自动模式esri.layers.FeatureLayer.MODE_AUTO
l 快照模式:就是将地图范围内的数据一次加载进来,当再次移动地图,范围改变的时候,不再向服务器请求; esri.layers.FeatureLayer.MODE_SNAPSHOT
l 选择模式:需要进行一个选择的操作,用矩形选择工具选择一个范围,就可以看到这个范围的要素已经加载进来了,这个选择与查询可是有区别的。esri.layers.FeatureLayer.MODE_SELECTION
l 按需模式:指的是随着地图范围的改变要素才加载,按照所需的地图范围向服务器请求所要显示的要素。esri.layers.FeatureLayer.MODE_ONDEMAND
注意这里不仅需要引入esri map,还需要引入featurelayer
dojo.require("esri.layers.FeatureLayer");
http:// localhost:6080/arcgis/rest/services/test2/MapServer/52 为发布服务的地址,52表示第53个图层
"spatialReference": { "wkid": '2326'}
Wkid表示Well-known ID ,='2326'表示wgs84坐标系,对照关系可以去esri帮助里找
https://developers.arcgis.com/javascript/jshelp/pcs.html
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>地图-Test-要素服务</title>
<linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"
rel="stylesheet" type="text/css" />
<linkhref="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"
rel="stylesheet" type="text/css" />
<scriptsrc="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>
<style type="text/css"> .MapClass { width:900px; height:600px; border:1px solid #000;}</style>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.addOnLoad(function () {
var startExtent = new esri.geometry.Extent({ "xmin": 798496, "ymin": 790000, "xmax": 872050, "ymax": 850000, "spatialReference": { "wkid": '2326'} });
var MyMap =new esri.Map("MyMapDiv", { extent: startExtent });
//定义显示模式
var ftLayer = {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
FeatureLayer = new esri.layers.FeatureLayer("http:// localhost:6080/arcgis/rest/services/test2/MapServer/52", ftLayer);
FeatureLayer.isVisible = true;
MyMap.addLayer(FeatureLayer);
})
</script>
</head>
<body class="tundra">
<div id="MyMapDiv" class="MapClass"></div>
</body>
</html>
运行查看效果
ArcGIS Server开发教程系列(7)使用ArcGIS API for Javascript-Hello World的更多相关文章
- ArcGIS Server开发教程系列(1) Arcgis server 10.1 的安装
本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...
- ArcGIS Server开发教程系列(2)配置ARCMAP和ARCCatalog发布服务
1. Arc catalog的配置 打开catalog,如图新增刚刚创建的server 1. Use GIS services: 用户身份连接 使用此种连接,可以浏览.使用站点内发布的所有 ...
- ArcGIS Server开发教程系列(3)切片
切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...
- ArcGIS Server开发教程系列(8)ArcGIS API for Javascript-控件(小部件)
1. 鹰眼 OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...
- ArcGIS Server开发教程系列(8)ArcGIS API for Javascript-控件(小部件)(续)纯代码
完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- arcgis engine 开发教程系列
版权声明: <ArcGIS Engine+C#实例开发教程>为3SDN(http://www.3sdn.net)原创教程,版权所有.禁止商业用途转载(如需请联系作者),非商业 ...
- 【ArcGIS Server 开发系列】Flyingis六大系列讲座精品PDF奉献
转自:http://www.cnblogs.com/gispeng/archive/2008/07/24/1250116.html [ArcGIS Server 开发系列]Flyingis六大系列讲座 ...
- C#开发BIMFACE系列6 服务端API之获取文件信息
在<C#开发BIMFACE系列4 服务端API之源上传文件>.<C#开发BIMFACE系列5 服务端API之文件直传>两篇文章中详细介绍了如何将本地文件上传到BIMFACE服务 ...
- C#开发BIMFACE系列4 服务端API之源上传文件
在注册成为BIMFACE的应用开发者后,要能在浏览器里浏览你的模型或者获取你模型内的BIM数据, 首先需要把你的模型文件上传到BIMFACE.根据不同场景,BIMFACE提供了丰富的文件相关的接口. ...
随机推荐
- stl之截取:以一段字符串截取字符串
string dforder = line.substr(0,line.find("\t")).c_str(); 解析: line为传进来的string类型 substr查找第0位 ...
- 浏览器请求页面时Etag和cache的区别
etag:简单的说就是服务器收到客户端的请求后,根据返回的内容计算出来一个etag值,返回给客户端,当客户端下次再请求相同路径的时候会带上之前的etag值,服务器端会根据这次请求应该返回的内容计算出新 ...
- 洛谷P1372 又是毕业季I&&P1414 又是毕业季II[最大公约数]
P1372 又是毕业季I 题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚 ...
- PHP代码重用与函数编写
代码重用与函数编写 1.使用require()和include()函数 这两个函数的作用是将一个文件爱你载入到PHP脚本中,这样就可以直接调用这个文件中的方法.require()和include()几 ...
- python文件读写的学习
文件的读写: file.flush() # 强制刷新 file.readlines() # 将所有的内容生成一个列表,不适合操作大文件 for line in file: # file相当于一个 ...
- CWMP开源代码研究3——ACS介绍
声明:本文涉及的开源程序代码学习和研究,严禁用于商业目的. 如有任何问题,欢迎和我交流.(企鹅号:408797506) 本文介绍自己用过的ACS,其中包括开源版(提供下载包)和商业版(仅提供安装包下载 ...
- 【C#】【Thread】Barrier任务并行
Barrier 是一个对象,它可以在并行操作中的所有任务都达到相应的关卡之前,阻止各个任务继续执行. 如果并行操作是分阶段执行的,并且每一阶段要求各任务之间进行同步,则可以使用该对象. --MSDN ...
- 【转载】WEB前端开发规范文档
本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...
- Android studio2.2 ndk 错误 :format not a string literal and no format arguments!
在Android Studio2.2 进行NDK编程,在对*char 字符串 进行日志输出时,报错: error: format not a string literal and no format ...
- linux-磁盘空间(du-df)
当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du可以查看文件及文件夹的大小. 简要介 ...