Question

我创建了一些地图，现在我想用传单和地理服务器发布它们。一切都工作正常，我可以使用图层控件更改图层，但我想使用我自己的按钮。问题是我无法弄清楚如何。我创建了所有按钮，我只想创建一个功能，在点击时将wms图块层添加到地图

非常感谢任何帮助。这是我到目前为止所尝试的但它不起作用：

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 tile层的使用有关，但我不知道如何绕过它。

更新

@ HudsonPH的答案对我来说有点复杂，因为我对Javascript和JQuery几乎一无所知但是在稍微调整代码并尝试不同的选项后，这对我有用：

$("#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

您可以使用trim来比较名称并触发事件。 Obs：我使用data-attribute来获取值

 $("[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
 };
}());

打开/关闭WMS图层，单击小册子上的自己的按钮

2 个答案: