ArcGIS API For JavaScript（三）QueryTask&IdentifyTask实现空间查询

ArcGIS API For JavaScript（三）QueryTask&IdentifyTask实现空间查询

1、通过QueryTask（）实现空间查询

在地图上画一个多边形，将和多边形相交的要素找出并高亮显示，之后动态添加表格，将要素的名称依次显示在表格中

<!DOCTYPE html>

<head>

<title>Hello World</title>

<style>

#mapDiv {

height: 600px;

width: 900px;

border:1px solid red;

}

</style>

require(["esri/map",

"esri/layers/ArcGISDynamicMapServiceLayer",

"dojo/dom",

"dojo/on",

"esri/tasks/QueryTask",

"esri/toolbars/draw",

"esri/tasks/query",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/graphic",

"dojo/domReady!"],

function (Map, ArcGISDynamicMapServiceLayer,dom, on,

QueryTask, Draw, Query,

SimpleLineSymbol,SimpleFillSymbol,Graphic) {

var map = new Map("mapDiv");

var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/%E5%90%88%E5%B7%A5%E5%A4%A7%E5%B9%B3%E9%9D%A2%E7%AE%80%E5%9B%BE/MapServer");

map.addLayer(layer)

//定义一个绘图工具

var toolBar = new Draw(map);

//给button绑定事件

on(dom.byId("Btn"),"click",function(){

//激活绘图工具，我要绘制一个面图形

toolBar.activate(Draw.POLYGON);

})

on(toolBar, "draw-complete", function (result) {

//获得绘图得到的面

var geometry=result.geometry;

//关闭绘图工具

toolBar.deactivate();

queryGraphic(geometry);

});

function queryGraphic(geometry) {

//创建查询对象，注意：服务的后面有一个编号，代表对那一个图层进行查询

var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/%E5%90%88%E5%B7%A5%E5%A4%A7%E5%B9%B3%E9%9D%A2%E7%AE%80%E5%9B%BE/MapServer/4");

//创建查询参数对象

var query = new Query();

//空间查询的几何对象

query.geometry = geometry;

//服务器给我们返回的字段信息，*代表返回所有字段

query.outFields = ["*"];

//空间参考信息

query.outSpatialReference = map.spatialReference;

//查询的标准，此处代表和geometry相交的图形都要返回

query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;

//是否返回几何信息

query.returnGeometry = true;

//执行空间查询

queryTask.execute(query, showQueryResult);

}

function showQueryResult(queryResult) {

//创建线符号

var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 2);

//创建面符号

var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new dojo.Color([0,200,50]));

if (queryResult.features.length == 0) {

dom.byId("divShowResult").innerHTML = "查询结果为空！";

return;

}

var htmls = "";

if (queryResult.features.length >= 1) {

htmls = htmls + "<table style=\"width: 900px\">"; //创建一个表，其中使用了转义字符

htmls = htmls + "<tr><td>名称</td></tr>"; //创建数据行

for (var i = 0; i < queryResult.features.length; i++) {

//得到graphic

var graphic = queryResult.features[i];

//给图形赋予符号

graphic.setSymbol(fill);

//添加到地图从而实现高亮效果

map.graphics.add(graphic);

//获得教学楼的名称信息，此处应和shp的属性表对应

var ptName = graphic.attributes["地物名称"];

if (i % 2 == 0) //设置奇偶间隔底色

htmls = htmls + "<tr bgcolor=\"#a0b0c0\">";

else

htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";

htmls = htmls + "<td><a href=\"#\">" + ptName + "</a></td>";

htmls = htmls + "</tr>";

}

htmls = htmls + "</table>";

//将教学楼的名称信息和divShowResult绑定

dom.byId("divShowResult").innerHTML = htmls;

}

});

</script>

</head>

</body>

</html>

执行流程

结果显示

2、利用IdentifyTask（）实现空间查询

在地图上画一个多边形，设置需要查询的多个图层，将和多边形相交的要素找出并高亮显示，之后动态添加表格，将要素所在的图层和名称依次显示在表格中

