topic Re: operationalLayers: selecting features with drawtool in Web AppBuilder Custom Widgets Questions

operationalLayers: selecting features with drawtool

JamesCrandall — Wed, 13 Jan 2021 17:38:30 GMT

I'm looking for simple example to select features of an operationalLayer by dragging an extent box. I'm attempting to build a new widget with a button that will activate the drawtool and allow the user to drag a box to select features and deactivate when completed.

Javascript API 3x

Edit to add current code.

div on the widget's html:

<div class="jimu-btn finish-select" data-dojo-attach-event="click:activateAcknowledgeTool" id="btnActivateSelection">Activate</div>

activateAcknowledgeTool: function () { if (!this.drawToolbar) { this.setupDrawToolbar(); } this.enableDrawToolbar(); }, setupDrawToolbar: function () { this.createDrawToolbar(); this.setupDrawToolbarListener(); }, createDrawToolbar: function () { this.drawToolbar = new Draw(this.map, { showTooltips: false }); }, setupDrawToolbarListener: function () { on(this.drawToolbar, "draw-complete", lang.hitch(this, this.selectParcelsFromExtent)); }, selectParcelsFromExtent: function (drawResults) { var extent = drawResults.geometry; var query = new Query(); query.geometry = extent; parcelLayer = new FeatureLayer("https://somedomain.com/someagssite/rest/services/somemapservice/MapServer/0", { outFields: ["*"], mode: FeatureLayer.MODE_SELECTION }); this.map.addLayer(parcelLayer); parcelLayer.selectFeatures(query, FeatureLayer.SELECTION_ADD); var selectedFeatures = parcelLayer.getSelectedFeatures(); for (var i in selectedFeatures) { console.log(selectedFeatures[i].attributes.OBJECTID) } }, enableDrawToolbar: function () { this.drawToolbar.activate(Draw.EXTENT); }

it doesn't appear to select anything within the extent box drawn, the selectedFeatures array is empty.

Re: operationalLayers: selecting features with drawtool

JamesCrandall — Wed, 13 Jan 2021 18:09:26 GMT

I think I got it. Instead of adding a New FeatureLayer, I simply needed to get a reference to the desired operationalLayer. But one missing thing was to make sure the reference on the opLayer object's "layerObject" and not just the layer itself.

From this function the selection is performed using the geometry of the extent drawn. However, I am setting the reference to this.selectionLayer in another function that controls layer visibility by the user.

selectParcelsFromExtent: function (drawResults) { var extent = drawResults.geometry; var query = new Query(); query.geometry = extent; this.selectionLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW); var selectedFeatures = this.selectionLayer.getSelectedFeatures(); for (var i in selectedFeatures) { console.log("Asset Name: " + selectedFeatures[i].attributes.NAME) } },

A different function provides user interaction with the various operationalLayers from the webmap source (don't ask, there's a ton of layers and this just allows for easy display that makes sense). In any event, I am setting that this.selectedFeatures reference at this level which makes a lot of sense for UI flow:

_operLayers = this.map.itemInfo.itemData.operationalLayers; array.map(_operLayers, lang.hitch(this, function (lyr) { if (lyr.layerObject) { if (lyr.title === "Alert 24hr - Hydraulic Element Set (Active)") { if (chkHES == true && selectedAlertValue === "Active24") { lyr.layerObject.setVisibility(true); lyr.visibility = true; this.selectionLayer = lyr.layerObject; } else if (chkHES == true && selectedAlertValue === "All24") { lyr.layerObject.setVisibility(true); lyr.visibility = true; } else { lyr.layerObject.setVisibility(false); lyr.visibility = false; } }