OMS--spiderfy 后传单标记有不同的堆栈顺序

Question

我们的设置

我们有一个 L.map，其中包含从跨月的动态事件数组加载的不同层 L.markers。列出的许多场地在任何特定时期都会举办许多活动，因此我们最终会使用我们从 CDN 运行的 OMS-Leaflet 插件 (0.2.6) 很好地收集许多共享位置的标记 /p>

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

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

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

​

问题

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

我查看了所有的 OMS 问题，而不仅仅是 OMS-Leaflet（也就是 Google Maps API v3 的 OMS 版本），并发现了几个似乎暗示类似问题的已关闭的：

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

遗憾的是，尽管它似乎保留了标记的 zIndex 值，但在 unspiderfy/spiderfy 之前和之后，最终标记仍保持打开状态top 不是之前的那个，也不是提供的 zIndex 计数最高的那个（spiderfy 的 addListener）。

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

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 的第 3 项（与第 2 项相比）如何最终排在首位 新的 z-index: 5218 恰好是 与 item 2 相同的新 z-index 值！

p>

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

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

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

Answer 1

事实证明，这并不完全是 OMS-Leaflet 的错误，而是更多的问题 使用 Leaflet 以及它如何处理 z-Indexes

​

这是我在 gis.stackexchange 上发现的一个主题的摘录，该主题早在 2014 年 10 月 2 日由 YaFred 回答，今天仍然非常重要：

---

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

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

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

我的建议是使用 setZIndexOffset() 撤消传单 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 版本中得到解决有点无关紧要，因为它很可能无法解决我们的问题。