Javascript 我怎样才能在传单上使用蛇呢

我想使用传单。多段线。蛇形动物，我有一个问题。是否有在react传单中创建自定义组件的示例？

安装库并导入

传单.polyline.snakeanim/L.polyline.snakeanim.js

然后创建一个包装器来调用触发动画所需的方法。您可以使用

startAnimation

prop触发动画，但您可以根据需要进行调整：

... // imports here

const SnakeAnim = ({ startAnimation }) => {
  const { map } = useLeaflet();

  useEffect(() => {
    if (!startAnimation) return;
    const trd = [63.5, 11];
    const mad = [40.5, -3.5];
    const lnd = [51.5, -0.5];
    const ams = [52.3, 4.75];
    const vlc = [39.5, -0.5];

    const route = L.featureGroup([
      L.marker(trd, { icon }),
      L.polyline([trd, ams]),
      L.marker(ams, { icon }),
      L.polyline([ams, lnd]),
      L.marker(lnd, { icon }),
      L.polyline([lnd, mad]),
      L.marker(mad, { icon }),
      L.polyline([mad, vlc]),
      L.marker(vlc, { icon })
    ]);

    map.fitBounds(route.getBounds());

    map.addLayer(route);

    route.snakeIn();

    route.on("snakestart snake snakeend", ev => {
      console.log(ev.type);
    });
  }, [startAnimation]);

  return null;
};

如下所示，导入react传单地图包装中的包装：

const [startAnimation, setStartAnimation] = useState(false);
  const startSnake = () => setStartAnimation(true);

  return (
    <>
      <Map center={position} zoom={zoom} style={{ height: "90vh" }}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <SnakeAnim startAnimation={startAnimation} />
      </Map>
      <button onClick={startSnake}>Snake it!</button>
    </>
  );

const[startAnimation，setStartAnimation]=useState（false）；
const startSnake=（）=>setStartAnimation（true）；
返回(
蛇！
);

创建btn添加侦听器并通过标志触发动画

---

哦，非常感谢你，也许你可以告诉我如何从坐标数组中渲染L.featureGroup。。它是如此复杂：请为它创建另一个问题，因为这是一个不同的问题。我明白了，我只是创建了另一个问题，这里是链接，你可以帮助我：请阅读如何提出问题，并提供复制问题所需的所有必要细节。提供坐标数组和所需的任何其他内容。说得具体点，这样别人就能帮助你。对此我很抱歉，这是我第一次使用stackoverflow，我已经解决了这个问题。