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

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

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

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

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

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

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

向上滚动：向下滚动：

Answer 2

为了实现这一点，你有几个解决方案...... 更优雅，更清洁，更难以修改原始的传单控制层控件或创建一个新控件。

请参阅leaflet-src.js如何创建'leaflet-control-layers'div，你会看到我在说什么。

更容易和“更脏”的解决方案是在添加图层后使用jQuery，浏览'leaflet-control-layers-base'div，对其进行计数并应用一些自定义css，它将添加索引为4以上（例如）到另一个div，它位于第一个的右边（不是一件难以做的事情吗？）。当然，您可以测量地图的高度，并将其与包含图层的div的高度进行比较，并将计算基于此（这将是一个更通用的解决方案）。

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

Answer 3

按照@ 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">
...

R Leaflet：是否可以使用双柱层控制面板？

3 个答案: