javascript - 传单.js : Add custom text to layers control using CSS?

Question

我正在使用 Leaflet.js 构建交互式 map 。 Leaflet 附带的开箱即用的图层面板很难破解。我的用户有大分辨率显示器，他们很容易错过这个折叠的小图层图标。所以，我想做的是在图标右侧添加文本“View Overlays”。显然，该图标也比 map 上显示的要大。看起来 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