将 Leaflet.Polyline.SnakeAnim 与 react-leaflet 集成

Question

我想知道如何集成 Leaflet.Polyline.SnakeAnim (https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim) 和 react-leaflet (https://github.com/PaulLeCam/react-leaflet) Leafletjs 插件。

我有一个 React 应用程序，它使用 react-leaflet 在 DOM 中显示一些折线。像这样：

<Polyline weight={4} color={ intToRGB(hashCode(session['session_id'])) } positions={session.waypoints.map(waypoint => [ waypoint.lat, waypoint.lng ])} />

如果我可以对它们进行动画处理，让它们像上述插件允许的那样“蛇行”，那就太好了。但是由于我的折线是作为 React 组件实现的，所以我看不到如何为它们提供此功能。

我真的很喜欢使用 react-leaflet 语法，如果我不得不将我的应用程序移植到 VanillaJS 来实现这个功能，那就太可惜了

感谢任何帮助！

https://github.com/caseysiebel/map-express/blob/master/client/components/Map.js

Answer 1

我认为如果您制作一个调用snakeIn 方法的自定义组件是可能的。您应该能够创建react-leaflet's Polyline class 的副本。在副本中，您将导入 Leaflet.Polyline.SnakeAnim 并修改 createLeafletElement 函数。我认为您可能还必须覆盖从 MapLayer 类继承的 componentWillMount 和 componentWillUnmount 方法，以使用不同的签名向地图添加和删除折线。