宣传单自定义控制位置：中心

Posted 2021-04-07

我们正在连接一个眼动仪来控制传单地图（平移，缩放等）我们想要一个出现在地图中心的自定义控件（用于菜单功能）目前Leaflet不支持位置：'center '）（支持topleft等）的想法？

答案

在传单上的地图上添加自定义控件就是这样执行的。

例如，徽标：

var logo= L.control({
    position : 'topleft'
});
logo.onAdd = function(map) {
    this._div = L.DomUtil.create('div', 'myControl');
    var img_log = "<div class="myClass"><img src="images/logo.png"></img></div>";

    this._div.innerhtml = img_log;
    return this._div;

}
logo.addTo(map);

然后，您可以将CSS样式添加到myClass以使其居中:(此部分尚未经过我自己的测试）

.myClass {
   padding-top:50%;
   padding-left: 50%;
}

另一答案

您可以简单地将.leaflet-left类重写为此类，并且您的控件将水平居中。

.leaflet-left {
    left: 50%;
    transform: translate(-50%, 0%);
}

要垂直居中，只需覆盖类.leaflet-top到此：

.leaflet-top {
    top: 50%;
    transform: translate(0%, -50%);
}

注意：这些更改将影响地图上的其他控件，如缩放控件。

编辑：

如果要将该功能添加到leaflet以使其他控件不受影响，则可以执行以下操作：

leaflet.js：从4900行开始我相信吗？

t("top", "left"),
t("top", "right"),
t("bottom", "left"),
t("bottom", "right"),

添加以下两行：

t("top", "center"),
t("bottom", "center")

这将允许使用头寸'topcenter'和'bottomcenter'

然后只需为'leaflet-center'添加css类：

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}