问题标签 [react-leaflet-v3]

我已经导入了 Leaflet 模块以及一些删除图标的代码。

标记图标位于我的图像文件夹中。我也试过直接要求：

但我仍然得到一个坏掉的标记。

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

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

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

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

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

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

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

我正在寻找一种方法来连接传单事件tileload或tileloadstartreact-leaflet (v3.1.0)。但是，它们在 useMapEvents() 中不可用，也不能在 TileLayer 组件中访问。

知道我可以在哪里吸引他们吗？我正在尝试在地图更改时重新加载标记（movestart、moveend 等不精确）

背景

对于 React Leaflet v2，有一个 NPM 插件react-leaflet-control，它允许您创建任何类型的控件并将其放入 react-leaflet 控件容器中。显然，随着 RL-v3 的引入，随着 API 的变化，这在 v3 中不再适用。我想创建一个自定义控件包装器，以允许我在其中放置任何类型的 React 节点。

当前状态

我目前的代码有效......但没有。我从 Stack Overflow 帖子中的示例中提取：React Leaflet V3 Custom Control，它让我获得了创建自定义控件的 99% 解决方案。但是，我的用例是地图上的工具栏，带有可交互的按钮（用于指定活动工具的颜色）。但是，使用此代码，我具有该功能，但是由于每次渲染都会创建一个新控件，因此工具提示会在丢失其锚元素时闪烁。

期望的行为

我想要一个工具栏，允许用户选择工具以在地图上执行操作（想想老派leaflet-draw。为了提供反馈，我希望按钮在工具处于活动状态时更改颜色，对于 UX，我希望工具提示来描述操作的按钮。

实际行为

存在工具栏，用户可以选择工具，并且有UI反馈，但是，由于在选择工具时删除控件并重新添加了控件，因此该工具提示将丢失其锚元素。

代码沙箱

https://codesandbox.io/s/react-leaflet-custom-control-n1xpv

在我的传单地图中，单击标记会打开其弹出窗口并立即将其关闭。

地图事件的记录表明，popupopen单击标记触发了 2 个事件，而不是仅触发一个事件，popupopen然后popupclose是相同的标记。

这种行为是半一致的：

• 当您只单击标记而不拖动鼠标时，就会发生打开+关闭。但是，如果您单击标记并将鼠标移动几个像素（< ~30px），则弹出窗口现在可以正常打开（并且仅popupopen触发一个事件，而不popupclose跟随它）。
• Open+close 仅​​在 Mac 和 iPhone 上的 Safari 中可靠地发生。它有时也会在 Mac 上的 Chrome 中发生，并且当它发生时 - 它在测试会话期间是一致的。
• 这只发生在我的 2 个地图页面之一中，它们使用一个通用地图组件（一个用于移动设备，一个用于桌面）。显然这是开始调试的好地方，但是尽管调试了很多小时，我还是无法缩小它们之间的相关差异。

我调试了popupclose事件的来源，惊讶地发现里面的_openPopup函数src/layer/Popup.js:473被调用了两次。此方法最终会调用this.closePopup()第二次调用。

请注意确定它是否相关，但是查看click地图上的事件，我在 Safari 中看到每次鼠标单击都有两个这样的事件，它们都有一个原始事件类型MouseEvent。在 Chrome 中，当一切正常时，只有一个原始事件为PointerEvent.

我怀疑这可能与#7255有关，但不幸的是，建议的设置tap为 false 的解决方法没有帮助。

任何想法可能是什么原因以及如何解决它？

通过 react-leaflet 3.2.1 使用 Leaflet 1.7.1。

我在我的反应应用程序中显示带有反应传单 v3 的地图。

我只想添加一个自定义控件，但我不知道这样做的好方法是什么。

实际上，我就是这样做的，但它似乎不起作用。

我有这个错误，

当我尝试将 LeafletProvider 导入我的组件文件之一时，如下所示：

我相信我已经安装了最新版本的 react-leaflet (v.3.2.2) 并尽可能多地阅读了文档，但我没有在其中看到 LeafletProvider。

希望有人能帮我弄清楚该怎么做。基本上，我只是希望能够在两个或多个传单地图切片图层之间进行更改。

背景

标题可能令人困惑，但为了解释，我将切片与 Redux Toolkit 一起使用以管理状态。这些切片为我的地图应用程序保存各种状态值。具体来说，我在渲染方面遇到的两个问题是单击位置（称为focusedPosition鼠标坐标mouseCoords）。这些切片中的每一个都包含一个lat和lng值。使用react-leaflet，我有地图事件，focusedPosition每当用户单击地图以显示弹出窗口时，它们都会更新。我还有一个事件来捕获mouseCoords要显示在地图一角的事件。但是，由于某种原因，任何订阅focusedPosition更新的组件都会在鼠标移动时重新渲染——即使它没有订阅mouseCoords. 这会导致多个问题，包括性能问题以及映射弹出窗口闪烁，因为它们会在鼠标移动时不断重新渲染。如果我在 react-leaflet 中注释掉mousemove事件，问题就会停止，因为该值不再更新，但这不是一个选项，因为我真的需要捕获这些鼠标坐标。

我怎样才能确定为什么这两个值会以某种方式联系起来，我该如何解决这个问题？

适用的代码如下，以及一个代码沙箱

store.ts

聚焦位置切片.tsx

mouseCoordsSlice.tsx

模块解析失败：意外令牌 (3:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。见https://webpack.js.org/concepts#loaders | / 所需款式/ |

.传单窗格，| .传单瓷砖，| .leaflet-marker-icon,

我尝试了很多解决方案，但没有任何改变我被困在这里 3 小时

我有以下代码呈现 React Leaflet v3 地图并允许用户通过单击地图上的各个点来构建路线。总路线距离显示在地图下方。

可以在这里找到一个 StackBlitz 。请注意，标记无法在地图上正确呈现，但这对于演示目的而言无关紧要。

使用这种方法，我distance在顶级组件中使用useState并传递一个处理程序来更新组件的总距离Route：

其中定义的点击处理程序useMapEvents更新route状态（存在于Route组件中），并且还调用updateDistance通过传递的函数props：

当点被添加到路线时，我可以看到updateDistance（因此setDistance）被调用了两次。在上面的 StackBlitz 中打开控制台查看输出。

route我可以通过在顶级组件中定义状态并将其传递给组件来“解决”该问题，Route如StackBlitz 所示。虽然这可行，但我在组件route内定义状态和顶级组件中的状态背后的基本原理是，顶级组件只需要知道距离而不是实际路线的细节。Routedistance

我试图理解为什么第一个 StackBlitz 的行为如此。我不相信我在任何地方都在改变状态，并且总是为 theroute和distance状态返回一个新值，而且我还在使用setState状态更新需要使用前一个状态的值的功能版本。