将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 ])} />

如果我能让它们像前面提到的插件那样“蛇行”，那就太好了。但是，由于我的Polyline是作为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方法，才能使用向地图添加折线和从地图中删除折线的不同签名。