问题标签 [react-leaflet-v3]

我正在尝试使用传单标记方法绘制大约 50K 点，但由于需要时间渲染和内存，这是不可能的。我看到的新方法是使用 Leaflet-canvas 在屏幕上绘制点而不是在 DOM 中。如何在 React 传单 3.X 中执行此操作。我试过 https://www.npmjs.com/package/react-leaflet-canvas-markers 但它不支持传单的V3。

有什么建议吗？

我绝对爱反应传单！我正在使用它为 next.js 驱动的站点上的天气警报生成底图。我公司要求服务器只能在 Intranet 上。因此，对于公司以外的员工，我正在发送一封电子邮件以获取特定警报，并希望包含带有警报功能的地图的 PNG 附加图像。我已经深入研究了leaflet.print 和leaflet.image，但似乎都需要人工交互才能按下按钮以保存图像。当警报通过电子邮件发送给收件人时，我希望自动完成此操作。我了解可能需要使用 View/DOM（浏览器）。但是，出于自动化原因，我可能希望这发生在后端（node.js）上。有没有什么可以做我正在寻找的东西，或者，对 DOM/View 的需求是否会使其变得困难或不可能？提前致谢。在提出可能重复的问题之前，我通常会尽可能多地进行研究，但我被困在这里

我正在尝试在画布上添加地图并使用 react-leaflet 库 v3.X 将图块放在那里。目前瓷砖显示为<img>HTML。在最新版本的 react-leaflet 中没有 Map 对象，只有 MapContainer 对象。所以我不能将属性 preferCanvas=true 添加到 MapContainer。值得注意的是，在旧版本的 react-leaflet 中，有带有 preferCanvas 选项的 Map 对象，但后来它被删除了。我认为存在另一种将地图添加到画布的方法。请帮忙。

我正在集成/包含react-leaflet-editable到我现有的项目中，该项目 100% 依赖于react-leaflet v2.8.0. 我目前无法升级，因为它需要对整个项目进行太多更改。我们目前买不起的东西。（当一个人可以改变所有人时，为什么要为一个人改变一切。是的，我们可能有一天会这样做，但不是现在）

所以这里是下面的代码。它可以完美地工作，react-leaflet v.3.x但是当我切换到“2.8.0 版”时，它就可以正常工作了。

我尝试过的；Map被重命名为MapContainerin3.x所以我改变了它，但问题就变成了whenCreated={setMap}参数。我需要一种方法将其链接到ReactLeafletEditable. 或者至少我认为这是问题所在。

我希望我已经解释得很好。代码和链接如下。

链接到 3.0 中的项目：https ://codesandbox.io/s/react-leaflet-editable-z7tnq?file=/src/App.js

链接到react-leaflet-editable：https ://www.npmjs.com/package/react-leaflet-editable

PS：您可以react-leaflet将侧面的版本切换到 2.8.0 查看行为。

谢谢大家的支持

我能够使用 const map = useRef (null) 获取地图参考，但现在我需要在启动地图时打开一些弹出窗口；

但是，如果您想使用此引用来定义应用程序开始打开时我想要的一系列弹出窗口，在我的情况下，那些满足条件 place.name === 'A'

我有一个谷歌层（baselayer）GoogleMutant 并想更新它的选项。我试着

这会更新图层选项，但Points of interest仍在地图上。有没有办法更新选项并将它们应用到基础层？谢谢

这是一个谷歌突变的例子https://jsfiddle.net/benderlio/2m4c01w6/10/ 有一个按钮“删除 POI”，我想用传单 API 从当前层删除所有 poi

嗨，我想知道是否有办法限制您可以移动地图的数量，这样您就无法到达地图之外的灰色区域。例如，将地图的初始视图设置为您可以缩小的最远位置，并且该地图根本不会移动。但是，当您缩放时，您只能将地图移动到地图的边缘。谢谢。

