R Leaflet：是否可以有一个两列层控制面板？

Question

我有一张传单地图，其中包含 75 个叠加组，我想使用图层控制面板将其变为可见/不可见。问题是，有了这么多组，我的图层控制面板到达了地图的末尾，因此并非所有组都在图层控制面板中可见。

以下可重现的最小示例详细说明了该问题：

library(leaflet)
leaflet(width = 400, height = 100) %>%
  addTiles() %>%
  # Overlay groups
  addCircleMarkers(lng = 9, lat = 47, color = 'red', group = 'red') %>%
  addCircleMarkers(lng = 8, lat = 46, color = 'blue', group = 'blue') %>%
  addCircleMarkers(lng = 8, lat = 47, color = 'green', group = 'green') %>%
  addCircleMarkers(lng = 9, lat = 46, color = 'yellow', group = 'yellow') %>%
  addCircleMarkers(lng = 8.5, lat = 46.5, color = 'purple', group = 'purple') %>%
  # Layers control
  addLayersControl(
    overlayGroups = c('red', 'green', 'blue', 'yellow', 'purple'),
    options = layersControlOptions(collapsed = TRUE))

这会导致下面的地图，其中purple 点在图层控制面板上不可用

是否有可能强制图层控制面板将图层排列在一列以上？

Answer 1

根据@symbolrush 的回答，如果<body> 部分已经包含参数，则可能需要对其进行一些编辑。

之前（传单创建的html文件）：

...
</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
...

@symbolrush 编辑后：

...
</head>
<body>
<style="background-color:white;"></style> #might not be necessary
<style type="text/css">
      .leaflet-control-layers {
        max-height: 600px;
        overflow: auto;
      }
    </style>
<div id="htmlwidget_container">
...

Answer 2

我找到了适合我的解决方案。它不使用多列布局，而是使用图层控制面板上的自动溢出功能，允许导航到所有图层。

由于addLayersControl 函数没有参数来控制图层控件的列布局，因此必须使用JavaScript 和CSS 来建立多列布局。 在寻找一个非常简单的替代方案时，我偶然发现了以下内容 https://groups.google.com/forum/#!topic/leaflet-js/aoImrdIoF2Q

.leaflet-control-layers {
  max-height: 60px;
  overflow: auto;
}

这确实建立了一个自动溢出布局，它几乎与我的应用程序的两列布局一样好。 这个 sn-p 需要放在包含传单地图的 .html 文件的 CSS 部分中。因此，在将传单映射“编织”到 .html 文件后，您必须重新打开 .html 文件并将该 sn-p 放在 .html 文件的 <body> 部分。

    <body>
    <style type="text/css">
      .leaflet-control-layers {
        max-height: 60px;
        overflow: auto;
      }
    </style>
    ...<rest of document>...
    </body>

结果是一个图层控制面板，允许浏览所有图层。

向上滚动： 向下滚动：

Answer 3

为此，您有几个解决方案... 更优雅、更简洁、更难的是修改原始的传单控制层控件或创建一个新控件。

请参阅 leaflet-src.js 了解“leaflet-control-layers” div 是如何创建的，您会明白我在说什么。

更简单和“更脏”的解决方案是在添加图层后使用 jQuery，检查“leaflet-control-layers-base” div，对其进行计数并应用一些自定义 CSS，这些 CSS 将添加具有索引的元素4 及以上（例如）到另一个 div 将在第一个右侧的另一个 div （这不是一件难事吗？）。当然，您可以测量地图的高度并将其与包含图层的 div 的高度进行比较，并以此为基础进行计算（这将是一个更通用的解决方案）。

所以答案是肯定的，你可以这样做。