如何控制传单CircleMarker的z索引反应？

问题描述

我的地图上有一条折线和一个圆形标记。 对于第一个渲染，圆形标记在多段线上，这是完美的。 但是，当我修复数据并重新加载折线时，它位于圆圈标记的顶部。 这是我的代码

<Map>

  <LayerGroup>
     {this.state.datapolyline &&
        <polyline color={"#222222"} weight={9}
        positions={datapolyline.map(lc => [lc.lat,lc.lng])}/>
     }
  </LayerGroup>

  <LayerGroup>
    {this.state.places.map((p)=>
       <CircleMarker
         key={"marker_" + p.id}
         ref={"marker_" + p.id}
         center ={[p.stopLat,p.stopLon]}
         radius={6} weight={2} zIndex={9999}
         color={"#222222"} fillColor={"#FFFFFF"} fillOpacity={0.9} strokeOpacity={0}
       />

  </LayerGroup>
</Map>

解决方法

找到了解决方案：） 只需添加参数“窗格”并将其设置为“标记”的相同级别 例如）pane = {“ markerPane”}

有关更多信息： https://leafletjs.com/reference-1.7.1.html#map-pane

<CircleMarker
     key={"marker_" + p.id}
     ref={"marker_" + p.id}
     center ={[p.stopLat,p.stopLon]}
     radius={6} weight={2} zIndex={9999}
     color={"#222222"} fillColor={"#FFFFFF"} fillOpacity={0.9} strokeOpacity={0} pane={"markerPane"}
   />