Question

我正在将一些Google地图代码移植到Leaflet（实际上，Mapbox）。我在地图上有很多形状（如矩形，多边形）和标记，我需要能够随时手动调整它们的顺序，而不仅仅是在第一次添加它们时。

在谷歌地图中有一个setZIndex方法，允许调整窗格内元素的顺序（形状总是在标记之下）。我怎么能在传单中这样做？如果它在api中不可用，那么实现它的最佳方法是什么？

Answer 1

目前它在Leaflet API中不可用。幸运的是，如果Leaflet使用SVG，所有对象都是DOM元素，我们可以简单地改变它们的顺序。这是一个示例代码：

L.Path.prototype.setZIndex = function (index)
{
    var obj = $(this._container || this._path);
    if (!obj.length) return; // not supported on canvas
    var parent = obj.parent();
    obj.data('order', index).detach();

    var lower = parent.children().filter(function ()
    {
            var order = $(this).data('order');
            if (order == undefined) return false;
            return order <= index;
    });

    if (lower.length)
    {
            lower.last().after(obj);
    }
    else
    {
            parent.prepend(obj);
    }

};

Answer 2

查看zIndexOffset类Marker中的选项。

您可以将函数绑定到layeradd事件，以单独设置每个标记的样式。

myLayer.on('layeradd', function (e) {
    var marker = e.layer;
    var zindex = 0;
    var feature = marker.feature;
    if (feature.geometry.type == 'Point') {
        marker.setStyle({
            'zIndexOffset': 3
        }
    });
});

Answer 3

默认情况下，传单将形状（“叠加层”）和标记放置在具有不同z-index值的不同窗格中：

来源：https://leafletjs.com/reference-1.5.0.html#map-pane

单张z指数

3 个答案: