Evon,
Here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Query features in 1mile radius - 4.5</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
var flView;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/geometry/Circle",
"esri/Graphic",
"esri/tasks/support/Query",
"esri/renderers/SimpleRenderer",
"dojo/dom",
"dojo/domReady!"
],
function(
Map, MapView,
FeatureLayer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color,
Circle, Graphic, Query, SimpleRenderer, dom
) {
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "mapDiv",
map: map,
center: [-73.950, 40.702],
zoom: 11,
padding: {
top: 32
}
});
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",
outFields: ["POP2000"],
visible: false
});
map.add(featureLayer);
var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
view.whenLayerView(featureLayer).then(function(lyrView) {
flView = lyrView;
view.on("click", doBuffer);
});
function doBuffer(evt) {
dom.byId("messages").innerHTML = "Calculating…"
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "miles"
});
view.graphics.removeAll();
var graphic = new Graphic(circle, circleSymb);
view.graphics.add(graphic);
var query = featureLayer.createQuery();
query.geometry = circle.extent;
query.outSpatialReference = view.spatialReference;
featureLayer.queryFeatures(query).then(selectInBuffer);
}
function selectInBuffer(response) {
var feature;
var features = response.features;
var inBuffer = [];
for (var i = 0; i < features.length; i++) {
feature = features[i];
if (circle.contains(feature.geometry)) {
inBuffer.push(feature.attributes[featureLayer.objectIdField]);
}
}
var query = featureLayer.createQuery();
query.objectIds = inBuffer;
query.outSpatialReference = view.spatialReference;
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
featureLayer.queryFeatures(query).then(function(results) {
var graArr = [], graphic;
results.features.map( function(feat){
graphic = new Graphic(feat.geometry, symbol);
graArr.push(graphic);
});
view.graphics.addMany(graArr);
var totalPopulation = sumPopulation(results.features);
var r = "";
r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
dom.byId("messages").innerHTML = r;
});
}
function sumPopulation(features) {
var popTotal = 0;
for (var x = 0; x < features.length; x++) {
popTotal = popTotal + features[x].attributes["POP2000"];
}
return popTotal;
}
});
</script>
<style>
html,
body,
#mapDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel-container {
position: relative;
width: 100%;
height: 100%;
}
.panel-side {
padding: 2px;
box-sizing: border-box;
width: 100%;
height: 32px;
position: absolute;
top: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
z-index: 60;
}
#census_div {
height: 100%
}
#messages {
line-height: 30px;
}
</style>
</head>
<body>
<div class="panel-container">
<div class="panel-side">
<div id="census_div">
<span id="messages">Click on the map to select census block points within 1 mile.</span>
</div>
</div>
<div id="mapDiv"></div>
</div>
</body>
</html>