Question

我有一个下拉列表，用于更改WMS图层的SLD。

现在，我希望根据此更改更新图例。最后，图例必须显示图层的选定SLD。

问题是，每次我通过下拉列表更改选择时，图例都会添加到地图中。但是我希望这个传奇能够得到更新。

例如，在此图片上，我选择了“ demo_secteur_statut _ ”，然后选择“ demo_secteur_statut ”，然后选择“ demo_secteur_statut _ ”

我认为我们需要在添加图层和/或图例之前删除它，但我的尝试不起作用。

JS

$.ajax({
  type: "GET",
  url: "sld.json",
  dataType: "json",
  success: function(data) {
      console.log(data);

     $('#select-sld').empty();
     $('#select-sld').append("<option value='0'>-- Choisir une analyse --</option>");
     $.each(data, function(i, item) {
         $('#select-sld').append('<option value=' + data[i].id + '>' + data[i].nom + '</option>');
     });

     ////// SLD DROPDOWN (nom = name of SLD on GeoServer)

     $("#select-sld").change(function(){
            var selectId = $("#select-sld option:selected").val();
            var getSLD = [];

            for (var i in data){     
                if(data[i].id == selectId){  
                    getSLD += data[i].nom;
                    if(data[i].id != selectId){
                        return false;
                    }
                }
            };
            secteur.setParams({styles: getSLD});

            ////// LEGEND

            var legend = L.control({position: 'bottomright'});

            legend.onAdd = function (map2) {

                var div = L.DomUtil.create('div', 'info legend');
                var url = 'http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=cite:demo_secteur&STYLE='+getSLD;

                div.innerHTML += '<img src='+url+' alt="legend" width="75" height="55">';
            return div;
            };
        legend.addTo(map2);
        }); 
  },
  complete: function() {}
});

///////////////////////////////////////// 

var map2 = L.map('map2', { zoomControl:false, attributionControl:false }).setView([48.11, -1.67], 14);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map2);

var secteur = L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms", {
layers: 'cite:demo_secteur',
format: 'image/png',
transparent: true
});

secteur.addTo(map2);

HTML

<div id="container-map">
    <div id="map2"></div>    
</div>

提前感谢您的帮助

{ 编辑 }

找到解决方案，请致：them

您可以简单地将map.removeControl（图例）包装在if中检查图例是否是实际的L.Control实例的语句。

所以它给了它，希望它可以帮助某人

var legend;

$("#select-sld").change(function(){
    var selectId = $("#select-sld option:selected").val();
    var getSLD = [];

    for (var i in data){     
        if(data[i].id == selectId){  
            getSLD += data[i].nom;
            if(data[i].id != selectId){
                return false;
            }
        }
    };

    secteur.setParams({styles: getSLD});
    console.log(secteur.wmsParams.styles);

    $('#result-select-sld').html(getSLD);

    if(legend instanceof L.Control){map2.removeControl(legend);}

    legend = L.control({position: 'bottomright'});

    legend.onAdd = function (map2) {
        var div = [];
        div = L.DomUtil.create('div', 'info legend');
        var url = 'http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=cite:demo_secteur&STYLE='+getSLD;
        div.innerHTML += '<img src='+url+' alt="legend" width="75" height="55">';

        return div;     

    };

    legend.addTo(map2);

});

宣传单更新WMS传奇更改

0 个答案: