0
102
ViewsLa información sobre herramientas de React-Leaflet está oculta detrás de otra capa a pesar de un índice z más alto
Esa es una pregunta de seguimiento en React-Leaflet Cómo mostrar información sobre herramientas sobre la capa cuando se usan paneles .
Cuando agrego un círculo, la información sobre herramientas del rectángulo se oculta detrás del círculo, aunque el índice z de la información sobre herramientas es más alto. Esto me está confundiendo, ¿por qué sucede esto?
const Map = (props) => { return ( <MapContainer center={[48, 11]} zoom={8} id="mapId"> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Pane name="rectanglePane" style={{ zIndex: 401 }}> <Rectangle bounds={[ [47.5, 10.5], [48.5, 11.5] ]} > <Pane name="ttPane" style={{ zIndex: 403 }}> <Tooltip sticky>Rectangle Tooltip</Tooltip> </Pane> </Rectangle> </Pane> <Pane name="circlePane" style={{ zIndex: 402 }}> <Circle center={[48, 11]} radius={20000} > <Pane name="ttCirclePane" style={{ zIndex: 404 }}> <Tooltip sticky>Circle Tooltip</Tooltip> </Pane> </Circle> </Pane> </MapContainer> ); }; 
1 answers
Answer question0
El motivo de este comportamiento se debe al hecho de que el z-index de un elemento secundario está limitado por el z-index del elemento principal. Entonces, debido a que <Pane name="rectanglePane" style={{ zIndex: 401 }}> tiene un z-index más bajo que <Pane name="circlePane" style={{ zIndex: 402 }}> , todos los elementos dentro de rectanglePane siempre aparecen detrás de circlePane sin importar cuál sea su z-index .
Para que su aplicación funcione como lo desea, deberá agregar el elemento ttPane dentro de otro elemento que esté fuera de <Pane name="rectanglePane" style={{ zIndex: 401 }}> y uno que tenga una mayor z-index que circlePane . Luego tendrá que trabajar en la logística de activar ese elemento que está fuera del alcance de esta pregunta.
He notado que es probable que esté utilizando componentes importados de otra biblioteca. Si ese es el caso y no puede agregar la información sobre herramientas fuera del elemento rectanglePane , puede intentar controlar dinámicamente el estado interior de zIndexes y cambiar sus valores entre rectanglePane y circlePane (que cambiará el orden de aparición del círculo/borde). Esto también implicará agregar su propia lógica, pero desafortunadamente es la única otra forma de lograr el resultado deseado.