如何使用 OpenLayers 和 GeoServer 生成动态图例？

Question

我正在使用 OpenLayers 3 和 GeoServer 创建具有多层的地图。我能够使用 GetLegendGraphic 从 GeoServer 为每一层生成图例，并使用以下内容显示它们：

<!-- ========== Legend =============== -->
<div id="style_Legend" class="class_Legend" style="font-size: 14px; display: none;">   
    <p style="text-align:center; font-size:16px; color:blue"><b>Legend</b></p>
    <p id="infoLigend"></p> 
</div>

<script>
function myFunctionLigend() {   

document.getElementById("infoLigend").innerHTML = '';
var Div_Legend = document.getElementById("style_Legend");
 Div_Legend.style.display = "none";
    var lay = map.getLayers();
    
      var url = '';
      lay.forEach(function (layer, i, lay) {
      if (layer.getVisible() ) {
      if(osm==layer || layer == googleLayerHybrid || hideBaseLayers(layer)){
      }else{
      Div_Legend.style.display = "block";
      var xx = layer.get('name');
      
      var opacity = layer.getOpacity();
      opacity = opacity.toFixed(1);
      var vvv = opacity/0.1;
     
      if(xx == 'Aug-1' || xx == 'Aug-2' || xx == 'Aug-3' || xx == 'Aug-4' || xx == 'Aug-5' || xx == 'Aug-6'){
    
                  
           document.getElementById("infoLigend").innerHTML += checkNameLigendNew(layer)+"<br><input class='slider' type='range' min='1' max='10' value="+vvv+" id = "+xx+" onclick='sliderLisner(this.value,this.id)'><br><img src='http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=10&HEIGHT=10&legend_options=fontName:Times%20New%20Roman;fontAntiAliasing:true;fontColor:0x000033;fontSize:9;bgColor:0xFFFFEE;dpi:180&LAYER=vector:"+xx+"'><br>";
                
        
      }else if(xx == 'NDVI_R31' || xx == 'NDVI_R30' || xx == 'NDVI_R29' || xx == 'NDVI_R28' || xx == 'VCI21_R66' || xx == 'VCI21_R65' || xx == 'VCI21_R64' || 
                xx == 'VCI21_R63' || xx == 'VCI21_R62' || xx == 'Rabi_Maize_suiability' || xx == 'Kharif_Maize_suitability' ){
          
           document.getElementById("infoLigend").innerHTML += checkNameLigendNew(layer)+"<br><input class='slider' type='range' min='1' max='10' value="+vvv+" id = "+xx+" onclick='sliderLisner(this.value,this.id)'><br><img src='http://localhost:8080/geoserver/wms?Service=WMS&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=10&HEIGHT=10&legend_options=fontName:Times%20New%20Roman;fontAntiAliasing:true;fontColor:0x000033;fontSize:9;bgColor:0xFFFFEE;dpi:180&LAYER=vector:"+xx+"'><br>";

      }else   
      {     
           document.getElementById("infoLigend").innerHTML += checkNameLigendNew(layer)+"<br><input class='slider' type='range' min='1' max='10' value="+vvv+" id = "+xx+" onclick='sliderLisner(this.value,this.id)'><br><img src='http://localhost:8080/geoserver/wms?Service=WMS&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=10&HEIGHT=10&legend_options=fontName:Times%20New%20Roman;fontAntiAliasing:true;fontColor:0x000033;fontSize:9;bgColor:0xFFFFEE;dpi:180&LAYER=vector:"+xx+"'><br>";
                        
        }
        }
        }
    });
    viewTopLiverNew();  
}       
</script>