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

Question

我正在使用Leaflet.js构建交互式地图。 Leaflet附带的开箱即用的图层面板很难破解。我的用户拥有大分辨率显示器，他们很容易错过这个小的折叠图层图标。所以，我想要做的是添加文字＆＃34;查看叠加层＆＃34;在图标的右侧。显然，图标也比地图中显示的图标大。看起来CSS正在缩小一点，但我不知道如何将图标大小恢复到默认的更大尺寸。

这是我尝试开始的，但不是很好（plnkr here）

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

问题：

1.。如何增加三明治图标的大小？

2.。如何正确添加文字＆＃34;查看叠加层＆＃34;并防止该元素进入癫痫发作？

Answer 1

  

1.。）如何增加三明治图标的大小？

三明治图标是背景图像。此背景图像由多个图像组成，请参阅完整图像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高度和线高以及左边距的大小，因为它不关心背景大小，会切断背景或文本会运行到图标中。< / p>

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

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

  

2.。）如何正确添加“查看叠加层”文本并防止该元素进入癫痫发作？

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

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

请参阅此处的代码：http://plnkr.co/edit/2Vkci7MtfGcm9tvCUblx?p=preview