传单自定义控件位置：居中

Question

我们正在连接一个眼动仪来控制传单地图（平移、缩放等）我们希望有一个自定义控件出现在地图的中心（用于菜单功能）目前传单不支持位置: 'center') （支持左上角等）想法？

Answer 1

我知道这是一个老话题，但无论如何，这是我的解决方法。

添加一些CSS：

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

.leaflet-middle {
    top: 50%;
    position: absolute;
    z-index: 1000;
    pointer-events: none;
  transform: translate(0%, -50%);

}

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

并修补位置方法。

L.Map.include({
  _initControlPos: function () {
    var corners = this._controlCorners = {},
      l = 'leaflet-',
      container = this._controlContainer =
        L.DomUtil.create('div', l + 'control-container', this._container);

    function createCorner(vSide, hSide) {
      var className = l + vSide + ' ' + l + hSide;

      corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('top', 'left');
    createCorner('top', 'right');
    createCorner('bottom', 'left');
    createCorner('bottom', 'right');

    createCorner('top', 'center');
    createCorner('middle', 'center');
    createCorner('middle', 'left');
    createCorner('middle', 'right');
    createCorner('bottom', 'center');
  }
});

Now you have 5 new positions to use.

Answer 2

在传单上的地图上添加自定义控件的执行方式如下：

例如一个标志：

    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);

然后可以在myClass中添加CSS样式使其居中：（这部分未经本人测试）

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

Answer 3

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

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

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

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

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

编辑：

如果您想将功能添加到传单中，以便其他控件不受影响，您可以这样做：

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%);
}