ArcGIS API for Js 之 QueryTask详解
ArcGIS API for Js 之 QueryTask详解
实现功能说明
- 明白Query和QueryTask之间的关系
- 实现发布图层属性信息的相关查询
- 结合3D符号和信息模板弹出进行相关可视化展示
- dojo/_base/array的相关机制
实现的相关代码
<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]">
<title>Query Task - 4.3title>
<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: "Prominence:" +
" {PROMINENCE_ft} ft ({PROMINENCE_m} m)" +
"
Prominence Rank: {RANK}" +
"
Elevation: {ELEV_ft} ft ({ELEV_m} m)" +
"
Isolation:" +
" {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">Elevationoption>
<option value="PROMINENCE_ft" selected>Prominenceoption>
select>
<select id="signSelect">
<option value=">">is greater thanoption>
<option value="<">is less thanoption>
<option value="=">is equal tooption>
select>
<select id="valSelect">
<option value="1000">1,000 ftoption>
<option value="5000">5,000 ftoption>
<option value="10000">10,000 ftoption>
<option value="15000">15,000 ftoption>
<option value="20000">20,000 ftoption>
<option value="PROMINENCE_ft">Prominenceoption>
select>
<br>
<br>
<button id="doBtn">Do Querybutton>
<br>
<p><span id="printResults">span>p>
div>
body>
html>需要注意的是
- 3D符号的建立。怎么说呢，Esri很套路的告诉我们所需要的符号还给我们扩展，很官方的夸赞是让编程更加的简单。详细了解还是得看API 还有和你们分享一个生成符号的示例吧。
[干货] https://developers.arcgis.com/javascript/latest/sample-code/playground/live/index.html#/config=symbols/3d/PointSymbol3D.json)
2.注意Query和QueryTask的关系和区别分别都有什么参数，如何调用。Query相当于是SQL语句啊，QueryTask就是Query执行环境，以及返回结果的通道。我是简单的来说的，具体详细的还是得看API。
3.注意发布的图层，首先搞清楚图层中存在什么属性，目标要查询什么属性，明白后就很简单的调用了。
- 值得一提的就是dojo/_base/array的map方法吧:
还有相关的原型，这是有关原生JS的，看还是挺有帮助的。
实现的效果
如果读者有兴趣，还可以东西更多
- 自定义样式，自我形象打扮由自己决定
- 自己再玩玩其它属性啦，什么的。
- 简单点讲,API玩不好，就是你被玩，玩好了，就是你玩它。
优雅的玩技术
在GIS的沙场，传播有价值的东西!