Leaflet Circle Z-索引

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

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

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

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

Leaflet Circle Z-索引

Leaflet Circle Z-Index

javascript

z-index

geojson

leaflet