Hi Community,
I am very new to arcgis maps sdk for javascript library and have been working with samples to teach myself.
I have been referring to the following sample https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayerview-query-stats/ which allows users to draw a polygon, polyline or point geometry which is then used as the spatial geometry parameter in the query and displays statistics of the features that gets selected on drawing.
I am trying to do something similar where the end user can draw a polygon and whatever number of features are inside that polygon, statistics of selected fields should be displayed as numbers (not charts). I have been able to reach a point where end users can draw a polygon and clear the drawings however, am not sure on how to get started with displaying statistics of various fields as shown in the sample.
require(["esri/config", "esri/views/MapView", "esri/WebMap", "esri/layers/GraphicsLayer", "esri/widgets/Sketch/SketchViewModel", "esri/geometry/geometryEngine", "esri/core/promiseUtils"], function(esriConfig, MapView, WebMap, GraphicsLayer, SketchViewModel, geometryEngine, promiseUtils){
esriConfig.apiKey = "**unspecified**"
esriConfig.portalUrl = "**unspecified**"
// Loading Webmap
const webmap = new WebMap({
portalItem: {
id: "274f8781b2634b0abc924a3d3f96df49"
}
})
// Defining View
const view = new MapView({
map: webmap,
center: [92.113523, 27.454524], // Longitude, latitude
zoom: 10, // Zoom level
container: "viewDiv"
})
// Code to create & remove sketch layer as well as loading layer of webmap
const sketchLayer = new GraphicsLayer()
view.map.add(sketchLayer)
//let mapLayer = null;
//let sceneLayerView = null;
let sketchGeometry = null;
const sketchViewModel = new SketchViewModel({
layer: sketchLayer,
view: view,
polygonSymbol: {
type: "simple-fill",
color: "#F2BC94",
outline: {
color: "#722620",
width: 3
}
}
})
sketchViewModel.on(["create"], (event) => {
if (event.state == "complete") {
sketchGeometry = event.graphic.geometry;
}
});
document.getElementById("polygon-geometry-button").onclick = geometryButtonsClickHandler;
function geometryButtonsClickHandler(event) {
const geometryType = event.target.value;
sketchViewModel.create(geometryType);
}
queryDiv.style.display = "block"
view.ui.add([queryDiv], "bottom-left")
view.ui.add([resultDiv], "top-right")
sketchViewModel.on("create", (event) => {
if (event.state === "complete") {
sketchGeometry = event.graphic.geometry;
runQuery();
}
});
// Testing to run query
const debouncedRunQuery = promiseUtils.debounce(() => {
if (!sketchGeometry) {
return;
}
resultDiv.style.display = "block";
return promiseUtils.eachAlways([queryStatistics(), updateMapLayer()]);
});
function runQuery() {
debouncedRunQuery().catch((error) => {
if (error.name === "AbortError") {
return;
}
console.error(error);
});
}
// Code to display statistics of selected features.
// Code to clear the drawings
document.getElementById("clearFilter").addEventListener("click", clearDrawings)
function clearDrawings (){
sketchGeometry = null;
sketchLayer.removeAll();
sketchViewModel.cancel();
clearCharts();
resultDiv.style.display = "none";
}
})
Any tips on how to get started would be really helpful.
The fields that am trying to query are a numeric field.
