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>
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
