哪个传单库或解决方法来控制工具栏大小

Question

我需要更改工具栏的样式，例如按钮的大小，以便为移动设备提供更大的触摸区域（绘制工具栏和其他控件）。

我已经尝试使用 css 将工具栏按钮的宽度和高度的大小更改为 48px。

当前 css：

/*
  ##Device = Mobile, Tablet
*/
@media (max-width: 1024px) {
    .leaflet-bar a, a.leaflet-toolbar-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        line-height: 45px !important;
    }
    .leaflet-touch .leaflet-draw-actions a {
        font-size: 20px;
        line-height: 44px;
        height: 44px;
    }
    .leaflet-control-zoom-display {
        width: 45px;
        height: 45px;
        font-size: 18px;
        line-height: 30px;
    }
    .leaflet-touch .leaflet-control-layers-toggle {
        width: 44px;
        height: 44px;
    }
}

当我以 css 方式更改大小时，工具栏不再响应（传单绘制的工具栏背景应适合大小）

当您单击工具栏按钮并显示水平子工具栏（文本重叠）时，它也会出现故障。

有没有人知道插件或方法可以为移动设备提供更大的触摸区域？

Answer 1

我用 css

解决了我的问题

/*
  ##Devices with touch
*/
.leaflet-touch .leaflet-control-zoom-display {
  width: 48px;
  height: 48px;
  font-size: 18px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a, .leaflet-touch .leaflet-toolbar-0 > li > a {
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 45px;
  background-size: 314px 30px;
}
.leaflet-touch .leaflet-draw-toolbar.leaflet-bar a {
  background-position-y: 6px;
}
.leaflet-touch .leaflet-draw-actions a, .leaflet-touch .leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
  font-size: 20px;
  line-height: 44px;
  height: 44px;
}
.leaflet-touch .leaflet-draw-actions, .leaflet-touch .leaflet-toolbar-1 {
  left: 45px;
}

对于使用自定义工具栏插件的用户：如果您将位置设置为右侧，则 sub-toolbar 将在右侧（屏幕外）打开解决者：

.leaflet-right .leaflet-toolbar-1 {
  left: auto !important;
  right: 30px;
}
.leaflet-right .leaflet-toolbar-1 li:first-child > .leaflet-toolbar-icon {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.leaflet-right .leaflet-toolbar-1 li:last-child > .leaflet-toolbar-icon {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

（绘制工具栏和自定义工具栏位置滑动）：

哪个传单库或解决方法来控制工具栏大小

Which Leaflet library or workaround to control toolbar size

javascript

leaflet

leaflet-draw