Below code i taken from sample code which is available ,in this code i have to customized to show how many numbers of polygons(buildings) are selected in selected area

AnupamSharma — Thu, 11 Jul 2019 06:46:41 GMT

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>SceneLayerView - query statistics by geometry - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

.esri-ui-top-right {
max-height: 100%;
}

#queryDiv,
#resultDiv {
min-width: 250px;
font-size: 14px;
padding: 10px;
display: none;
overflow-y: auto;
overflow-x: hidden;
}

.geometry-options {
display: flex;
flex-direction: row;
}
.geometry-button {
flex: 1;
border-style: solid;
border-width: 1px;
border-image: none;
}
.geometry-button-selected {
background: #4c4c4c;
color: #fff;
}

#bufferNum {
width: 90%;
margin: 2.5em auto 0;
}

.count {
white-space: nowrap;
font-size: 14px;
font-weight: bold;
display: inline-block;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

let sceneLayer = null;
let sceneLayerView = null;
let bufferSize = 0;

// Assign scene layer once webscene is loaded and initialize UI
webscene.load().then(function() {
sceneLayer = webscene.layers.find(function(layer) {
return layer.title === "Helsinki textured buildings";
});
sceneLayer.outFields = ["buildingMaterial", "yearCompleted"];

view.whenLayerView(sceneLayer).then(function(layerView) {
sceneLayerView = layerView;
queryDiv.style.display = "block";
});
});

view.watch("updating", function(updating) {
if (!updating) {
runQuery();
}
});

view.ui.add([queryDiv], "bottom-left");
view.ui.add([resultDiv], "top-right");

// use SketchViewModel to draw polygons that are used as a query
let sketchGeometry = null;
const sketchViewModel = new SketchViewModel({
layer: sketchLayer,
defaultUpdateOptions: {
tool: "reshape",
toggleToolOnClick: false
},
view: view
});

sketchViewModel.on("create", function(event) {
if (event.state === "complete") {
sketchGeometry = event.graphic.geometry;
runQuery();
}
});

sketchViewModel.on("update", function(event) {
if (event.state !== "cancel" && event.graphics.length) {
sketchGeometry = event.graphics[0].geometry;
runQuery();
}
});
// draw geometry buttons - use the selected geometry to sktech
document
.getElementById("point-geometry-button")
.addEventListener("click", geometryButtonsClickHandler);
document
.getElementById("line-geometry-button")
.addEventListener("click", geometryButtonsClickHandler);
document
.getElementById("polygon-geometry-button")
.addEventListener("click", geometryButtonsClickHandler);
function geometryButtonsClickHandler(event) {
const geometryType = event.target.value;
clearGeometry();
sketchViewModel.create(geometryType);
}

// Clear the geometry and set the default renderer
function clearGeometry() {
sketchGeometry = null;
sketchViewModel.cancel();
sketchLayer.removeAll();
bufferLayer.removeAll();
clearHighlighting();
clearCharts();
resultDiv.style.display = "none";
}

// set the geometry query on the visible SceneLayerView
var debouncedRunQuery = promiseUtils.debounce(function() {
if (!sketchGeometry) {
return;
}

resultDiv.style.display = "block";
updateBufferGraphic(bufferSize);
return promiseUtils.eachAlways([
queryStatistics(),
updateSceneLayer()
]);
});

function runQuery() {
debouncedRunQuery().catch((error) => {
if (error.name === "AbortError") {
return;
}

console.error(error);
});
}

// Set the renderer with objectIds
var highlightHandle = null;
function clearHighlighting() {
if (highlightHandle) {
highlightHandle.remove();
highlightHandle = null;
}
}

function highlightBuildings(objectIds) {
// Remove any previous highlighting
clearHighlighting();
const objectIdField = sceneLayer.objectIdField;
document.getElementById("count").innerHTML = objectIds.length;

highlightHandle = sceneLayerView.highlight(objectIds);
}

// update the graphic with buffer
function updateBufferGraphic(buffer) {
// add a polygon graphic for the buffer
if (buffer > 0) {
var bufferGeometry = geometryEngine.geodesicBuffer(
sketchGeometry,
buffer,
"meters"
);
if (bufferLayer.graphics.length === 0) {
bufferLayer.add(
new Graphic({
geometry: bufferGeometry,
symbol: sketchViewModel.polygonSymbol
})
);
} else {
bufferLayer.graphics.getItemAt(0).geometry = bufferGeometry;
}
} else {
bufferLayer.removeAll();
}
}

function updateSceneLayer() {
const query = sceneLayerView.createQuery();
query.geometry = sketchGeometry;
query.distance = bufferSize;
return sceneLayerView.queryObjectIds(query).then(highlightBuildings);
}

var yearChart = null;
var materialChart = null;

return sceneLayerView.queryFeatures(query).then(function(result) {
const allStats = result.features[0].attributes;
updateChart(materialChart, [
allStats.material_concrete,
allStats.material_brick,
allStats.material_wood,
allStats.material_steel,
allStats.material_other
]);
updateChart(yearChart, [
allStats.year_1850,
allStats.year_1900,
allStats.year_1925,
allStats.year_1950,
allStats.year_1975,
allStats.year_2000
]);
}, console.error);
}

