问题标签 [react-leaflet-v3]

我想通过单击按钮或将鼠标悬停在按钮上在地图上创建自定义帮助 div 层。该按钮也是地图上的自定义控制按钮。这是示例控制按钮

我的自定义图层将提供地图相关信息。整个功能应该像 React 传单图层控件一样工作，

也就是说，在鼠标悬停/单击自定义控件 div/按钮时，应弹出带有地图相关信息的自定义图层。

我创建了自定义 div 层。但是，我面临两个问题。

1. 我无法在地图上定位它。我首先尝试使用“bottomleft”选项。它没有用。我的实际意图是定位在帮助控制按钮附近，就像 React.leaflet 文档中的“层控制”一样。
2. 现在，代码正在监听地图上的任何“点击”事件。我想让它特定于我的控制按钮。如何在控制层和控制按钮之间建立连接？如何将此控制按钮传递给图层？

任何帮助深表感谢。这是我的代码如下。

自定义层组件

暂时这样称呼它，

我在这个问题中使用了解决方案（在使用传单中的 react-leaflet-draw 创建新图层之前删除图层）以获得在 React 和 Typescript 地图项目中仅绘制一个形状（图层）的能力，但是我得到了cannot read propery leafletElement of undefined，我使用了传单 v1 .7.1、leaflet-draw 1.0.4、React-leaflet v2.8.3 和 React-leaflet-draw v0.19.8，我猜 LeafletElement 在新版本中被替换为替代品。在以上版本中创建新形状时，如何实现删除图层？

注意 1：我<MapContainer/>在 React-leaflet v2.8.3 中使用了组件，它是<Map />React-leaflet v2.6.0 中的组件的替代品

注意2：我无法弄清楚editableFG和e（在onCreated eventHandlerreactFGref中）和传单核心API的类型是什么，所以我使用了any

这是我的代码：

我正在使用带有 TypeScript 的 React-leaflet 版本 3 开发应用程序。在我的应用程序中，我需要为一个位置添加多个图标。例如：一个特定的 [lat,long] 位置被确定为有一个献血营地，早上 8 点有一个户外检查中心，下午 3 点，同一位置将有一个临时音乐会和一个免费食品中心。所以，一次我需要为我的标记放置至少两个图标。例如：早上的献血营和户外检查的图标。在标记标签中，图标属性允许只有一个值。

所以，我尝试了这个选项。然而到目前为止还没有运气。

我用了L.divIcon

标记标签

我面临的这个问题是，尽管 iconDiv 在地图上作为标记可见，但 svg 图标图像并未加载到 div 中。如何处理这个问题？

可能是，这是一个简单的问题，但即使它可以通过这种方式解决，这是一个好方法吗？还有其他可能的有效方法吗？因为，我的地图将根据时间（早上和下午）呈现不同的 svg 图标，我怀疑这是否是多节点地图的更快方法。

非常感谢任何想法和帮助。

我希望用户能够将传单上的位置分享给其他应用程序，如谷歌地图：

是否可以在反应传单中做到这一点？

./node_modules/react-leaflet/esm/Pane.js 25:37 模块解析失败：意外令牌 (25:37) 使用这些加载器处理了文件：

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js 你可能需要一个额外的加载器来处理这些加载器的结果。| } |

const parentPaneName = props.pane ?? 上下文.窗格; | 常量 parentPane = parentPaneName ？context.map.getPane(parentPaneName)：未定义；| 常量元素 = context.map.createPane(name, parentPane); 处理这些加载器的结果。

我目前在运行 react-leaflet v3.2.1 时遇到此错误。我目前正在使用反应 v1.0.0。和反应脚本 v4.0.3。请问我该如何解决这个问题？

当用户单击某个 Geojson 功能时，我正在尝试添加标记。我是 react 和 react-leaflet 的新手，我正在尝试使用 useState 挂钩来完成这项任务。我在这个问题上被困了几天。

