Leaflet.js : 使用 CSS 将自定义文本添加到图层控件？

Question

我正在使用 Leaflet.js 构建交互式地图。 Leaflet 附带的开箱即用的图层面板很难破解。我的用户有大分辨率显示器，他们很容易错过这个折叠的小图层图标。所以，我想做的是在图标右侧添加文本 "View Overlays"。显然，该图标也比地图上显示的要大。看起来 CSS 缩小了一点，但我不确定如何将图标大小恢复为默认的较大尺寸。

这是我的入门尝试，但不是很好(plnkr here)

.leaflet-control-layers-toggle {
  width: 200px;
}
.leaflet-control-layers-toggle:after {
  content: 'View Overlays';
  padding-left: 2em; 
}

问题：

1.) 如何增大那个三明治图标的大小？

2.) 如何正确添加文本 "View Overlays" 并防止元素进入癫痫发作状态？

Answer 1

1.) How do I increase size of that sandwich icon?

三明治图标是背景图片。此背景图片由多张图片组成，查看完整图片here。它被调整大小并放置以适应 Leaflet 的 CSS 定义：

.leaflet-container.dark .map-tooltip .close, .leaflet-control-attribution::after, .leaflet-control-layers-toggle, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-popup-close-button, .map-tooltip .close, .mapbox-icon {
    opacity: 0.75;
    background-image: url("images/icons-000000@2x.png");
    background-repeat: no-repeat;
    background-size: 26px 260px;
}

您必须更改几个 CSS 定义才能使其正常工作，使用图像编辑器剪切图像并使其大小合适可能会更容易...

更改背景大小和位置：

.leaflet-control-layers-toggle {
  background-size: 56px 560px;
}

.leaflet-control-layers-toggle {
  background-position: 0px -235px;
}

您可能还想调整 a 高度、行高和左边距的大小，因为它不关心背景大小，并且会切断背景或文本运行进入图标。

.leaflet-container a {
  width: auto;
  height: 3em;
}

.leaflet-container a:after {
  margin-left: 30px;
  line-height: 3em;
}

2.) How do I correctly add the text "View Overlays" and keep the element from going into an epileptic seizure?

问题是您的活动框和非活动框大小不同，使它们宽度相同，它应该可以工作：

.leaflet-control-layers {
  width: 200px;
}

查看代码：http://plnkr.co/edit/2Vkci7MtfGcm9tvCUblx?p=preview

Leaflet.js : 使用 CSS 将自定义文本添加到图层控件？

Leaflet.js : Add custom text to layers control using CSS?

javascript

css

leaflet