R 传单 : Is it possible to have a two column layer control panel?-6ren

R 传单 : Is it possible to have a two column layer control panel?

转载作者：行者123 更新时间：2023-12-04 12:30:30

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

以下最小可重现示例详细显示了问题:

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))

这导致了以下 map ，其中 purple图层控制面板上的点不可用

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

最佳答案

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

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

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

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

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

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

向上滚动: