How to update WMSLayer by ID ESRI js 4.14

157
2
04-08-2020 02:56 PM
SRIVENKATESHVASIRAJU1
New Contributor II

Hi All,

I am new to the ESRI js API 4.14. I have an application where I render a default map and then conditionally add new WMS Layers. Each of these have a unique ID which are defined by the WMSLayer.id object. Now when I update the properties for 1 layer using this.wmsLayer.{SomeProperty} , It works just fine. When I have more than 1 layer then this.wmsLayer updates another layer rather than my current layer. I am looking for a way to update the specific layer. Is there a way to do this by ID? 

Thanks!

0 Kudos
2 Replies
AnneFitz
Esri Contributor

Hi, have you tried using wmsLayer.sublayers? Or would you be able to share your code? I'm not sure if I understand what you are asking.

Thanks,

Anne

0 Kudos
SRIVENKATESHVASIRAJU1
New Contributor II

Sure Anne,

Here is my code. Just for a context of what I am working on......

Default Map get Created with no WMS Layers => User Selects an Animal Name from a Input box => Once use selects an Animal => There are 3 checkboxes made => On clicking one of these checkboxes, a layer on the WMS layer get created which is a distribution model image.... 

This process goes on for more than 1 type of Animal where I make more than 1 WMS layer and toggle their visibility if there are no checkboxes for that animal selected. The code is as follows.....

This Function makes a new layer conditionally...

function makeLayer(filterText, layerText, tax_id, bBox) {
console.log(bBox);
wmsLayer = new WMSLayer({
id: tax_id,
url: Some Service URL,
visible: true,
customLayerParameters: {
SERVICE: "WMS",
FORMAT: "image/png",
TRANSPARENT: "TRUE",
CRS: "EPSG:102100",
STYLES: '',
REQUEST: "GetMap",
LAYERS: layerText,
cql_filter: filterText,
WIDTH: width,
HEIGHT: height,
BBOX: bBox,
crs: "EPSG:3857",
spatialReferences: [3875, 3875, 3875]
},
version: "1.3.0",
featureInfoFormat: "image/png",
imageFormat: "png",
WMSSublayer: []
})
this.wmsLayer = wmsLayer;
this._ORD = [];
this.taxon_id = tax_id;
map.add(wmsLayer)
console.log(wmsLayer)
}

This is the function that takes care of the checkbox state change and tries to update the Layer. This is where I am having trouble...

        //Empty the Layer and Filter Texts
        layerText = '';
        filterText = '';
        //new Arrays for grouping the text
        var layerSelect = [];
        var filterAttr = [];
        var visibleLayers = [];
        //push the selected Checkboxes into the griuping arrays 
        console.log("Change Occured for the Taxon " + taxon)
        $('div#' + taxon + ' input:checked').each(function() {
            layerSelect.push($(this).attr('id'));
            filterAttr.push($(this).data('filter'));
        });
        //String Manipulate the Arrays 
        filterAttr = filterAttr.map(function(e) { return "taxon_id='" + taxon + "'" + e });
        layerSelect = layerSelect.join();
        filterAttr = filterAttr.join(";");
        //Assign arrays to arguments 
        layerText = layerSelect;
        filterText = filterAttr;
        tax_id = "some_" + taxon;
        if (availableList.indexOf(tax_id== -1{
            //make new layer if layer does not exist
            new makeLayer(filterText, layerText, tax_id, bBox);
            console.log("Making a new layer!");
            availableList.push(tax_id);
            console.log(availableList)
        } else {
            if (layerText.length != 0 && filterText.length != 0{
                //check and Update the current layers
                if (wmsLayer.id != "some" + taxon{
                    console.log("Do Nothing");
                    
                } else {
                    console.log("DO UPDATE")
                    this.wmsLayer.visible = true;
                    this.wmsLayer.customLayerParameters.cql_filter = '';
                    this.wmsLayer.customLayerParameters.cql_filter = filterText;
                    this.wmsLayer.customLayerParameters.layers = '';
                    this.wmsLayer.customLayerParameters.layers = layerText;
                    this.wmsLayer.customLayerParameters.bbox = bBox;
                    this.wmsLayer.refresh()
                }

            } else {
                console.log(layerText);
                console.log(filterText);
                console.log(this.wmsLayer.id);
                this.wmsLayer.visible = false;
                this.wmsLayer.refresh();
                visibleLayers = visibleLayers.filter(item => item !== tax_id);
                console.log(visibleLayers);
            }
        }
    }
0 Kudos