时间戳

首页 > 解决方案 > OMS--spiderfy 后传单标记有不同的堆栈顺序

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

问题描述

我们的设置

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

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

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

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

​</p>

问题

我们根据需要加载和堆叠所有东西，并且在我们unspiderfy / spiderfy之前一切正常。当标记被重新蜘蛛化时，最终位于顶部的标记不是最初显示的标记。

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

OMS 应该记住标记 #76 z-Indices reset #117 的原始 zIndex （之前的修复关闭了这个）

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

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

​</p>

我们尝试了什么

决定调整我的标记选项以保留原始 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 值，但最终保留在顶部的标记不是之前的那个，也不是提供的 zIndex 计数最高的那个（addListener for spiderfy） .

我在以下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

蜘蛛侠

[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结束，恰好是相同的与第 2 项一样的新 z-index 值！

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

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

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

标签： leafletmapsomsmarkerspiderfier

解决方案

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

​</p>

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

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

如您所见，传单使用像素位置来设置 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 示例（注释 adjustZindex() 中的代码以查看差异）

​</p>

对于我的 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 是否应该记住标记 #76 的原始 zIndex在 OMS-Leaflet 版本中已解决有点无关紧要，因为它很可能不会解决我们的问题。

推荐阅读