ArcGIS API For JavaScript（三）QueryTask&IdentifyTask實現空間查詢
ArcGIS API For JavaScript（三）QueryTask&IdentifyTask實現空間查詢
1、通過QueryTask（）實現空間查詢
在地圖上畫一個多邊形，將和多邊形相交的要素找出並高亮顯示，之後動態新增表格，將要素的名稱依次顯示在表格中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<script src="http://js.arcgis.com/3.9/"></script>
<style>
#mapDiv {
height: 600px;
width
border:1px solid red;
}
</style>
<script>
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 class="tundra">
<div id="mapDiv" class="MapClass"></div>
<input type="button" value="空間查詢" id="Btn"/>
<div id="divShowResult"></div>
</body>
</html>
執行流程
結果顯示
2、利用IdentifyTask（）實現空間查詢
在地圖上畫一個多邊形，設定需要查詢的多個圖層，將和多邊形相交的要素找出並高亮顯示，之後動態新增表格，將要素所在的圖層和名稱依次顯示在表格中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<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 src="http://js.arcgis.com/3.9/"></script>
<style>
#mapDiv {
height: 600px;
width: 900px;
border:1px solid red;
}
</style>
<script>
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 class="tundra">
<div id="mapDiv" class="MapClass"></div>
<input type="button" value="空間查詢" id="Btn"/>
<div id="divShowResult"></div>
</body>
</html>
結果顯示
地理資訊科學
Writed By NX
QQ:1051926720