operationalLayers: selecting features with drawtool

411
1
Jump to solution
01-13-2021 08:40 AM
JamesCrandall
MVP Frequent Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
JamesCrandall
MVP Frequent Contributor

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;
                        }
                    }

 

View solution in original post

0 Kudos
1 Reply
JamesCrandall
MVP Frequent Contributor

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;
                        }
                    }

 

0 Kudos