我只想捕捉地图上的点击事件。我要么找到在 v3 上不起作用的 v2 示例，要么在普通传单上工作但在 REACT-leaflet 中不完全工作的非常清晰的示例。react-leaflet 上的文档没有解释这些示例，所以我不知道这里发生了什么，如果有人可以解释一下，这对我来说意义重大。

我的问题是：1-如何在地图上捕捉点击事件，而不是在标记上。这段代码的解释是什么：2-“map.locate”做了什么3-以及locationfound是什么

该示例显然有效，但由于我不明白如何，我无法修改它以满足我的需要。有没有办法更新和扩展文档？我对此感到非常疲倦和沮丧。请帮忙。（代码取自https://react-leaflet.js.org/docs/example-events）

按照高级组件工厂的官方参考来更新控制组件的道具

核心 API 导出其他可以以类似方式使用的高级组件工厂。

我模仿了这个例子 - 但我收到以下语法错误：

缺少分号。(35:25)

33 | 返回 34 | {

35 | 实例，上下文：{ ...上下文，overlayContainer：实例}
| ^ 36 | }

如果我将其更改为：

编译器很高兴，但组件永远不会更新。

我知道我错误地创建了控制组件，但我找不到正确实现的信息。

相关：
如何在 React-Leaflet 3 中使用 Leaflet Routing Machine？
如何在 react-leaflet v3 中扩展 TileLayer 组件？

TLDR；有没有办法使用 react-leaflet 和 react-leaflet-markercluster 从标记簇中清除所有标记？

编辑：是的，有！正如@SethLutske 推荐的那样，我刚刚向 MarkerClusterGroup 添加了一个关键道具。现在，每次重新渲染地图时，之前的标记都会被删除，只剩下新的标记。

我在我所在州的公安机关工作。有一个 API 可以从我所在州的所需城市获取监控摄像头的集合。我正在使用 React PWA 来检索这些摄像头的图像，因此警察可以使用我的应用程序进行实时监控。警察在系统中进行身份验证，使用表格按城市过滤摄像机，结果显示在地图中，地图上带有指示每个摄像机位置的标记。触摸标记时，会显示一个弹出窗口，其中包含该摄像机的信息和一个按钮，触摸时在新页面中显示摄像机图像。

地图标记和弹出窗口

我选择 Leaflet 和 react-leaflet 进行地图渲染，并选择 react-leaflet-markercluster 来对彼此相邻的标记进行分组。我有一个小问题：如果用户按城市过滤相机，然后他返回表单并决定按不同城市过滤，我想要发生的行为是：

• 清除上一个被过滤城市的所有标记；
• 显示当前城市的所有标记；

但实际情况是这样的：前一个城市的标记仍保留在地图中，但弹出窗口为空。

来自不同城市的标记组

我的目标：我想在添加新城市的标记之前清除过去的城市标记！

这是我的 MapContainer。尽管我提到了错误，但它工作得很好。

我尝试使用此功能，但它没有按我的意愿工作。它会破坏地图，使其完全空白。

我在这里搜索并接近解决方案：我能够通过使用 Leaflet 的核心 API 并留下 react-leaflet-markercluster 包装器来清除过去的城市标记，如this answer所示。在向 MCG 添加新标记之前，我确实执行了 clearLayers()，这样就可以了。这是我试图做的：

通过这样做，我无法在 Popup 中注入 JSX，也无法使用 react-router-dom 中的 Link 组件。我也无法将相机对象保存在上下文中以在下一页中进一步使用它。因此，尽管存在“无法清除过去的城市标记”错误，但我最终还是坚持使用当前的代码，这是有效的。

所以我想在使用 React 组件用于 Leaflet map 和 Marker Cluster 时有一种方法可以清除过去的城市标记。如果 MarkerClusterGroup 有一个钩子，就像 Leaflet 地图有一个钩子一样，我想这会更容易做到：我需要做的就是这样简单的事情：

但是，据我所知，react-leaflet-markercluster 中没有钩子。