这是我的App.js。我导入数据，为我的标记创建一个状态变量和设置器，并将这些项目传递给我的组件<MyData/>和<MyMarkers/>.

这是我的MyData组件，它显示 geojson 数据。它接收 geojson 数据、对象数组和设置标记状态的函数。

这是我的MyMarkers组件，它遍历标记数组，我将其作为道具传递，理想情况下在每个位置创建标记组件。（这不起作用）

我可以在地图上绘制我的 geojson 数据，但无法在单击我的<MyData/>组件时显示标记。我在这里想念什么？我的理解是，当尝试更新同级组件（<MyData/>​​和<MyMarkers/>）的状态时，需要将状态提升到一个共同的祖先（<App/>在这种情况下），这是我试图做的。如何从内部成功更新状态 onclick<MyData/>以呈现标记？

这是上面问题和代码的沙箱。

谢谢

我正在使用 React Leaflet v3.2.1。

我有一个 MapContainer 元素和一个兄弟元素（自定义侧边栏）。我想使用 useMapEvents 来触发兄弟元素中的更新。

但是，useMapEvents 仅适用于 MapContainer 的后代（而非兄弟姐妹）。有没有可能我可以在 MapContainer 的兄弟姐妹中使用 useMapEvents？

我想知道是否有人知道如何更新本教程（https://leafletjs.com/examples/choropleth/）以使用 react-leaflet v3 以及 react 函数组件。我无法工作的部分是当您将鼠标悬停在图层上时重置 GeoJSON 样式，以及在您单击图层时放大图层。这是我现在拥有的代码（我现在不太担心教程的实际着色部分）。另外，我一般对 react 或 JS 不太擅长，所以如果您发现任何不好的做法，请向我指出！谢谢！

我对 react-leaflet 和 react 比较陌生，并且在我的地图上绘制新组件时遇到了麻烦。我已经被困了一个星期了，所以希望有人能帮忙。我正在尝试从地图上的功能组中清除组件（图层？），然后通过更改父组件的状态来呈现新组件。

在位于此沙箱的最小示例程序中，我有一些组件：

Map包含地图状态、标记、查询数据、地图边界和选择框值的父组件

Select这是一个下拉菜单，用于设置featureNum选择框值更改时的状态。

Line这是一个 Geojson 功能，它从datastate 接收数据并设置markers. 存在于特征组中。

Markers它使用 的状态创建标记特征markers。存在于特征组中。

在地图的初始渲染之后，当featureNum更改状态时，geojson 数据通过我的组件fetch中的 API异步获取。Map新接收到的数据的边界是根据解析计算的，并且使用状态设置器设置data和bounds设置的状态。使用 useRef 挂钩清除功能组，并.clearLayers()

但是，设置Line后，地图上不会出现新组件data。地图飞到组件应该出现的新边界。我尝试将功能组的 z-index 设置为 9999，但这也不起作用。

从Select组件中选择特征时， 如何清除特征组的地图并在地图上显示新Line组件？谢谢！

我正在使用 react-leaflet 和 leaflet.markercluster 创建自定义 MarkerCluster 组件。这个想法是将标记作为子级传递给 MarkerCluster 组件。标记也是 React 组件。我想动态更新我的标记，这意味着将删除一些标记并将其添加到标记数组中/从标记数组中添加并呈现为子项。LocationMarkers 是一个 JSX.Elements 数组

删除标记会从地图上直观地删除它，直到我重新添加它。之后出现两个标记而不是一个。集群图标也显示错误的计数，从不减少，一直在增加。提供的代码是预期的行为吗？我尝试在每次更新后使用 new L.Marker() 清除图层并创建标记并且它有效，但我想保留在 Map 组件中渲染的标记并将它们作为子标记在 MarkerCluster 标记之间传递。

PS 我已经看到像在每次渲染时为 MarkerCluster 组件提供唯一键这样的解决方案，因此它会完全重新渲染，但这会使所有地图闪烁片刻，我想这不是提高性能的最佳方式。