// Updates the given chart with new data
function updateChart(chart, dataValues) {
chart.data.datasets[0].data = dataValues;
chart.update();
}

function clearCharts() {
updateChart(materialChart, [0, 0, 0, 0, 0]);
updateChart(yearChart, [0, 0, 0, 0, 0, 0]);
document.getElementById("count").innerHTML = 0;
}

createYearChart();
createMaterialChart();
});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="queryDiv" class="esri-widget">
<b>Query by geometry</b><br />
<br />Draw a geometry to query by:
<div class="geometry-options">
<button
class="esri-widget--button esri-icon-map-pin geometry-button"
id="point-geometry-button"
value="point"
title="Query by point"
></button>
<button
class="esri-widget--button esri-icon-polyline geometry-button"
id="line-geometry-button"
value="polyline"
title="Query by line"
></button>
<button
class="esri-widget--button esri-icon-polygon geometry-button"
id="polygon-geometry-button"
value="polygon"
title="Query by polygon"
></button>
</div>
<br />
<div class="tooltip">
<label for="bufferNum">Set a geometry buffer size:</label>
<div id="bufferNum"></div>
</div>
<br />
<button class="esri-button" id="clearGeometry" type="button">
Clear
</button>
</div>

<div id="resultDiv" class="esri-widget">
<div class="count">
Selected Buildings:
<div class="count" id="count">0</div>
</div>
<div class="charts">
<div>
<canvas id="year-chart" height="250" width="260" />
</div>
<div>
<canvas id="material-chart" width="250" height="300" />
</div>
</div>
</div>
</body>
</html>

Re: Below code i taken from sample code which is available ,in this code i have to customized to show how many numbers of polygons(buildings) are selected in selected area

SaschaBrunnerCH — Thu, 11 Jul 2019 07:56:51 GMT

Hello Anupam
The count is already in the sample at the top of the panel:

For better readability you can use https://community.esri.com/docs/DOC-8691-posting-code-with-syntax-highlighting-on-geonet for the code.

Re: Below code i taken from sample code which is available ,in this code i have to customized to show how many numbers of polygons(buildings) are selected in selected area

AnupamSharma — Sat, 13 Jul 2019 05:46:25 GMT

Than you so much

topic Re: Below code i taken from sample code which is available ,in this code i have to customized to show how many numbers of polygons(buildings) are selected in selected area in ArcGIS JavaScript Maps SDK Questions

Below code i taken from sample code which is available ,in this code i have to customized to show how many numbers of polygons(buildings) are selected in selected area

Re: Below code i taken from sample code which is available ,in this code i have to customized to show how many numbers of polygons(buildings) are selected in selected area

Re: Below code i taken from sample code which is available ,in this code i have to customized to show how many numbers of polygons(buildings) are selected in selected area