ArcGIS API for Js 之 QueryTask详解
实现功能说明
- 明白Query和QueryTask之间的关系
- 实现发布图层属性信息的相关查询
- 结合3D符号和信息模板弹出进行相关可视化展示
- dojo/_base/array的相关机制
实现的相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[Query Task - 4.3]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the tasks-query sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/tasks-query/index.html
-->
<title>Query Task - 4.3</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
z-index: 23;
position: absolute;
top: 0px;
right: 0px;
padding: 0px 0px 0px 10px;
border-bottom-left-radius: 5px;
max-width: 350px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/symbols/PointSymbol3D",
"esri/symbols/ObjectSymbol3DLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(
Map, SceneView, GraphicsLayer, PointSymbol3D, ObjectSymbol3DLayer,
QueryTask, Query, arrayUtils, dom, on
) {
// URL to feature service containing points representing the 50
// most prominent peaks in the U.S.
var peaksUrl =
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
// Define the popup content for each result
var popupTemplate = { // autocasts as new PopupTemplate()
title: "{MTN_PEAK}, {STATE}",
fieldInfos: [{
fieldName: "ELEV_ft",
label: "Elevation (feet)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "ELEV_m",
label: "Elevation (meters)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "PROMINENCE_ft",
label: "Prominence (feet)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "PROMINENCE_m",
label: "Prominence (meters)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "ISOLATION_mi",
label: "Isolation (miles)",
format: {
places: 0,
digitSeperator: true
}
}, {
fieldName: "ISOLATION_km",
label: "Isolation (km)",
format: {
places: 0,
digitSeperator: true
}
}],
content: "<b><a href='https://en.wikipedia.org/wiki/Topographic_prominence'>Prominence:</a>" +
"</b> {PROMINENCE_ft} ft ({PROMINENCE_m} m)" +
"<br><b>Prominence Rank:</b> {RANK}" +
"<br><b>Elevation:</b> {ELEV_ft} ft ({ELEV_m} m)" +
"<br><b><a href='https://en.wikipedia.org/wiki/Topographic_isolation'>Isolation:</a>" +
"</b> {ISOLATION_mi} mi ({ISOLATION_km} km)"
};
var mtnSymbol = new PointSymbol3D({
symbolLayers: [new ObjectSymbol3DLayer({
resource: {
primitive: "cone"
}
})]
});
// Create graphics layer and symbol to use for displaying the results of query
var resultsLyr = new GraphicsLayer();
/*****************************************************************
* Point QueryTask to URL of feature service
*****************************************************************/
var qTask = new QueryTask({
url: peaksUrl
});
/******************************************************************
* Set the query parameters to always return geometry and all fields.
* Returning geometry allows us to display results on the map/view
******************************************************************/
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: "osm",
layers: [resultsLyr] // add graphics layer to the map
});
var view = new SceneView({
map: map,
container: "viewDiv",
center: [-100, 38],
zoom: 4
});
var attributeName = dom.byId("attSelect");
var expressionSign = dom.byId("signSelect");
var value = dom.byId("valSelect");
// Executes each time the button is clicked
function doQuery() {
// Clear the results from a previous query
resultsLyr.removeAll();
/*********************************************
*
* Set the where clause for the query. This can be any valid SQL expression.
* In this case the inputs from the three drop down menus are used to build
* the query. For example, if "Elevation", "is greater than", and "10,000 ft"
* are selected, then the following SQL where clause is built here:
*
* params.where = "ELEV_ft > 10000";
*
* ELEV_ft is the field name for Elevation and is assigned to the value of the
* select option in the HTML below. Other operators such as AND, OR, LIKE, etc
* may also be used here.
*
**********************************************/
params.where = attributeName.value + expressionSign.value + value.value;
// executes the query and calls getResults() once the promise is resolved
// promiseRejected() is called if the promise is rejected
qTask.execute(params)
.then(getResults)
.otherwise(promiseRejected);
}
// Called each time the promise is resolved
function getResults(response) {
console.log(response.features);
// Loop through each of the results and assign a symbol and PopupTemplate
// to each so they may be visualized on the map
var peakResults = arrayUtils.map(response.features, function(
feature) {
// Sets the symbol of each resulting feature to a cone with a
// fixed color and width. The height is based on the mountain's elevation
feature.symbol = new PointSymbol3D({
symbolLayers: [new ObjectSymbol3DLayer({
material: {
color: "green"
},
resource: {
primitive: "cone"
},
width: 100000,
height: feature.attributes.ELEV_m * 100
})]
});
feature.popupTemplate = popupTemplate;
//feature is an object
return feature;
});
resultsLyr.addMany(peakResults);
// animate to the results after they are added to the map
view.goTo(peakResults);
// print the number of results returned to the user
dom.byId("printResults").innerHTML = peakResults.length +
" results found!";
}
// Called each time the promise is rejected
function promiseRejected(err) {
console.error("Promise rejected: ", err.message);
}
// Call doQuery() each time the button is clicked
on(dom.byId("doBtn"), "click", doQuery);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="optionsDiv">
<h2>Prominent Peaks in the U.S.</h2>
<select id="attSelect">
<option value="ELEV_ft">Elevation</option>
<option value="PROMINENCE_ft" selected>Prominence</option>
</select>
<select id="signSelect">
<option value=">">is greater than</option>
<option value="<">is less than</option>
<option value="=">is equal to</option>
</select>
<select id="valSelect">
<option value="1000">1,000 ft</option>
<option value="5000">5,000 ft</option>
<option value="10000">10,000 ft</option>
<option value="15000">15,000 ft</option>
<option value="20000">20,000 ft</option>
<option value="PROMINENCE_ft">Prominence</option>
</select>
<br>
<br>
<button id="doBtn">Do Query</button>
<br>
<p><span id="printResults"></span></p>
</div>
</body>
</html>
需要注意的是
- 3D符号的建立。怎么说呢,Esri很套路的告诉我们所需要的符号还给我们扩展,很官方的夸赞是让编程更加的简单。详细了解还是得看API 还有和你们分享一个生成符号的示例吧。
2.注意Query和QueryTask的关系和区别分别都有什么参数,如何调用。Query相当于是SQL语句啊,QueryTask就是Query执行环境,以及返回结果的通道。我是简单的来说的,具体详细的还是得看API。
3.注意发布的图层,首先搞清楚图层中存在什么属性,目标要查询什么属性,明白后就很简单的调用了。
- 值得一提的就是dojo/_base/array的map方法吧:
还有相关的原型,这是有关原生JS的,看还是挺有帮助的。
实现的效果
如果读者有兴趣,还可以东西更多
- 自定义样式,自我形象打扮由自己决定
- 自己再玩玩其它属性啦,什么的。
- 简单点讲,API玩不好,就是你被玩,玩好了,就是你玩它。
优雅的玩技术
在GIS的沙场,传播有价值的东西!