<!DOCTYPE html>

<head>

<title>Hello World</title>

<style>

#mapDiv {

height: 600px;

width: 900px;

border:1px solid red;

}

</style>

require(["esri/map",

"esri/layers/ArcGISDynamicMapServiceLayer",

"dojo/on",

"dojo/dom",

"esri/tasks/IdentifyTask",

"esri/tasks/IdentifyParameters",

"esri/toolbars/draw",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/graphic",

"dojo/domReady!"],

function (Map,

ArcGISDynamicMapServiceLayer,

on,

dom,

IdentifyTask,

IdentifyParameters,

Draw,

SimpleFillSymbol,

SimpleLineSymbol,

Graphic

) {

var map = new Map("mapDiv");

//地图服务的url

var MapServer = "http://localhost:6080/arcgis/rest/services/%E5%90%88%E5%B7%A5%E5%A4%A7%E5%B9%B3%E9%9D%A2%E7%AE%80%E5%9B%BE/MapServer";

//定义一个动态地图服务

var layer = new ArcGISDynamicMapServiceLayer(MapServer);

map.addLayer(layer)

//定义绘图对象

var toolBar = new Draw(map);

//绑定点击事件

on(dom.byId("Btn"),"click",function(e){

//激活绘图工具：绘制面

toolBar.activate(esri.toolbars.Draw.POLYGON);

})

//给绘图工具绑定绘图完成事件

on(toolBar, "draw-complete", function (result)

{

//获得绘图得到的面

var geometry=result.geometry;

//关闭绘图工具

toolBar.deactivate();

//执行空间查询

identifyQuery(geometry);

});

function identifyQuery(geometry) {

//定义空间查询对象，注意他的参数是整个地图服务，而不是单个图层

var identifyTask = new IdentifyTask(MapServer);

//定义空间查询参数对象

var params = new IdentifyParameters();

//容差

params.tolerance = 5;

//是否返回几何信息

params.returnGeometry = true;

//空间查询的图层，此时是两个图层

params.layerIds = [3,4];

//空间查询的条件

params.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

params.width = map.width;

params.height = map.height;

//空间查询的几何对象

params.geometry = geometry;

params.mapExtent = map.extent;

//执行空间查询

identifyTask.execute(params,showQueryResult);

}

//通过此函数处理查询之后的信息

function showQueryResult(idResults) {

//创建线符号

var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 2);

//创建面符号

var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new dojo.Color([0,200,50]));

if (idResults.length > 0) {

var htmls = "<table style=\"width: 900px\">";

htmls = htmls + "<tr bgcolor=\"#E0E0E0\"><td> 图层 </td><td> 名称</td></tr>";

for (var i = 0; i < idResults.length; i++) {

var result = idResults[i];

//获得图形graphic

var graphic = result.feature;

//设置图形的符号

graphic.setSymbol(fill);

//获得教学楼和道路的名称信息

var namevalue;

if(result.layerName == "面") //如果是面图层，则提取地物名称字段

namevalue = result.feature.attributes.地物名称;

else //否则提取道路名称字段

namevalue = result.feature.attributes.道路名称;

if (i % 2 == 1) {

htmls = htmls + "<tr bgcolor=\"#E0E0E0\"><td>" +

result.layerName + "</td><td>" + namevalue + "</td></tr>";

}

else {

htmls = htmls + "<tr><td>" + result.layerName + "</td><td>"

+ namevalue + "</td></tr>";

}

map.graphics.add(graphic);

}

htmls = htmls + "</table>";

document.getElementById("divShowResult").innerHTML = htmls;

}

else {

document.getElementById("divShowResult").innerHTML = "";

}

});

</script>

</head>

</body>

</html>

结果显示

地理信息科学

Writed By NX

QQ:1051926720

ArcGIS API For JavaScript（三）QueryTask&IdentifyTask实现空间查询

猜你喜欢