Arcgis for js之GP实现缓冲区计算
GP服务的存在使得在Web端使用ArcGIS 提供的空间分析，而这些分析的能力是和桌面中的一样的。因此，是Arcgis for js的一个重点，也是一个难点。因此，在本文讲述如何发布并在代码中调用GP服务，实现缓冲区的分析计算。
模型参数：
Parameters:
Parameter: input
Data Type: GPFeatureRecordSetLayer
Display Name input
Description: input buffer
Direction: esriGPParameterDirectionInput
Default Value:
Geometry Type: esriGeometryPoint
HasZ: false
HasM: false
Spatial Reference: 4326
FID ( type: esriFieldTypeOID , alias: FID )
name ( type: esriFieldTypeString , alias: name , length: 100 )
id ( type: esriFieldTypeDouble , alias: id )
Features: None.
Parameter Type: esriGPParameterTypeRequired
Parameter: output
Data Type: GPFeatureRecordSetLayer
Display Name output
Description: ouput feature
Direction: esriGPParameterDirectionOutput
Default Value:
Geometry Type: esriGeometryPolygon
HasZ: false
HasM: false
Spatial Reference: 4326
FID ( type: esriFieldTypeOID , alias: FID )
name ( type: esriFieldTypeString , alias: name , length: 100 )
id ( type: esriFieldTypeDouble , alias: id )
BUFF_DIST ( type: esriFieldTypeDouble , alias: BUFF_DIST )
Shape_Length ( type: esriFieldTypeDouble , alias: Shape_Length )
Shape_Area ( type: esriFieldTypeDouble , alias: Shape_Area )
Features: None.
Parameter Type: esriGPParameterTypeRequired
Parameter: Distance__value_or_field_
Data Type: GPLinearUnit
Display Name Distance
Description: Distance
Direction: esriGPParameterDirectionInput
Default Value: 50.0
(esriKilometers)
Parameter Type: esriGPParameterTypeRequired
模型中有三个参数：1、输入；2、输出；3、缓冲距离单位或者字段。
代码实现：
1、添加绘制工具并定义事件
toolbar = new Draw(map);
dojo.connect(toolbar, 'onDrawEnd', drawEnd);
$(#point).on(click,function(){
map.graphics.clear();
toolbar.activate(esri.toolbars.Draw.POINT);
$(#polyline).on(click,function(){
map.graphics.clear();
toolbar.activate(esri.toolbars.Draw.POLYLINE);
$(#polygon).on(click,function(){
map.graphics.clear();
toolbar.activate(esri.toolbars.Draw.POLYGON);
2、绘制结束后提交计算
* 绘制结束
* @param geometry
function drawEnd(geometry) {
$.messager.prompt('提示信息', '请输入缓冲区范围：', function(dist){
if (dist){
$.messager.progress({
text:计算中，请稍后...
toolbar.deactivate();
var symbol =
if(geometry.type===point){
symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new esri.Color([255,0,0]), 1),
new esri.Color([0,255,0,0.25]));
else if(geometry.type===polyline){
symbol=new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2);
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
var graphic = new esri.Graphic(geometry, symbol);
map.graphics.add(graphic);
tojob(graphic,dist);
function tojob(graphic,distance) {
//第一步构造GP
var gpUrl = 'http://localhost:6080/arcgis/rest/services/buffer/GPServer/buffer';
gp = new esri.tasks.Geoprocessor(gpUrl);
//第二步，构造参数
//我们通过上面，了解到GPFeatureRecordSetLayer对应FeatureSet
var features = [];
features.push(graphic);
var featureset = new esri.tasks.FeatureSet();
featureset.features =
//构造缓冲长度，这里的单位是可以更改的，我使用的是度，简单一些
var Dis = new esri.tasks.LinearUnit();
Dis.distance =
Dis.units = esri.Units.KILOMETERS;
var parms = {
input : featureset,
Distance__value_or_field_ : Dis
//这里函数是异步的，使用函数是submitJob,同步的使用的是execute。
//成功之后，调用jobResult,建议看一下这个参数。
gp.submitJob(parms, jobResult);
3、计算成功将结果绘制出来
* 计算完成
* @param result
function jobResult(result) {
var jobId = result.jobId;
var status = result.jobS
if(status === esri.tasks.JobInfo.STATUS_SUCCEEDED) {
//成功之后，将其中的结果取出来，当然这也是参数名字。
//在模型中，想要取出中间结果，需要设置为模型参数
gp.getResultData(jobId, output, addResults);
function addResults(results){
$.messager.progress('close');
var features = results.value.
if(features.length&0) {
for (var i = 0, length = features. i != ++i) {
var feature = features[i];
var polySymbolRed = new esri.symbol.SimpleFillSymbol();
polySymbolRed.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 0.5]), 1));
polySymbolRed.setColor(new dojo.Color([255, 0, 0, 0.5]));
feature.setSymbol(polySymbolRed);
map.graphics.add(feature);
$.messager.alert(提示,计算成功！);
$.messager.alert(提示,计算失败！);
实现后效果：
点计算成功
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'&&&&ArcGIS for JavaScript 动态标绘燕尾箭头
&ArcGIS for JavaScript 动态标绘燕尾箭头
ArcGIS for JavaScript 动态标绘燕尾箭头，需要放到web服务器上才能看到效果
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：&&&可兑换
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
ArcGIS for JavaScript 动态标绘燕尾箭头
所需积分：10
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
ArcGIS for JavaScript 动态标绘燕尾箭头
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
Map基本操作
ArcGIS API for JavaScript 能够给地图添加不同的图层，包含ArcGIS for Server的地图服务图层，graphics 图层和自定义图层。除此之外使用ArcGIS Online或者Portal for ArcGIS创造一个webmap是一个用来分享包含图层，符号和弹出窗口，文件数据以及其他元数据资源的好方式。
地图提供了许多的方法，属性和事件用来支持图层操作。ArcGIS API for JavaScript 包含一系列的控件用来提升地图高级功能开发，如展示图例，切换地图和HOME键等。
本次课程将学习主要以下方面的内容：
· 地图图层
· 控件的使用
· 地图事件
完成本课程后，你将：
· 特定的场景下，能够指出使用图层类型
· 能够正常的使用地图相关控件
· 能够使用地图和图层事件
给Map添加数据
给地图添加数据通常有如下两种方式：
1. 使用地图服务
2. 使用web map
通常这两种方式不同时使用。
地图服务通常由ArcGIS for Server的站点或者portal（ArcGIS Online或者portal for ArcGIS）提供。服务通过切片或者动态绘制提供优化的地图显示，且提供对要素的搜索和查询。
用户能够登录门户（ArcGIS Online 和Portal for ArcGIS）来创建web map 分享资源。Web map以JSON表示地图信息和相关要素。服务信息，预定义的查询和弹窗和图层信息都能够包含在web map中。通过Map Viewer 能够快速的创建web map。从开发者的角度看，使用web map具有如下好处：
· 能够在门户中快速构建和维护地图
· 减低应用代码量
· 能够使用Web APPBuilder和应用程序模板
给地图添加多个图层的时候，考虑以下几个方面的问题：
· 需要什么样的图层
· 图层该以什么样的顺序显示
· 图层的参考对地图影响
考虑上面三个问题，才能构建一个预期显示效果的地图。
图层选择的标准依赖于数据源类型以及如何使用图层，如下表中列出了四种最常见的图层以及使用的场景。
除了上表列出的数据，API还提供了更多的图层类型来显示KML，GeoRSS，CSV和OGC（WMS/WMTS）和实时连续的流数据。除此之外，还可以为了特定的常见，自定义图层类型。
Map存在图层顺序的数组，越往上面的添加的图层，其索引值越大。通常地图的索引为0。如下图所示。由于Graphics 图层在所有图层的上面，其不在Map图层数组，就是不能够通过map的图层索引获取到Graphics 图层。
地图和图层空间参考
所有的地图服务都具有基于GCS（geographic coordinate system）的空间参考。在代码中，可以通过WKT（well-known text）或者WKID(well-known ID)的形式应用空间参考。如下图的表现形式：
当两个数据集使用不同的空间参考时且要叠加到一起显示时，其中的一个数据集参考必须转换到另一个数据集中。API 尝试自动动态投影变换。当多个图层叠加显示的时候，一定需要注意Map 类对不同空间参考的处理：
· 默认情况下，地图采用第一个添加添加图层的参考。
· 当参考不同时，动态，要素和graphics 图层能够动态的转换参考。但是这会影响图形显示效率。
· 缓存图层不会能够动态的转换
编程实现图层
添加图层一般遵循五个步骤，分别为：
1. 获取服务信息
2. 根据上面的信息决定使用图层类型
3. 添加必要的模块
4. 构造需要使用实例
5. 添加图层到地图中
流程如下图所示：
发现服务细节
第一步是发现服务的必要信息，使用ArcGIS 服务目录去浏览和搜索可用服务，确定服务的以下信息：
1. 服务的REST Url
2. 服务的地理范围
3. 是否cached
4. 服务的空间参考
注：ArcGIS for server的服务目录的url地址如下：
决定图层类型
根据上面的信息决定使用API的那种图层类型来加载和显示。如果其是Cached Service 则使用ArcGISTiledMapServiceLayer，如果不是的话，可以使用ArcGISDynamicMapServiceLayer
不同的图层所依赖的模块是不同的，在require中添加模块如esri/map。参考API Refernce查询特定的模块和对应的别名
通过提供一个服务URL及其他参数来构建实例，如下所示代码：var censusLayerRUL=&&Server url&&
var censuslayerOptions={
&id&: &censusLayer&,
&opacity&:0.5,
&showAttribution&:true
VAr censusLayer=new ArcGISDynamicMapServicesLayer(censusLayerRUL,censuslayerOptions);
mapMain.addLayer(censusLayer);
添加图层到地图
控件的使用
ArcGIS API for JavaScript 采用dojo/dijit提供控件。API中提供支持编辑，地理编码，导航，数据可视化等控件，如下图所示：
这些控件能够方便的在应用程序中使用。可以直接在控件的构造中提供必要的配置信息。控件可包含一个startup()方法，该方法在其绑定的对象初始化后，只需调用一次，如下所示：var mapMain=new Map(&ui-map&,{&mapOptions&});
var toggle=new BaseMapToggle({
map:mapMain,
baseMap:&topo&
},&BaseMap-Toggle&); //div
//strart widget
toggle.startup();
下表中为可能会使用到的控件：
与标准事件onload和onclick类似，API 提供了许多的事件用来确保在适当的时候执行适当的动作。地图类提供了许多的事件，用来与地图进行进行交互。下表为常见的地图控件事件，更多的事件参考API的reference。
当使用异步编程的时候，需要采用正确的事件处理才能保证代码的有序执行。有两点建议：
· 不要在html中插入事件。保证UI和逻辑的分离。
· 使用dojo/on 语法。为了方便和可读，使用object.on()用来对对象实例开启使用或者使用on(dom.byId(“element_name”))语法用来对DOM元素绑定事件。
使用object.on(…) 事件的时候,可以对多个事件添加相同的事件处理函数，如下所示：//给map传递多个字符串
map.on(&pan-end,zoom-end&, function(e){
console.log(&Map Pan or Zoom&,e);
练习2A：给map添加图层
本次练习将学习以下内容：
· 指定地图范围
· 添加透明动态图层
· 添加带图层定义要素图层
· 添加BaseMapToggle 控件
· 添加图例控件
STEP1：新建html页面
在新建的html页面中根据练习1中的内容添加必要的js和css文件以及使用require这种AMD的方式添加必要模块。
STEP2：指定初始范围
本次练习的要求是显示California州，地图的范围通过构造方法的center和zoom参数指定，通常这是指定地图范围的最方便的方式。
当不知道显示区域的范围的时候，可以通过手动缩放到感兴趣区，然后使用上面提到chrome或者firebug的调试方式捕捉extent。在控制台输入dojo.toJson(map.extent.toJson())获取当前的extent。如下图所示：
根据获取的json 形式的extent 去new一个extent对象。然后将
STEP3：添加缓存和动态图层
a. 从的服务目录中获取USA地图服务的rest地址
b. 构造一个ArcGISDynamicMapServiceLayer 实例，并将其赋予变量lyrUSA
c. 给该实例传递服务URL
d. 调用addLayer()方法，并传入lyrUSA作为参数。
e. 运行程序
这个时候已经可以展示图了。根据需要我们设定图层的透明度为50%。在上面的动态图层的构造实例中添加opacity参数
STEP4：添加要素图层
根据数据的需要，需要显示过去七天中地震强大大于2级区域。
a. 的rest服务目录，获取EarthquakesFromLastSevenDays
b. 根据上面的教程，查看服务属性获取地震强度字段
c. 使用require 添加对应模块
d. 构造FeatureLayer实例，并赋值给lyrQuakes
e. 传递图层URL
f. 对lyrQuakes调用setDefinitionExpress()方法
g. 运行程序
STEP5：添加BasemapToggle 控件
通过API提供的BasemapToggle 添加和切换地图。
a. 构造一个BasemapToggle的实例，并赋予变量toggle
b. 指定参数，第一个参数为map，指定basemap为topo，指定第二个参数为放置控件的div “BasemapToggle”。
c. 调用startup()
d. 运行程序
STEP6：添加Legend控件
Legend控件能够显示地图控件中的部分图层，当有图层添加和移除能够自动更新。
a. 将上面步骤中的添加addLayer的两行代码注释掉
b. 添加map.on监控layers-add-result事件，当图层添加完成后，构建Legend实例。
c. 在map.on 事件后调用addLayers()方法，并传递上面两个图层实例组成的数组。
d. 运行程序。
通过本课程，了解到了不通Map能够添加的图层类型，根据具体的数据和业务判断使用具体的图层类型；掌握了控件的使用以及如何添加和处理事件。
1. 根据API帮助，如何使用AMD 模块加载的语法，加载geometry/extent 类?
2. 用来添加USA的地图服务，需要使用到esri/layers 中具体哪个模块？
本教程所有章节链接：
ArcGIS API for JavaScript入门教程_第一章_介绍：
ArcGIS API for JavaScript入门教程_第二章_Map操作：
前辈你好，请问这个教程还有没有后续更新呢 非常期待
你好，可以去上去看看sample什么的。这个教程的话，在工作之余尽最大努力更新完。
你好，请问有视频教程吗？
很不错，谢谢
要回复文章请先或ArcGIS API For Javascript之调用动态地图服务（三）
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2016 |
作者 红领巾 ]
在本篇博客中主要记录一下在ArcGIS API如何调用自己发布的动态地图服务,利用动态地图服务我们可以完成哪一些需求等等。
注： （如何利用ArcGIS Server发布动态地图服务请看博客 ArcGIS Server发布动态地图服务 ） ，
2.调用动态地图服务
在ArcGIS API 中给我们提供了一个类叫做 ArcGISDynamicMapServiceLayer 利用这个类，我们可以获得发布的地图服务。调用动态地图服务一般只需要两步：
通过地图服务的URL创建一个 ArcGISDynamicMapServiceLayer 对象
将动态地图服务的对象添加到地图容器中
代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Hello World&/title&
&link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/&
&link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /&
&script type="text/" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"&&/script&
require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"],
function(Map,ArcGISDynamicMapServiceLayer){
var map = new Map("mapDiv");
//利用url创建一个动态地图服务对象
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
//将地图服务对象添加到地图容器中
map.addLayer(layer);
&body class="tundra"&
&div id="mapDiv" style="width:900 height:600 border:1px solid #000;"&&/div&
点击运行，运行之后如图所示：
在ArcGIS API中与ArcMap不同的是：一个服务图层相当于一组图层的集合（即多个图层）。
在真实开发过程中，动态地图服务可以帮助我们完成很多的功能需求，例如：
根据需求隐藏服务中的某一个图层（动态地图服务可以实现，但是切片地图服务就不能实现）
通过属性查询地图服务中的信息
通过空间查询地图服务中的信息（包括点查询，线查询，面查询等等）
3.1.根据需求隐藏服务中的某一个图层
我们发布的地图服务中有四个图层
在本需求中。我们主要是给页面添加一个按钮，然后将地图服务中的 road2 隐藏
require(["esri/map","dojo/dom","dojo/on","esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"],
function(Map,dom,on,ArcGISDynamicMapServiceLayer){
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
map.addLayer(layer);
//给id为btn的按钮绑定click事件
on(dom.byId("btn"),"click",function()
layer.setVisibleLayers([1,2,3]);
3.1.1代码解释：
此代码功能的实现非常简单，只利用了 setVisibleLayers 方法，告诉服务，我要显示图层编号为 1，2，3 的图层。
在 require 中加载了一个新的模块 dojo/dom 模块，此模块给我们提供了一个方法 dom.byId(id) ,我们可以通过id获得dom对象，类似于 document.getElementById() 方法。
在 require 中加载了一个新的模块 dojo/on 模块，在dojo中 on 是用来绑定事件的, on(target,type,listener) 的第一个参数是给哪一个对象绑定事件，第二个参数是事件的类型，第三个是参数是回调函数。
3.2.通过属性查询地图服务中的信息
在开发过程中，经常有这样的需求：
根据属性查询出我们想要的要素图形，然后将该图形高亮（在本事例中查询教学楼的信息，例如 根据教学楼的名称 将该楼层成高亮）
教学楼图层的属性表信息：
在实现这个功能的时候我们分几步开始考虑：
在网页上新建一个文本框
将文本框中的教学楼名称获取，并创建 属性查询对象
将查询到的楼层信息（几何信息）获取，利用 graphics 高亮显示
3.2.1.代码实现
创建一个文本框
Name:&input class="nm" type="text"&
&input type="button" value="查询"&
将文本框中的教学楼名称获取，并创建 属性查询对象
query("#btn").on("click",function(){
//获得教学楼的名称
var name=query(".nm")[0].
//实例化查询参数
var findParams = new esri.tasks.FindParameters();
findParams.returnGeometry =
findParams.layerIds = [3];
findParams.searchFields = ["name"];
findParams.searchText =
//实例化查询对象
var FindTask = new esri.tasks.FindTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
//进行查询
FindTask.execute(findParams,ShowFindResult)
将查询到的楼层信息（几何信息）获取，利用 graphics 高亮显示
function showFindResult(queryResult)
if (queryResult.length == 0) {
alert("没有该元素");
for (var i = 0; i & queryResult. i++) {
//获得该图形的形状
var graphic = queryResult[i].
var geometry = graphic.
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
查看结果 属性查询前：
属性查询后：
完整代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Hello World&/title&
&link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/&
&link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /&
&script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"&&/script&
require(["esri/map","dojo/query","dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/graphic",
"dojo/domReady!"],
function(Map,query,on,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
map.addLayer(layer);
query("#btn").on("click",function(){
//获得教学楼的名称
var name=query(".nm")[0].
//实例化查询参数
var findParams = new FindParameters();
findParams.returnGeometry =
findParams.layerIds = [3];
findParams.searchFields = ["name"];
findParams.searchText =
//实例化查询对象
var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
//进行查询
findTask.execute(findParams,showFindResult)
function showFindResult(queryResult)
if (queryResult.length == 0) {
alert("没有该元素");
for (var i = 0; i & queryResult. i++) {
//获得该图形的形状
var feature= queryResult[i].
var geometry = feature.
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
&body class="tundra"&
&div id="mapDiv" style="width:900 height:580 border:1px solid #000;"&&/div&
Name:&input class="nm" type="text"&
&input id="btn" type="button" value="查询"&
3.2.2代码解释
FindTask 是Esri提供的一个属性查询的类，他所对应的参数为： FindParameters ， FindTask 只能用于属性查询，不能用于空间查询
FindTask 类中有一个方法叫做 execute , execute 的第一个参数是属性查询的参数，第二个参数是一个回调函数（即是一个异步函数），当服务器返回数据时，此函数才会被触发。
dojo/query 是 dojo 提供的一个DOM选择器，他的功能非常强大，与 JQuery 中的 $ 符一样强大，可以根据id选择 query（"#id"） ,也可以根据类名选择 query（".classname"） ， query 方法还有很多强大的地方，具体可以参考官方文档
query("#btn").on() 是dojo提供给我们第二种绑定事件的方式。
graphic esri提供给我们使用的客户端图层，利用 graphic ，我们可以完成很多操作， graphic 具体的使用，将在 Draw 工具时说明。
3.3通过空间查询地图服务中的信息
相信大家都遇到过这种问题，当我点击地图时，将我点击的图形进行高亮显示，此时就用到了空间查询。为了实现该功能我们可以分为以下几步：
因为要点击地图，所以首先我们给地图绑定点击事件
获得点击的地图坐标(点坐标)，并创建 空间查询参数对象
将教学楼与点相交的楼层查询出来，然后利用 graphic 进行高亮显示
注：此事例查询是 教学楼图层
3.3.1代码实现
给地图绑定点击事件
map.on("click",mapClick);
获得点击的地图坐标(点坐标)，并创建 空间查询参数对象
function mapClick(e){
//获得用户点击的地图坐标
var point=e.mapP
//实例化查询参数
query=new Query();
query.geometry =
query.outFields = ["*"];
query.outSpatialReference = map.spatialR
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
query.returnGeometry =
//实例化查询对象
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer/3");
//进行查询
queryTask.execute(query,showFindResult)
将教学楼与点相交的楼层查询出来，然后利用 graphic 进行高亮显示
function showFindResult(queryResult)
if (queryResult.features == 0) {
alert("没有该元素");
for (var i = 0; i & queryResult.features. i++) {
//获得该图形的形状
var feature = queryResult.features[i];
var geometry = feature.
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
查看结果 鼠标点击前：
鼠标点击后：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Hello World&/title&
&link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/&
&link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /&
&script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"&&/script&
require(["esri/map","dojo/query","dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/graphic",
"dojo/domReady!"],
function(Map,query,on,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
map.addLayer(layer);
map.on("click",mapClick);
function mapClick(e){
//获得用户点击的地图坐标
var point=e.mapP
//实例化查询参数
query=new Query();
query.geometry =
query.outFields = ["*"];
query.outSpatialReference = map.spatialR
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
query.returnGeometry =
//实例化查询对象
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer/3");
//进行查询
queryTask.execute(query,showFindResult)
function showFindResult(queryResult)
if (queryResult.features == 0) {
alert("没有该元素");
for (var i = 0; i & queryResult.features. i++) {
//获得该图形的形状
var feature = queryResult.features[i];
var geometry = feature.
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
&body class="tundra"&
&div id="mapDiv" style="width:900 height:580 border:1px solid #000;"&&/div&
3.3.2代码解释
QueryTask 是esri提供给我们的一个工具类，可用于属性查询，也可用于空间查询， QueryTask 只能作用于地图服务的某一个图层，而不能作用于一整个地图服务（ IdentifyTask 类可作用于一整个地图服务）
Query 类是 QueryTask 参数类，用于设定空间查询的参数。
QueryTask 类中有一个方法叫做 execute , execute 的第一个参数是查询的参数，第二个参数是一个回调函数（即是一个异步函数），当服务器返回数据时，此函数才会被触发
绑定事件之后，在某些情况下也解除事件的绑定，下面提供几种方法解除事件绑定
直接通过事件句柄解除（dojo新版本）
//绑定事件
var handle=map.on("click",mapClick);
//解除事件
handle.remove();
通过老版本的方法解除
//绑定事件
var handle=map.on("click",mapClick);
//解除事件
dojo.disconnect(handle)
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
方向不对，越努力越尴尬！
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net