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

Question

演示

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

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

问题是当事件被触发时，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, type) => onMouseEvent(event, 'out'),
                    }}
                  >
                    <Popup>
                      <Typography variant='subtitle1'>{city.city}</Typography>
                    </Popup>
                  </Ellipse>
                )
              })}</>
              </FeatureGroup>
            </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>
    </>
  );
};

椭圆组件

---

import { createPathComponent } from '@react-leaflet/core'
import L from 'leaflet'
import 'leaflet-ellipse'

const Ellipse = createPathComponent(createEllipse, updateEllipse)

function createEllipse(props, context) {
  const { center, radii, tilt, options } = props
  const instance = new L.Ellipse(center, radii, tilt, options)
  return {
    instance,
    context: { ...context, overlayContainer: instance },
  }
}

function updateEllipse(instance, props, prevProps) {
  if (
    props.center !== prevProps.center ||
    props.radii !== prevProps.radii ||
    props.tilt !== prevProps.tilt ||
    props.options !== prevProps.options
  ) {
    instance.setStyle(props.options)
    instance.setLatLng(props.center)
    instance.setRadius(props.radii)
    instance.setTilt(props.tilt)
  }
}

export default Ellipse

标签： javascriptreactjsleafletreact-leaflet

Answer 1

问题是您对所有省略号都使用相同的状态变量。这里：

{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
    }
  }

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

工作演示