我正在使用Leaflet绘制路线。

路线分为多个帧，每个帧都标有一个圆圈，并且在悬停事件时，该帧会显示为路线上的不透明叠加层。

问题是圆圈是在框架覆盖层后面绘制的，但我希望它位于所有内容之上(在 z 轴上)。

我已经搜索并尝试了我找到的所有内容，但我无法让它保持在最前面。我能做什么？

这就是我正在做的事情:

L.geoJson(route, { 
  style: function(feat) { 
    return { 
      weight: 10, 
      opacity: 1, 
      cursor: 'pointer', 
      color: 'transparent', 
      className: 'journey-frame'     
    } 
  }, 
  onEachFeature(feat, layer) { 
    var c = layer.getBounds().getCenter() 
    var color = getColor() 
    var circle = L.circle(c, { 
      color: 'black',  
      weight: 2,  
      radius: 3, 
      fill: true,  
      fillColor: color, 
      fillOpacity: 1, 
      className: 'frame-circle', 
      zIndexOffset: 1000 // first attempt to place circle on top. Not working 
    }) 
 
    // second attempt. Not working 
    circle.bringToFront() 
 
    // Change layer color to show frame 
    layer.on('mouseover', function() { 
      layer.setStyle({color: '#ddd', opacity: 0.8}); 
    }) 
 
    // Change layer color to hide frame 
    layer.on('mouseout', function() { 
      layer.setStyle({color: 'transparent'}); 
    }) 
  } 
}).addTo(mymap) 

在我的 CSS 文件中

.frame-circle { 
    z-index: 1000; /* tried also this but still nothing */ 
} 

请您参考如下方法:

只有当您使用的图层已经在 map 上时(即在 onEachFeature 函数之外)，您才能使用 bringToFront()。

在您的情况下，您必须等待L.geoJson().addTo(map)，然后检索您的图层(圆圈)，现在您可以使用bringToFront() .

原因很简单:此方法作用于图层的父节点，将图层添加到末尾(或者在 bringToBack() 的情况下作为第一个子节点)。如果图层未添加到 map ，则它不会插入到 DOM 中，并且没有任何可以对其进行重新排序(附加/插入)的父容器。