javascript - 传单 z-index

Question

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

在谷歌地图中有一个 setZIndex 方法可以调整 Pane 内元素的顺序(形状总是在标记下方)。我怎样才能在传单中做到这一点？如果它在 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);
    }

};