我在一英里处绘制一个圆半径，并选择缓冲区内的所有要素。我想突出显示所选要素并将其显示在数据网格/表中，并在地图周围单击时，将表与所选要素一起更新。
我能够画圆并选择特征。 我还可以控制台.log输出，但无法弄清楚如何创建绑定所选记录的数据网格并清除每个新选择的表
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Buffer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/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;
}
#drop {
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 105px;
z-index: 40;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/tasks/query", "esri/geometry/Circle", "esri/units",
"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"esri/config", "esri/Color", "dojo/dom", "dijit/form/ComboBox", "dojo/domReady!"
], function (
Map, FeatureLayer,
Query, Circle, Units,
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: [-81.00, 34.000],
zoom: 14,
slider: false
});
//selected features are clicked a popup window will appear displaying the content defined in the info template.
var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLOCK"]
});
// selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
6,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL, new Color([200, 120, 101, 0.9]), 1),
new Color([200, 0, 0, 1])
);
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) {
selbuf = document.FormSelection.BufferSelection.selectedIndex;
var BufferSelection = document.FormSelection.BufferSelection.options[selbuf].value;
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: BufferSelection,
radiusUnit: Units.MILES
});
map.graphics.clear();
map.infoWindow.hide();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);
var query = new Query();
query.geometry = circle;
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (results) {
console.log(results)
});
});
});
</script>
</head>
<body>
<span id="messages">Click on the map to select by radius within mile.</span>
<span id="drop"> Select Radius Size
<form name="FormSelection">
<select name="BufferSelection">
<option>1</option>
<option>2</option>
<option>10</option>
</select>
</form>
</span>
<div id="mapDiv"></div>
</body>
</html>
我希望在单击地图时将一个表绑定到选择集。
在一些帮助下，我找到了一个解决方案，以防其他人好奇。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with a Dojo dGrid</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/skins/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
height: 100%;
visibility: hidden;
}
#bottomPane {
height: 200px;
}
.dgrid {
border: none;
}
.field-id {
cursor: pointer;
}
</style>
<script src="http://js.arcgis.com/3.25/"></script>
<script>
// load dgrid, esri and dojo modules
// create the grid and the map
// then parse the dijit layout dijits
require([
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/dom-style",
"dojo/dom-attr",
"dijit/registry",
"esri/map",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/config",
"esri/renderers/SimpleRenderer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/geometry/Circle",
"esri/graphic",
"esri/dijit/PopupTemplate",
"esri/InfoTemplate",
"dojo/_base/declare",
"dojo/number",
"dojo/on",
"dojo/_base/lang",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Grid,
Selection,
Memory,
array,
domStyle,
domAttr,
registry,
Map,
FeatureLayer,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
esriConfig,
SimpleRenderer,
QueryTask,
Query,
Circle,
Graphic,
PopupTemplate,
InfoTemplate,
declare,
dojoNum,
on,
lang,
parser
) {
esriConfig.defaults.io.proxyUrl = "proxy/Proxy.ashx"
parser.parse();
// create the dgrid
window.grid = new(declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"id": "ID",
"popuplation": {
"label": "2000 Population",
"formatter": dojoNum.format
},
"households": "Households",
"houseunits": "House Units"
}
}, "grid");
// add a click listener on the ID column
grid.on(".field-id:click", selectBlkPnt);
window.map = new Map("map", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 14,
});
window.blockUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0";
window.outFields = ["OBJECTID", "POP2000", "HOUSEHOLDS", "HSE_UNITS"];
var fl = new FeatureLayer(window.blockUrl, {
id: "blockPnts",
outFields: window.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])
);
fl.setSelectionSymbol(symbol);
// Make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
fl.setRenderer(new SimpleRenderer(nullSymbol));
fl.on("click", selectGrid);
// change cursor to indicate features are click-able
fl.on("mouse-over", function() {
window.mapClickEvt.pause();
map.setMapCursor("pointer");
});
fl.on("mouse-out", function() {
setTimeout(function() {
window.mapClickEvt.resume();
}, 800);
map.setMapCursor("default");
});
map.addLayer(fl);
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
window.mapClickEvt = on.pausable(map, "click", function(evt) {
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "esriMiles"
});
map.graphics.clear();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);
var query = new Query();
query.geometry = circle;
// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer);
});
function selectInBuffer(features) {
var data = array.map(features, function(feature) {
return {
// property names used here match those used when creating the dgrid
"id": feature.attributes[window.outFields[0]],
"popuplation": feature.attributes[window.outFields[1]],
"households": feature.attributes[window.outFields[2]],
"houseunits": feature.attributes[window.outFields[3]]
};
});
var memStore = new Memory({
data: data
});
window.grid.set("store", memStore);
}
map.on("load", function(evt) {
// show the border container now that the dijits
// are rendered and the map has loaded
domStyle.set(registry.byId("container").domNode, "visibility", "visible");
});
// fires when a row in the dgrid is clicked
function selectBlkPnt(e) {
map.graphics.clear();
var fl = map.getLayer("blockPnts");
var query = new Query();
query.objectIds = [parseInt(e.target.innerHTML, 10)];
query.returnGeometry = true;
fl.queryFeatures(query, function(results) {
var gra = results.features[0].clone();
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 247, 0, 1]),
1
),
new Color([247, 247, 0, 0.9])
);
gra.setSymbol(symbol);
map.graphics.add(gra);
});
}
// fires when a feature on the map is clicked
function selectGrid(e) {
var id = e.graphic.attributes.OBJECTID;
// select the corresponding row in the grid
// and make sure it is in view
grid.clearSelection();
grid.select(id);
grid.row(id).element.scrollIntoView();
}
});
</script>
</head>
<body class="tundra">
<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
<div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
<div id="grid" ></div>
</div>
</div>
</body>
</html>