I would like to be able to select multiple polygons from a service feature layer using JavaScript. I see this example but have not been able to get it to work with JS 4.30:
https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/select-multiple-features-by-mouse-clicks/td-p/588560
I got thgis to work using a thread here:
https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/ctrl-mouse-click/td-p/425312
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Select by Point</title> <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.30/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/views/draw/Draw", "esri/Map", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/layers/FeatureLayer", "esri/geometry/Point", "esri/geometry/Multipoint", "esri/views/MapView" ], function (Draw, Map, Graphic, GraphicsLayer, FeatureLayer, Point, Multipoint, MapView) { const pntGraphics = new GraphicsLayer(); let viewClickEvtHandler = null, viewMouseMoveEvtHandler = null; var renderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [255, 255, 255, 0.5], style: "none", outline: { // autocasts as new SimpleLineSymbol() color: "black", width: 2 } } }; const statesLyr = new FeatureLayer({ url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2', // renderer: renderer, outFields: ['*'] }); let drawPnt, graphic, ctrlKey = false, highlight, statesLyrView; const map = new Map({ basemap: "topo-vector", layers: [pntGraphics, statesLyr] }); const view = new MapView({ container: "viewDiv", map: map, center: [-105.570, 41.313193], zoom: 15.5 }); statesLyr.when(function () { view.whenLayerView(statesLyr).then(function (layerView) { statesLyrView = layerView; }); }) const draw = new Draw({ view: view }); var sym = { type: "simple-marker", style: "circle", color: [0, 255, 255, 0.6], size: "8px", outline: { color: [0, 255, 255, 1], width: 1 } }; view.ui.add("point-button", "top-left"); document.getElementById("point-button").onclick = drawPoint; function drawPoint() { if (viewMouseMoveEvtHandler) { viewMouseMoveEvtHandler.remove() viewMouseMoveEvtHandler = null } if (viewClickEvtHandler) { viewClickEvtHandler.remove() viewClickEvtHandler = null } const action = draw.create("point"); viewMouseMoveEvtHandler = view.on('pointer-move', (evt) => { if (evt.native.ctrlKey) { moveCtrlKey = true; } else { moveCtrlKey = false; } }) viewClickEvtHandler = view.on('pointer-down', (evt) => { if (evt.native.ctrlKey) { ctrlKey = true; } else { ctrlKey = false; } }) if (highlight) { highlight.remove(); } // Give a visual feedback to users as they move the pointer over the view action.on("cursor-update", function (evt) { view.graphics.removeAll(); drawPnt = new Point({ x: evt.coordinates[0], y: evt.coordinates[1], spatialReference: view.spatialReference }); graphic = new Graphic({ geometry: drawPnt, symbol: sym }); view.graphics.add(graphic); if (ctrlKey && !moveCtrlKey) { draw.reset(); view.graphics.removeAll(); selectStates(); } }); action.on("draw-complete", function (evt) { drawPnt = new Point({ x: evt.coordinates[0], y: evt.coordinates[1], spatialReference: view.spatialReference }); graphic = new Graphic({ geometry: drawPnt, symbol: sym }); pntGraphics.add(graphic); if (ctrlKey) { drawPoint(); } else { view.graphics.removeAll(); selectStates(); } }); view.focus(); }; function selectStates() { ctrlKey = false moveCtrlKey = false if (viewMouseMoveEvtHandler) { viewMouseMoveEvtHandler.remove() viewMouseMoveEvtHandler = null } if (viewClickEvtHandler) { viewClickEvtHandler.remove() viewClickEvtHandler = null } let mp = new Multipoint({ spatialReference: view.spatialReference }); let pntArray = pntGraphics.graphics.map(function (gra) { mp.addPoint(gra.geometry); }); const query = { geometry: mp, outFields: ["*"], outSpatialReference: view.spatialReference, returnGeometry: true }; statesLyr.queryFeatures(query) .then(function (results) { const graphics = results.features; var employeeEditData = [ { name: "", id: "" }, { name: "", id: "" } ]; employeeEditData = []; for (var i = 0; i < results.features.length; i++) { if (results.features[i].attributes.BUILDINGID) { employeeEditData.push({ name: results.features[i].attributes.BUILDINGID, id: results.features[i].attributes.OBJECTID, OBJECTID: results.features[i].attributes.OBJECTID, LONGNAME: results.features[i].attributes.LONGNAME, }); console.log(results.features[i].attributes.OBJECTID) } } var floorRoomAvailable = []; for (var k = 0; k < employeeEditData.length; k++) { // console.log (myRoomAvailableData[k].OBJECTID) floorRoomAvailable.push( employeeEditData[k].OBJECTID ); } console.log(floorRoomAvailable) console.log(employeeEditData) console.log(graphics) // remove existing highlighted features if (highlight) { highlight.remove(); } // highlight query results highlight = statesLyrView.highlight(graphics); console.log("Test") pntGraphics.removeAll(); }).catch(function (err) { console.error(err); }) } }); </script> </head> <body> <div id="viewDiv"> <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Select Countries"> <span class="esri-icon-map-pin"></span> </div> </div> </body> </html>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
