圖層要素QueryTask、FindTask查詢
一. QueryTask查詢
注意：只能查詢單個圖層。
QueryTask進行查詢的地圖服務並不必項加載到Map中進行顯示。QueryTask的執行需要兩個先決條件：一個是需要查詢的圖層URL、一個是進行查詢的過濾條件。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>title</title>
@*加載高德地圖*@
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
</script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/init.js"></script>
<link href="~/Content/esri.css" rel="stylesheet" />
<link href="~/Content/tundra.css" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}
html, body, #map {
width: 100%;
height: 100%;
position: absolute;
}
.list {
width: 12%;
background-color: rgba(22, 59, 90, 0.8);
color: #fff;
position: absolute;
}
select {
width: 90%;
margin: 10px 5%;
border-radius: 5px;
height: 26px;
}
</style>
<script>
var map;
//總圖層
var urlMap = 'http://xxxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer'
//圖層要素圖層
var ServiceAreaLine = 'http://xxxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer/5'
require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer"],
function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer) {
/* code goes here */
map = new Map("map", {
center: [120.075892, 31.526844],
zoom: 7,//縮放等級
logo: false, //logo
slider: false, //縮小按鈕
});
var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
var baselayer1 = new gaodeLayer();//默認加載矢量 new gaodeLayer({layertype:"road"});也可以
var baselayer2 = new gaodeLayer({layertype: "label"});//加載標註圖
var baselayer3 = new gaodeLayer({ layertype: "st" });//加載衛星圖
map.addLayer(baselayer1);//添加高德地圖到map容器
map.addLayer(serverLayer);
});
</script>
</head>
<body>
<div id="map"></div>
<div class="list">
<select id="serviceArea_Select" onchange="changeServiceArea()"></select>
</div>
</body>
</html>
<script>
//將圖層要素去重放入serviceArea_Select選擇框中
window.onload = function () {
var queryTask = new esri.tasks.QueryTask(ServiceAreaLine);//查詢的圖層URL
var query = new esri.tasks.Query();
query.where = ("FID < 40000");//查詢的過濾條件
query.returnGeometry = true;
query.outFields = ["*"];
queryTask.execute(query, add_serviceArea);
}
function add_serviceArea(result) {
console.log(result)
var temp = [];
var innerHtml = "";
var features = result.features;
for (var i = 0; i < features.length; i++) {
//數據去重
if (temp.indexOf(features[i].attributes.名稱) == -1) {
temp.push(features[i].attributes.名稱)
innerHtml += '<option>' + features[i].attributes.名稱 + '</option>'
}
}
document.getElementById('serviceArea_Select').innerHTML = '<option>---請選擇---</option>' + innerHtml;
}
//根據選擇的圖層要素進行查詢定位
function changeServiceArea() {
map.graphics.clear();
var serverce_area = $('#serviceArea_Select option:selected').val();
var queryTask = new esri.tasks.QueryTask(ServiceAreaLine);//查詢的圖層URL
var query = new esri.tasks.Query();
query.where = ("名稱 = '" + serverce_area + "'");//查詢的過濾條件
query.returnGeometry = true;
query.outFields = ["*"];
queryTask.execute(query, centerServiceArea);
}
function centerServiceArea(featureSet) {
var features = featureSet.features;
for (var i = 0; i < features.length; i++) {
var graphic = features[i];
var pointX = graphic.attributes.Lng;
var pointY = graphic.attributes.Lat;
//根據要素的類型，進行設置樣式
switch (graphic.geometry.type) {
case "point":
var point = new esri.geometry.Point(pointX, pointY);
var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25);
var marker2 = new esri.Graphic(point, labelSymbol);
map.graphics.add(marker2);
break;
case "polyline":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 152, 255]), 5);
break;
case "polygon":
var 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]));
break;
}
//設置顯示樣式
graphic.setSymbol(symbol);
//在地圖中展示
map.graphics.add(graphic);
}
var sGeometry = graphic.geometry;
//根據要素類型縮放至地圖
if (sGeometry.type == "point") {
//var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
//sGrapphic.setSymbol(hsymbol);
var cPoint = new esri.geometry.Point();
cPoint.x = sGeometry.x;
cPoint.y = sGeometry.y;
map.centerAt(cPoint);
}
else {
var sExtent = sGeometry.getExtent();
map.setExtent(sExtent);
}
}
</script>
二. FindTask查詢
注意：可查詢單圖層和跨圖層數據，輸入查詢的圖層Layers；查詢的字段名字Search Fields，查詢的條件 Search Text，可以查詢非唯一的數據。
FindTask的url屬性需要指向所查詢的地圖服務的REST URL，而不像QueryTask需要指定子圖層的URL。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>高速信息</title>
@*加載高德地圖*@
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
</script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/init.js"></script>
<link href="~/Content/esri.css" rel="stylesheet" />
<link href="~/Content/tundra.css" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}
html, body, #map {
width: 100%;
height: 100%;
position: absolute;
}
.list {
width: 12%;
background-color: rgba(22, 59, 90, 0.8);
color: #fff;
position: absolute;
}
input,button,select {
width: 90%;
margin: 10px 5%;
border-radius: 5px;
height: 26px;
}
</style>
<script>
var map;
var findTask, findParams, findParams2;
//總圖層
var urlMap = 'http://xxxxx:6080/arcgis/rest/services//%E9%95%BF%E4%B8%89%E8%A7%92%E5%8C%BA%E5%9F%9F%E4%B8%80%E4%BD%93%E5%8C%9620200604/MapServer'
require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters"],
function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, FindTask, FindParameters) {
/* code goes here */
map = new Map("map", {
center: [120.075892, 31.526844],
zoom: 7,//縮放等級
logo: false, //logo
slider: false, //縮小按鈕
});
var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
var baselayer1 = new gaodeLayer();//默認加載矢量 new gaodeLayer({layertype:"road"});也可以
var baselayer2 = new gaodeLayer({layertype: "label"});//加載標註圖
var baselayer3 = new gaodeLayer({ layertype: "st" });//加載衛星圖
map.addLayer(baselayer1);//添加高德地圖到map容器
map.addLayer(serverLayer);
//實例化FindTask（輸入查詢的圖層Layers）
findTask = new FindTask(urlMap);
//FindTask的參數
findParams = new FindParameters();
findParams2 = new FindParameters();
//返回Geometry
findParams.returnGeometry = true;
findParams2.returnGeometry = true;
//查詢的圖層id(1：站點圖層)
findParams.layerIds = [2,3,4,5];
findParams2.layerIds = [0,1];
//查詢的字段名字Search Fields
findParams.searchFields = ["省名稱","名稱"];
findParams2.searchFields = ["名稱"];
});
</script>
</head>
<body>
<div id="map"></div>
<div class="list">
<input id="inputText" type="text" />
<button id="btn" onclick="execute(dojo.byId('inputText').value);">站點搜索</button>
<select id="serviceArea_Select" onchange="changeServiceArea()"></select>
</div>
</body>
</html>
<script>
//findTask查詢數據
function execute(inputText) {
//inputText爲搜索框的內容
findParams.searchText = inputText;
//執行
findTask.execute(findParams, add_serviceArea);
}
function add_serviceArea(result) {
console.log(result)
var temp = [];
var innerHtml = "";
for (var i = 0; i < result.length; i++) {
var feature = result[i].feature
//添加到graphics進行高亮顯示
map.graphics.add(feature);;
//數據去重
if (temp.indexOf(feature.attributes.名稱) == -1) {
temp.push(feature.attributes.名稱)
innerHtml += '<option>' + feature.attributes.名稱 + '</option>'
}
}
console.log(innerHtml)
document.getElementById('serviceArea_Select').innerHTML = '<option>---請選擇---</option>' + innerHtml;
}
//根據選擇的圖層要素進行查詢定位
function changeServiceArea() {
map.graphics.clear();
var serverce_area = $('#serviceArea_Select option:selected').val();
//查詢條件
findParams.searchText = serverce_area;
//執行
findTask.execute(findParams, centerServiceArea);
}
function centerServiceArea(featureSet) {
for (var i = 0; i < featureSet.length; i++) {
var graphic = featureSet[i].feature;
var pointX = graphic.attributes.Lng;
var pointY = graphic.attributes.Lat;
//根據要素的類型，進行設置樣式
switch (graphic.geometry.type) {
case "point":
var point = new esri.geometry.Point(pointX, pointY);
var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25);
var marker2 = new esri.Graphic(point, labelSymbol);
map.graphics.add(marker2);
break;
case "polyline":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 152, 255]), 5);
break;
case "polygon":
var 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]));
break;
}
//設置顯示樣式
graphic.setSymbol(symbol);
//在地圖中展示
map.graphics.add(graphic);
}
var sGeometry = graphic.geometry;
//根據要素類型縮放至地圖
if (sGeometry.type == "point") {
//var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
//sGrapphic.setSymbol(hsymbol);
var cPoint = new esri.geometry.Point();
cPoint.x = sGeometry.x;
cPoint.y = sGeometry.y;
map.centerAt(cPoint);
}
else {
var sExtent = sGeometry.getExtent();
map.setExtent(sExtent);
}
}
</script>