TransWikia.com

GetFeatureInfo of a specific GeoServer layer by selecting it from a set of GeoServer layergroup

Geographic Information Systems Asked on March 15, 2021

I have multiple Geoserver layers, suppose 2 here (Rainfall and Maximum Temperature)

and I want to extract the feature of that layer which I check/switch in the sidebar,

But for now I just get the feature of rainfall,
as the URL source (var url) that I am passing in .JS is of rainfall only,

var url = india_dist_rainfall_layer_source.getFeatureInfoUrl

radio

how to make this URL source dynamic in GetFeatureInfo function of Openlayers 6, to get the info of that specific layer which we select from sidebar?

<body>
   <div class="grid-container">
        <div class="grid-1">
            <div class="sidebar">
                <h3>Weather Parameters</h3>
                <input type="radio" name="WeatherParameterLayerRadioButton" value="Rainfall" checked> Rainfall <br>
                <input type="radio" name="WeatherParameterLayerRadioButton" value="Maximum_Temperature"> Maximum Temperature <br>
                
            </div>
            <div class="grid-2">
                <div id= 'js-map' class='map'></div>
            </div>
   </div>
</body>

window.onload = init;

function init(){

    // 1.1 Rainfall
    var india_dist_rainfall_layer_source = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/agrodss/wms",
        params: {"LAYERS":" agrodss:Rainfall (mm)", "tiled": true},
        serverType: "geoserver",
    })
    var india_dist_rainfall_layer = new ol.layer.Tile({
        source: india_dist_rainfall_layer_source, 
        opacity: 0.0,
        visible:true,
        title: "Rainfall"
    })

    // 1.2 Maximum Temperature
    var india_dist_maximum_temperature_layer_source = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/agrodss/wms",
        params: {"LAYERS":"agrodss:Maximum Temperature (°C)", "tiled": true},
        serverType: "geoserver",
    })
    var india_dist_maximum_temperature_layer = new ol.layer.Tile({
        source: india_dist_maximum_temperature_layer_source, 
        opacity: 0.0,
        visible:true,
        title: "Maximum_Temperature"
    })

    var myview = new ol.View({
        center: ol.proj.fromLonLat([80, 22]),
        zoom: 3, 
        maxZoom: 9,
        minZoom: 2,
      });

    var map = new ol.Map({
        target: 'js-map',
        view: myview,
    });

    var weatherParameterLayerGroup = new ol.layer.Group({
      layers: [ 
        india_dist_rainfall_layer, 
        india_dist_maximum_temperature_layer
      ]
    })

    map.addLayer(weatherParameterLayerGroup);
    var weatherParameterLayerElements = document.querySelectorAll('.sidebar > input[type=radio]');
      for (let weatherParameterLayerElement of weatherParameterLayerElements){
        weatherParameterLayerElement.addEventListener('change', function(){
          let weatherParameterLayerElementValue = this.value;
          weatherParameterLayerGroup.getLayers().forEach(function(element, index, array){
            let weatherParameterLayerTitle = element.get('title');
            element.setVisible(weatherParameterLayerTitle === weatherParameterLayerElementValue);
          })
        })
      }

    map.on('singleclick', function (evt) {
        document.getElementById('rainfall_info').innerHTML = '';
        var myviewResolution = myview.getResolution();
        var url = india_dist_rainfall_layer_source.getFeatureInfoUrl(
        evt.coordinate,
        myviewResolution,
        {'INFO_FORMAT': 'text/html', 
        }, 
        );
        if (url) {
        fetch(url)
        .then(function (response) { return response.text(); })
        .then(function (html) {
        document.getElementById('rainfall_info').innerHTML = html;
          });
        }
    });
}
getfeatureinfojavascriptopenlayerswms

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP