Leaflet Circle Z-Index

Question

我正在使用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 */
}

Answer 1

只有在您使用的图层已经在地图上（即在bringToFront()功能之外）时，您才可以使用onEachFeature。

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

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