从控制中移除但在地图上保留图层答案

【问题标题】：Removing from Control but Keeping Layer on the Map从控制中移除但在地图上保留图层
【发布时间】：2014-06-09 17:42:17
【问题描述】：

我在 http://gisdev.clemson.edu/fireflies 有一个基于 Leaflet.js 的网页。右上角是图层的控件。我希望能够从图层的控制框中删除像“状态”这样的选项，但仍然保持状态的图层可见。如果我不将“状态”对象添加到地图的叠加层，则该图层不会在地图上可见。

我曾想过使用 jQuery 来删除该选项，但想知道是否有更好的方法——Leaflet 框架中的某种内置方法。

有什么想法吗？

【问题讨论】：

标签： jquery controls leaflet layer

【解决方案1】：

您可以将图层添加到地图而不将其添加到控件。

查看您的 Fireflies 应用程序，如果您想从图层控件中删除 states 图层，同时仍将其显示在地图上，只需从您的叠加对象中删除 states 键/val。

您已经使用以下内容将州图层添加到地图中

var wmsstates = L.tileLayer.wms("http://jomdev.clemson.edu:8080/geoserver/it.geosolutions/wms", {
    layers: 'it.geosolutions:USA_States',
    format: 'image/png',
    transparent: true,
    version: '1.1.0',
    attribution: "usastates"
});

wmsstates.addTo(map);

此时它已被添加到地图中。所以现在你要做的就是不要将它添加到图层控件中。

所以，而不是这个

var overlays = {    
    "Counties": wmscounty,
    "States": wmsstates,
    "Fireflies": geojsonFirefly
};

layersControl = new L.Control.Layers(baseLayers, overlays, {
    collapsed: false,
    id: 'irfancontrols'
});

使用这个

var overlays = {    
    "Counties": wmscounty
    "Fireflies": geojsonFirefly
};

layersControl = new L.Control.Layers(baseLayers, overlays, {
    collapsed: false,
    id: 'irfancontrols'
});

由于 States 图层不再是叠加层，它可能隐藏在底图下方。要解决此问题，您需要致电 bringToFront

wmsstates.bringToFront();

BTW 看起来很棒的项目。 :)

【讨论】：

谢谢，谢谢！但是，如果我使用你的方式——省略在叠加层中添加州，那么州就不会显示在地图上！我已经试过了。甚至尝试更改覆盖堆栈中的顺序，但仍然没有好处。顺便说一句，我现在已经想出了一个 jQuery 解决方案，但仍然更喜欢内置的。
@Meengla - 我看到了问题，由于覆盖层中不再列出状态，因此图层可能隐藏在底图下方。我在答案中添加了另一行代码，该代码显示了如何将该图层放置在其他底图之上（使用bringToFront）。
嗨，我想我之前也尝试过 bringToFront()，但我认为它没有奏效。问题是：我不需要在图层的控制框中同时显示“状态”和“萤火虫”图层，因此在两者上应用 BringToFront() 可能有问题？再次感谢。
@Meengla - 为了帮助解决您的问题，您还可以尝试调整透明度以更好地了解地图上的实际图层 - layer.setOpacity(.5)
@Meengle - 不，我不认为在你的状态层和萤火虫层上调用bringToFront应该是有问题的，除非一个覆盖另一个（你的层看起来像线和点层）

【解决方案2】：

@sfletche 的答案有效。或者，我可以使用 jQuery 来完成这项工作。这是我的 jQuery 解决方案：

$('label').each(function() {
    if ($.trim($(this).text()) == 'States') {//Remove the States
        //$(this).parent().remove();
        $(this).remove();
    }
    if ($.trim($(this).text()) == 'Fireflies') {// Remove the Fireflies
        //$(this).parent().remove();
        $(this).remove();
    }
});

【讨论】：