单张Z索引 [英] Leaflet z-index

问题描述

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

I'm porting some Google Maps code to Leaflet (well, Mapbox actually). I have quite a lot of shapes (like rectangles, polygons) and markers on the map and I need the ability to adjust their order manually at any time, not just when adding them for the first time.

在Google地图中，有一种setZIndex方法，该方法允许调整窗格内元素的顺序(形状始终位于标记下方).如何在Leaflet中完成?如果api中没有该功能，最好的实现方法是什么?

In google maps there was a setZIndex method which allowed to adjust order of elements inside a pane (shapes were always below the markers). How can I do it in Leaflet? If it's not available in the api, what's the best way to implement it?

推荐答案

当前在Leaflet API中不可用.幸运的是，如果Leaflet使用的是SVG，则所有对象都是DOM元素，我们可以简单地更改它们的顺序.这是示例代码:

Currently it's not available in the Leaflet API. Luckily if Leaflet is using SVG, all objects are DOM elements and we can simply change their order. Here's a sample code:

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

};

这篇关于单张Z索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！