自分のボタンでWMSレイヤーのオン/オフを切り替える

Question

私はいくつかのマップを作成しましたが、リーフレットとジオサーバーを使用してそれらを公開したいと思います。すべてがうまくいっている、私はレイヤーコントロールを使用してレイヤーを変更することができますが、私は自分のボタンを使ってそれをしたいです。問題は、私はどのように把握できないということです。私はすべてのボタンを作成しているだけで、WMSタイルレイヤーをクリックしてマップに追加する機能を作成したいだけです。

ご協力いただければ幸いです。ここで私はこれまで試したものですが、それは仕事をdoesntの：

function appear(){ 
    var floodToday = L.tileLayer.wms("http://localhost:8080/geoserver/wms", { 
     layers: 'FloodlayerWMS', 
     format:'image/png', 
     version: '1.1.1', 
     transparent: true 
    }) 
    map.addLayer(floodToday); 
} 
$(".WToday").on("click",appear); 

私はすでに、この答えが見つかりました：Hide/Show layerGroups in Leaflet with own Buttonsをそれが有用であることが証明されていません。私は私の問題がwmsのタイルレイヤの使用に関連していると推測していますが、私はそれをどのように回るのかはわかりません。私はJavascriptとjQueryにはほとんど知識を持っていませんが、コードを少し周りいじると異なるオプションを試した後、これは私のためにどのような作品であるようHudsonPHの答え@

UPDATE

は私のために複雑に少しでした：

$("#WToday").click(function(event) { 
    var floodToday = L.tileLayer.wms("http://localhost:8080/geoserver/wms", { 
    layers: 'FloodlayerWMS', 
    format:'image/png', 
    version: '1.1.1', 
    transparent: true 
    }) 
map.addLayer(floodToday); 
}); 

ありがとうございました。

Answer 1

トリムを使用して名前を比較し、イベントをトリガーすることができます。 OBS：私は値

$("[name='leaflet-base-layers']").parent().each(function (index) { 
      $layerControl = $(this); 
      if ($that.attr("Your-Date-Attribute").trim() == $layerControl.find("span").text().trim()) {         
       $(this).find("input").trigger("click"); 
      } 
     }); 

Answer 2

は、より一般的なことを試してみてください取得するには、データの属性を使用していました。下記参照。

$("#WToday").click(function(event) { 
    const model = new Model().init("http://localhost:8080/geoserver/wms","FloodlayerWMS"); 
    const layerWMS = new Facade().requestWMS(model); 
    map.addLayer(layerWMS); 
}); 
//Module Facade 
let Facade = (function() { 
    function _requestWMS(model) { 
    return L.tileLayer.wms(model.getUrl(), model.toOptions()); 
    } 
    function _requestWFS(model) {} 
    return { 
    requestWMS:_requestWMS, 
    requestWFS:_requestWFS 
    } 
}()); 
//Model for webservices 
let Model = (function() { 
let url, layers, format, transparent, version; 
function _Model(pUrl, pLayer) { 
    url  = pUrl; 
    layers  = pLayer; 
    format  = 'image/png'; 
    transparent = true; 
    version = '1.1.1'; 
} 
function _toOptions() { 
    let options = { 
     layers:   layers, 
     format:   format, 
     transparent: transparent 
     version:  version, 
     }; 
    return options; 
} 
function _getUrl() { 
    return url; 
} 
return { 
     init:_Model, 
     getUrl:_getUrl, 
     toOptions: _toOptions 
}; 
}());