Select to view content in your preferred language

Displaying statistics on querying by geometry

207
1
06-14-2024 03:36 AM
wizgis
by
Occasional Contributor II

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.

 

 

0 Kudos
1 Reply
UndralBatsukh
Esri Regular Contributor

The sample shows how to do the stats query, namely the queryStatistics function.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=layers-scenelayerview-qu...

0 Kudos