如何通过切换单选按钮获取特定GeoServer图层的URL? [英] How to fetch the URL of specific GeoServer layer by switching radio button?

查看:121
本文介绍了如何通过切换单选按钮获取特定GeoServer图层的URL?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有多个Geoserver层,在此处设置3个(降雨,最高温度和最低温度)

I have multiple Geoserver layers, let 3 here (Rainfall, Maximum Temperature and Minimum Temperature)

图层名称和在单选按钮中分配的用于切换图层的值是相同的.

The name of layer and values assigned in the radio button to switch the layers is same.

当我选中单选按钮时,我正在获取该特定图层的值

As I check the radio button, I am getting the value of that specific layer

但是当我传递此值时,我无法获取该层的URL

but when I pass this value, I am unable to fetch the URL of that layer

如何在Openlayers 6的 GetFeatureInfo 函数中使该图层值字符串起作用,以获取我们从侧边栏中选择的特定图层的URL?

how to make this layer value string work in GetFeatureInfo function of Openlayers 6, to get the URL of that specific layer which we select from sidebar?

任何其他建议都将受到高度赞赏.

Any other suggestions are highly appreciated.

<body>
   <div class="grid-container">
        <div class="grid-1">
            <div class="sidebar">
                <h3>Weather Parameters</h3>
          <input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_rainfall_layer" checked> Rainfall <br>
          <input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_maximum_temperature_layer"> Maximum Temperature <br>
          <input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_minimum_temperature_layer"> Minimum 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.on('click',function(evt){
      var resolution=map.getView().getResolution();
      var coordinate=evt.coordinate;    
      var projection=map.getView().getProjection();
      //console.log(resolution, coord, projection)

//switching layers to get layer value
      var weatherParameterLayerURLs = document.querySelectorAll('.sidebar > input[type=radio]');
      for (let weatherParameterLayerURL of weatherParameterLayerURLs){
      weatherParameterLayerURL.addEventListener('change', function(){
      var weatherParameterLayerURLpass = this.value;

      //GET URL (not working)
      var district_url=weatherParameterLayerURLpass.getSource().getFeatureInfoUrl()

      //GET URL (working)
      var district_url=india_dist_maximum_temperature_layer.getSource().getFeatureInfoUrl()

推荐答案

如果您具有GetFeatureInfo URL,则只需将请求参数的值从 GetFeatureInfo 更改为 GetMap

If you have the GetFeatureInfo URL you can get at the GetMap URL, just by changing the value of the request parameter from GetFeatureInfo to GetMap

这篇关于如何通过切换单选按钮获取特定GeoServer图层的URL?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