OMS--传单标记在spiderfy之后有不同的堆叠顺序

Question

我们的设置

我们有一个 L.map，其中 L.markers 的各个层从动态事件数组加载一个月的时间。许多列出的场地在任何特定时期都会举办许多活动，因此我们最终得到了许多标记共享位置，这些位置使用 OMS-Leaflet 插件 (0.2.6) 非常好地蜘蛛化 =159=] 来自 CDN

根据星期几或事件是否已确认/过期，例如，每个标记被放入多个标记层之一。这是一个周末：

markerWeekEnd = L.marker([lat, lon], { %options% });
markerWeekEnd.addTo(map);
weekend.addLayer(markerWeekEnd);
oms.addMarker(markerWeekEnd);

我花了一段时间才弄清楚如何正确堆叠标记，以便它们按特定顺序显示 (1. 即将到来的标记，2。其他未来日期标记和 3。任何过期标记（如果适用）使用 zIndexOffset 因为 bringToFront() 方法不支持 L.markers.

问题

我们已根据需要加载和堆叠所有内容，一切正常，直到我们unspiderfy/spiderfy。当标记被重新蜘蛛化时最终出现在顶部的不是最初显示的那个。

我查看了所有 OMS 问题，而不仅仅是 OMS-Leaflet（即 OMS 版本 Google 地图 API v3), 并发现了几个似乎暗示类似问题的关闭的：

OMS should remember original zIndex of marker #76 z-Indices 重置 #117（之前的修复关闭了这个）

据我所知，这些的相关修复似乎已应用于 OverlappingMarkerSpiderfier/1.0.2/oms.js（也包括 1.0. 3 现在我想）但也许不是 OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.js 版本。

无论如何，我们随后为解决上述问题所做的努力似乎确实在一定程度上解决了 zIndex，但并未克服与 OMS spiderfy 相关的堆叠问题。

我们尝试了什么

决定调整我的标记选项以保留原始 zIndexOffset 设置 L.marker([lat, lon], {... zIndexOffset: mIndex, mDay: mDay}) 并查看使用保留值重置 zIndex 是否可以解决我的堆叠问题

// for both spiderfy & unspiderfy
oms.addListener('spiderfy', function(markers) { 
   markers.forEach(function(marker) { zIndexCheck(marker); });
}
function zIndexCheck(marker){
   L.setOptions( marker, { zIndex: mIndex, zIndexOffset: mIndex });
}

遗憾的是尽管它似乎在 unspiderfy/spiderfy[ 之前和之后保留了标记 的 zIndex 值=108=]，最终留在顶部的标记是不是之前的标记，也不是最高的标记提供的 zIndex 计数（spiderfy 的 addListener）。

我在以下 jsfiddle 和 console 上重新创建了我们网站功能的精简版本，并记录了 zIndexes spiderfy前后的初始标记：

Marker Title: 'London Socials #1 (1/2)' startTime:ENDED: 1st Feb zIndex:-10 Marker Title: 'London Socials #2 (14/2)' startTime:Fri 14th Feb zIndex:5054 (Active) Marker Title: 'London Socials #3 (28/2)' startTime:Fri 28th Feb zIndex:2026

#2 最初是活动项目

蜘蛛侠

[London Socials #1 (1/2)] index:990 [London Socials #2 (14/2)] index:5027 [London Socials #3 (28/2)] index:5013

UnSpiderfy

[London Socials #1 (1/2)] index:990 [London Socials #2 (14/2)] index:5027 [London Socials #3 (28/2)] index:5013 (Active)

#3 现在是 spiderfy/unspiderfy 之后的 活动项 （请参阅下面的最终元素）

最终标记元素

<div class="awesome-marker-icon-blue awesome-marker leaflet-zoom-animated leaflet-interactive" title="London Socials #2 (14/2)" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(83px, 218px, 0px); z-index: 5218;"><i class=" fa fa-moon icon-white"></i></div> <div class="awesome-marker-icon-blue awesome-marker leaflet-zoom-animated leaflet-interactive" title="London Socials #3 (28/2)" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(83px, 218px, 0px); z-index: 5218;"><i class=" fa fa-moon icon-white"></i></div>

据我所知，无法弄清楚具有先前较低 zIndex（与项目 2 相比）的项目 3 如何设法 最终以新的 z-index: 5218 排在首位，恰好是 相同的新 z-index 值至于 项目 2!

我将此作为错误发布在 gitHub 上，但现在我不太确定这是 OMS-Leaflet 的错误。所以我也在这里发帖。这是显示问题的 fiddle：

https://jsfiddle.net/magicmb/17j2z4gy/

环境特定版本： leaflet.js (1.6.0), Leaflet.awesome-markers (2.0.2), OverlappingMarkerSpiderfier-Leaflet (0.2.6)

Answer 1

Turns out it's not exactly a bug with OMS-Leaflet but more an issue with Leaflet and how it handles z-Indexes

这是我在 2014 年 10 月 2 日 gis.stackexchange that was answered by YaFred 上发现的一个线程的摘录，今天仍然非常相关：

在有人找到更好的解决方案之前，这是我会做的...

如您所见，传单使用像素位置设置 zIndex（在 Marker.js 中）

pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
this._zIndex = pos.y + this.options.zIndexOffset;

我的建议是使用 setZIndexOffset()

撤消 leaflet zIndex

假设你想设置 zIndex = 100，你会这样做

var pos = map.latLngToLayerPoint(marker.getLatLng()).round();
marker.setZIndexOffset(100 - pos.y);

有点小问题：每次缩放地图时你都必须这样做 :( [EDIT: Spiderfied in our case!]

这里有一个JSFiddle example（注释adjustZindex()中的代码可以看出区别）

对于我的 OMS Spiderfy 案例，这是通过添加解决的：

function adjustZindex() {
    var markers = oms.getMarkers();
    for (var i = 0, len = markers.length; i < len; i ++) {
      var marker = markers[i];
      var latlng = marker._latlng, mIndexOffset = marker.options.mIndexOffset ;
      var pos = map.latLngToLayerPoint(latlng).round();
      marker.setZIndexOffset(mIndexOffset - pos.y);
    }
  }
  adjustZindex();

然后从我的 spiderfy 监听器中调用 adjustZindex()

oms.addListener('spiderfy', function(markers) {
    layersBring2Front(); 
    adjustZindex();
  });

所以我想 OMS should remember original zIndex of marker #76 是否在 OMS-Leaflet 版本中得到解决有点无关紧要，因为很可能它不会解决我们的问题。

OMS--传单标记在spiderfy之后有不同的堆叠顺序

OMS--Leaflet markers have different stack order after spiderfy

leaflet

maps

oms

markerspiderfier

我们的设置

问题

我们尝试了什么