I am studying the following ESRI "Select with Feature layer" sample codes:
ArcGIS API for JavaScript Sandbox
After that query is finished, I would like to create a FeatureTable and let all the query pink points within the 1 mile buffer go to the FeatureTable. Currently all the records go to the Feature Table, but I just need want to display data in table for the points inside the buffer. Below is my codes. Thanks a lot!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Select with feature layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
#messages{
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 20px;
z-index: 40;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/FeatureTable",
"esri/tasks/query", "esri/geometry/Circle",
"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
], function(
Map, FeatureLayer,FeatureTable,
Query, Circle,
Graphic, InfoTemplate, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
esriConfig, Color, dom
) {
// use a proxy page if a URL generated by this page is greater than 2000 characters
//
// this should not be needed as nearly all query & select functions are performed on the client
esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new Map("mapDiv", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 14,
slider: false
});
//add the census block points in on demand mode. Note that an info template has been defined so when
//selected features are clicked a popup window will appear displaying the content defined in the info template.
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
//infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
outFields: ["*"]
});
// selection symbol used to draw the selected census block points within the buffer polygon
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.setSelectionSymbol(symbol);
//make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
map.addLayer(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])
);
var circle;
//when the map is clicked create a buffer around the click point of the specified distance.
map.on("click", function(evt){
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "esriMiles"
});
map.graphics.clear();
map.infoWindow.hide();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);
var query = new Query();
query.geometry = circle.getExtent();
//use a fast bounding box query. will only go to the server if bounding box is outside of the visible map
featureLayer.queryFeatures(query, selectInBuffer);
});
function selectInBuffer(response){
var feature;
var features = response.features;
var inBuffer = [];
//filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
for (var i = 0; i < features.length; i++) {
feature = features;
if(circle.contains(feature.geometry)){
inBuffer.push(feature.attributes[featureLayer.objectIdField]);
}
}
var query = new Query();
query.objectIds = inBuffer;
myFeatureTable.selectedRowIds = query.objectIds; // here is what I added
myFeatureTable._showSelectedRecords(); //
//use a fast objectIds selection query (should not need to go to the server)
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
var totalPopulation = sumPopulation(results);
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
}
return popTotal;
}
myFeatureTable = new FeatureTable({
"featureLayer" : featureLayer,
"outFields": [
"POP2000"
],
fieldInfos: [
{
name: 'POP2000',
alias: 'POP2000',
},
{
name: 'HOUSEHOLDS',
alias: 'Household Name',
}
],
"map" : map
}, 'myTableNode');
myFeatureTable.startup();
});
</script>
</head>
<body>
<span id="messages">Click on the map to select census block points within 1 mile.</span>
<div id="mapDiv"></div>
<div id="myTableNode"></div>
</body>
</html>
Lei,
The FeatureTable did not respect the FeatureLayers selection in 3.16 or earlier but in 3.17 there is the myFeatureTable.filterSelectedRecords(true);.
FeatureTable | API Reference | ArcGIS API for JavaScript 3.17
I added the following change in the function: featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results), it seems the table just can not get all the selected records, still displaying all of them. But it is strange if I click 'Options' -- 'clear selection', all the points in buffer will be removed. That means the table gets all the selected points information already, just canot display. Thanks!
myFeatureTable.selectedRowIds = objectIds;
myFeatureTable.filterSelectedRecords(true); // 3.17 new
Lei,
So are you saying that the filterSelectedRecords(true) did not work for you?
No, the Feature Table still display all the records when first time open or after the query. Thanks!
An another option is to destroy the Feature Table
myFeatureTable.destroy();
run the query on Feature Layer or define a definition expression on Feature layer (the definition expression will have all objectids from the spatial query, example OBJECTID in (12,14,13,1116) )
myFeatureLayer = new FeatureLayer(relatedFeatureServiceTableUrl, {
mode: FeatureLayer.MODE_ONDEMAND,
visible: true,
definitionExpression:"objectid ="+oidparameter,
outFields: ["*"],
id: "fLayer"
});
and then load again the Feature Table for this Feature Layer
myFeatureTable = new FeatureTable({
"featureLayer" : myFeatureLayer,
"outFields": ["objectid","description","comments", "name","typeof"],
"map" : app.map,
"syncSelection": false,
"zoomToSelection":false,
"editable":bool
}, 'myTableNode');
myFeatureTable.startup();