React-Leaflet 在鼠标悬停/鼠标移出时设置单个椭圆的填充不透明度 地图组件椭圆组件

如何解决React-Leaflet 在鼠标悬停/鼠标移出时设置单个椭圆的填充不透明度 地图组件椭圆组件

DEMO

我有一个用 React-Leaflet 创建的地图，显示用 Leaflet.ellipse 和 React-Leaflet Core API 创建的椭圆。

我正在将鼠标事件处理程序传递给椭圆的 eventHandlers 道具。当我将鼠标悬停在椭圆上时，QTreeWidget 从 0.0 变为 0.5，然后在鼠标移开时从 0.5 变为 0.0。

问题是当事件被触发时，每个椭圆的 fillOpacity 都会改变，而不仅仅是被悬停的椭圆。我怎样才能让只有被悬停的特定椭圆的 fillOpacity 发生变化？

地图组件

---

fillOpacity

椭圆组件

---

const Map = () => {
  const [map,setMap] = useState(null);
  const [fillOpacity,setFillOpacity] = useState(0)

  const onMouseEvent = (event,type) => {
    switch (type) {
      case 'over':
        setFillOpacity(0.5)
        break
      case 'out':
        setFillOpacity(0.0)
        break
      default:
        break
    }
  }

  return (
    <>
      <MapContainer
        center={[38,-82]}
        zoom={4}
        zoomControl={false}
        style={{ height: "100vh",width: "100%",padding: 0 }}
        whenCreated={map => setMap(map)}
      >
        <LayersControl position="topright">
          <LayersControl.BaseLayer checked name="Map">
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url={maps.base}
            />
          </LayersControl.BaseLayer>
          <LayersControl.Overlay checked name="Ellipses">
            <FeatureGroup>
              <>{CITIES.map((city,index) => {
                return (
                  <Ellipse
                    key={index}
                    center={city.center} 
                    radii={city.radii} 
                    tilt={city.tilt} 
                    pathOptions={{
                      fillOpacity,opacity: 1,weight: 2,}}
                    eventHandlers={{
                      mouseover: (event,type) => onMouseEvent(event,'over'),mouseout: (event,'out'),}}
                  >
                    <Popup>
                      <Typography variant='subtitle1'>{city.city}</Typography>
                    </Popup>
                  </Ellipse>
                )
              })}</>
              </FeatureGroup>
            </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>
    </>
  );
};

解决方法

问题是您对所有椭圆使用相同的状态变量。这里：

{CITIES.map((city,index) => {
  return (
    <Ellipse
      key={index}
      pathOptions={{
        fillOpacity. // <---- problem here
      }}
    >
      ...
    </Ellipse>
  )
})}

所以所有省略号都从 fillOpacity 状态变量中获得不透明度。当您将鼠标悬停在 任何 上时，状态变量会发生变化，并且它们都会做出响应。您最好不要将不透明度作为状态变量处理。只需将其设置为常量 0，然后在事件处理程序中挖掘鼠标悬停的 target，然后调用 setStyle：

  const onMouseEvent = (event,type) => {
    switch (type) {
      case 'over':
        event.target.setStyle({ fillOpacity: 0.5 })
        break
      case 'out':
        event.target.setStyle({ fillOpacity: 0.0 })
        break
      default:
        break
    }
  }

所以现在每个椭圆都直接通过传单方法管理自己的不透明度，而不是通过应用过于广泛的反应状态变量来继承它们的不透明度。

Working demo