arcgis js api 4.9 -query
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>QueryTask - 4.9</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 10px;
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="http://localhost:8080/arcgis_js_api/library/4.9/esri/css/main.css">
<script src="http://localhost:8080/arcgis_js_api/library/4.9/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
], function(
Map, SceneView, GraphicsLayer,
QueryTask, Query
) {
// 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 = {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "object", // autocasts as new ObjectSymbol3DLayer()
resource: {
primitive: "cone"
}
}]
};
// Create graphics layer and symbol to use for displaying the results of query
var resultsLayer = new GraphicsLayer();
var qTask = new QueryTask({
url: peaksUrl
});
//设置查询的参数并返回几何和所以字段，返回的几何能使我们在地图上展示结果
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: "osm",
layers: [resultsLayer] // add graphics layer to the map
});
var view = new SceneView({
map: map,
container: "viewDiv",
center: [-100, 38],
zoom: 4,
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
//每次按钮被点击调用doQuery()
view.when(function() {
view.ui.add("optionsDiv", "bottom-right");
document.getElementById("doBtn").addEventListener("click",
doQuery);
});
var attributeName = document.getElementById("attSelect");
var expressionSign = document.getElementById("signSelect");
var value = document.getElementById("valSelect");
//当按钮被点击时执行
function doQuery() {
//清楚之前的查询结果
resultsLayer.removeAll();
// 设置查询的WHERE子句。这可以是任何有效的SQL表达式。
// 在这种情况下从三个下拉菜单中输入来构建查询。比如，如果选择了"Elevation", "is greater than", and "10,000 ft"，
params.where = attributeName.value + expressionSign.value + value.value;
//当promise成功时，执行查询并回调getResults()函数
//如果promise是失败的 promiseRejected()被调用
qTask.execute(params)
.then(getResults)
.catch(promiseRejected);
}
//当promise完成调用
function getResults(response) {
//遍历每次结果并分配symbol和PopupTemplate以便他们可以可视化在地图上。
var peakResults = response.features.map(function(
feature) {
//设置每个结果要素的样式
feature.symbol = {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "object", // autocasts as new ObjectSymbol3DLayer()
material: {
color: "green"
},
resource: {
primitive: "cone"
},
width: 100000,
height: feature.attributes.ELEV_m * 100
}]
};
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.addMany(peakResults);
//当他们被加入到地图上来动画结果
view.goTo(peakResults).then(function() {
view.popup.open({
features: peakResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
});
//打印返回给用户的结果的数量
document.getElementById("printResults").innerHTML = peakResults.length +
" results found!";
}
//promise失败时候每次调用
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>Prominent Peaks in the U.S.</h2>
<select class="esri-widget" id="attSelect">
<option value="ELEV_ft">Elevation</option>
<option value="PROMINENCE_ft" selected>Prominence</option>
</select>
<select class="esri-widget" id="signSelect">
<option value=">">is greater than</option>
<option value="<">is less than</option>
<option value="=">is equal to</option>
</select>
<select class="esri-widget" 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>
</select>
<br>
<br>
<button class="esri-widget" id="doBtn">Do Query</button>
<br>
<p><span id="printResults"></span></p>
</div>
</body>
</html>
转载自：https://blog.csdn.net/xlp789/article/details/86622841
