React-Leaflet 如何在使用窗格时在图层上方显示工具提示

Question

使用窗格时，矩形的工具提示显示在矩形后面。如何解决此问题，使工具提示再次按预期位于图层上方？

我尝试将窗格参数传递给工具提示，并在工具提示上设置更高的 zIndex，但是 none 成功了。

import React from "react";
import { MapContainer, Pane, Tooltip, Rectangle, TileLayer } from 'react-leaflet'

function Map(props) {

  return (
    <MapContainer
      center={[48, 11]}
      zoom={8}
    >
      <TileLayer
        attribution='&copy; <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]]} >
          <Tooltip sticky>Rectangle Tooltip</Tooltip>
        </Rectangle>
      </Pane>
    </MapContainer>
  )
}

使用 react-leaflet：3.1.0

Answer 1

用更高的 z 索引将工具提示包裹在它自己的窗格中：

const Map = (props) => {
  return (
    <MapContainer center={[48, 11]} zoom={8} id="mapId">
      <TileLayer
        attribution='&copy; <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: 402 }}>
            <Tooltip sticky>Rectangle Tooltip</Tooltip>
          </Pane>
        </Rectangle>
      </Pane>
    </MapContainer>
  );
};

React-Leaflet 如何在使用窗格时在图层上方显示工具提示

React-Leaflet How to show tooltips above layer when using panes

leaflet

react-leaflet

Working codesandbox