问题标签 [react-leaflet-draw]

我有一个 React 应用程序，其中react-leaflet@2.7.0+react-leaflet-draw@0.19.0地图显示FeatureGroup包含多边形的多个组件。应用程序的右端是功能组名称的可单击列表。通过单击名称可以选择性地“激活”组，因此如果功能组处于活动状态，则会呈现其中的 EditControl。一次只能激活一个组。

我的问题

当我从一个组切换到另一个组，然后单击 中的编辑按钮时EditControl，onEditStart/Stop先前活动组的事件仍然会触发，以及新组的事件。我在组之间切换的次数越多，触发的事件就越多。

更新：

问题似乎EditControl是永远不会卸载，即使在父状态更改时它也不会被渲染。如果我向其添加随机key道具，则问题已解决，但随后会出现其他问题。

我还没有一个最小的代码示例可以分享，但是为了让您了解这里的实现是一个模式：

除了App（根组件）、MapContent（非常基本的包装器：检查组是否处于活动状态）和GroupSelector（可点击列表）之外，所有其他组件都来自react-leaflet和react-leaflet-draw。

流 点击时，GroupSelector更新状态App以设置一个activeGroupID（即“foo”），并且只有当它匹配MapContent时才会呈现它EditControlidactiveGroupID

我希望这个描述是有道理的。任何帮助将不胜感激！

我的目标是删除用户使用自定义按钮在 react-leaflet-map 上绘制的当前形状。

基本上，我创建了一个弹出窗口，用于输入工具提示，该工具提示将显示在绘制的形状上。它看起来像这样

假设在绘制形状后，用户点击了Cancel按钮。然后我希望弹出窗口和绘制的形状消失。

现在我已经实现了弹出窗口消失。所以，如果用户点击Cancel按钮，它看起来像这样

如您所见，弹出窗口消失了，但绘制的形状仍然存在。

我尝试实施此解决方案，但上述解决方案的当前版本react-leaflet无效。

因此，我们将不胜感激有关此方面的任何帮助。

我正在尝试使用 editRef （ const editRef = useRef(); ）访问 EditControl 功能，以便以编程方式访问其处理程序。不幸的是，Web 开发工具中出现以下警告：“无法为函数组件提供引用。尝试访问此引用将失败。您是要使用 React.forwardRef() 吗？”。

因此，当我尝试访问它时，我得到了不确定。

这是一个常见的警告，可以通过 forwardRef 包装解决，但在这种情况下，我不知道如何解决它，因为我无法访问 EditControl 代码来添加引用。

是否有任何解决方法可以让我访问 EditControl 组件的对象？

我尝试使用 react-leaflet 中的多边形组件从查询中创建一个圆圈。但它并没有受益于 react-leaflet-draw 提供的工具栏。如何使所述组件位于工具栏的上下文中？

在 React + Typescript Web 应用程序中，我希望能够以编程方式显示/隐藏传单绘制“绘制折线”按钮。

为了执行此任务，我对 EditControl 的绘制属性进行了操作，如本例所示（代码沙箱位于：https ://codesandbox.io/s/leaflet-toggle-button-0hbr0?file=/src/MyMap.tsx:0 -1257 )

该按钮最初是显示的，并且在单击“切换”按钮后，它正确地消失了。

不幸的是，再次按下“切换”按钮，它不再出现。

实现正确行为的正确方法是什么？

编辑：根据https://github.com/Leaflet/Leaflet.draw#user-content-example-leafletdraw-config，

您可以在初始化后使用 Leaflet.draw 控件上的 setDrawingOptions 方法更改绘图处理程序选项。

不幸的是，我也没有设法调用该方法。

任何人都可以编写一些代码来从用户那里获取输入（坐标）以在地图上显示为标记，并继续添加带有新纬度、经度的标记以及删除标记的选项。请。

我已经写了这段代码： 在此处输入图像描述

我使用这个插件在我的项目中的 Leaflet 地图上画线：

https://github.com/alex3165/react-leaflet-draw

我想在 _onCreate 或更高版本时获取绘制多段线的坐标（纬度、经度）。我怎么能这样做？