问题标签 [react-leaflet]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
15130 浏览

react-leaflet - 弹出窗口始终在标记中打开

有什么办法弹出窗口始终保持打开状态?无需点击即可打开。

预期行为

https://monosnap.com/file/mPkuSTmPAfwxTxY99YQVA5m96Zolow.png

实际行为

http://take.ms/cUej0

0 投票
1 回答
1087 浏览

popup - react-leaflet 弹出窗口不起作用,鼠标悬停时光标不会改变

我正在使用 react-leaflet,并且可以让市场出现。只是不工作。

我只是简单地复制了示例代码。会不会和其他包有冲突?或者我是否需要特定版本的传单、反应和反应域才能使其工作?

鼠标悬停在地图上时,我的光标不会改变。

我已确保我拥有正确的 css,以便正确渲染地图和标记。

任何帮助将不胜感激,我对此很陌生,所以这可能是一个愚蠢的错误。

0 投票
1 回答
2771 浏览

javascript - 如何用自定义组件替换 React-Leaflet Popup?

我在一个项目中使用 React-Leaflet 和 (callemall)Material-UI。我正在尝试在<Popup></Popup>React-Leaflet 的组件中呈现 Material-UI Card 组件。我尝试将其作为组件拉入弹出窗口,但弹出窗口并没有让组件按应有的方式工作。具体来说,卡片组件有一个按钮元素可以扩展它,但不幸的是,弹出窗口不会让我点击它。我确定我需要覆盖一些 CSS-y 的东西,但我认为更简单的选择是用我自己的组件替换弹出组件,但我不知道如何去做。任何见解都非常感谢:)

我的代码如下所示:

导入的组件看起来像:(我删除了样式和不重要的细节以使其易于阅读)

0 投票
2 回答
2123 浏览

reactjs - React-leaflet 如何重置样式

我正在关注 Leaflet 的 Choropleth 教程
http://leafletjs.com/examples/choropleth.html 并使用 react-leaflet。我设法在没有对原始源代码进行任何修改的情况下设置样式并且它可以工作。

该图层具有 setStyle 属性。现在重置我遇到问题的样式。

我试图访问它

resetHighlight(e) { this.refs.geojson.resetStyle(e.target); }

在拥有 GeoJson 的同时

但它没有 resetStyle 属性

任何人都可以提出另一种重置 react-leaflet 样式的方法吗?

0 投票
0 回答
218 浏览

leaflet - 在地图上的矢量切片中为多边形着色

我有一个与人口普查网站上的块相对应的 GeoJSON 文件。我想将它们显示在地图上,并根据存储在 PostGIS 数据库中的各种数据确定它们的颜色。由于块是如此之小,我想使用一个瓦片层只为客户端提供必要的数量,因为整个数据集太大(300+ MB)。

有没有办法根据客户端或服务器端的相应数据点单独为多边形着色?我将所有多边形及其相应的数据点存储在 PostGIS 数据库中。我正在使用TileSplash检索多边形并提供一个矢量平铺层,然后由传单(react-leaflet)渲染。这可能与矢量切片图层有关还是我需要使用栅格切片图层?

0 投票
1 回答
1368 浏览

react-leaflet - 多个弹出窗口始终打开

我想在地图加载时打开地图上的多个弹出窗口,我有这个答案的示例适用于一个弹出窗口:

弹出窗口始终在标记中打开

但是当我有多个弹出窗口时,只有一个在加载时打开,打开一个关闭另一个 - 在传单文档(http://leafletjs.com/reference-1.0.0.html#popup)中,它建议使用 addLayer 来避免这种情况但我不知道如何在 react-leaflet 中重新创建它:

https://jsfiddle.net/37uo2cp5/

0 投票
2 回答
1057 浏览

javascript - 如何在嵌入式组件中从父级应用一次上下文并更新子级?

我想MarkerCluster从上下文初始化一次创建带有传单地图的可重用组件,然后提供嵌套地图组件的更新。我需要将它不直接嵌入到MyMap组件中以执行动态操作react-router,但是嵌套标记MarkerCluster何时shouldComponentUpdate === false不会更新。我发现这个问题可能与问题有关,但在我的情况下我没有找到解决这个问题的方法。我仍然相信有比将 shouldComponentUpdate 设置为 true 更好的解决方案。你能解释一下我的两个例子之间的行为差​​异吗?或者,MarkerCluster以 React 方式构建没有上下文的可重用组件是否是一个更好的解决方案?

演示:

为什么下面的示例有效,而上面的示例无效?

0 投票
2 回答
2627 浏览

javascript - React-leaflet:如何调用像 resetStyle 这样的 GeoJson 方法?

我正在关注 Leafletjs 的交互式 choropleth 地图示例,我试图通过使用 GeoJson 对象的 resetStyle 方法和 Map 对象的 fitBounds 方法来添加交互。在传单中,这些方法是通过对各自对象的引用来调用的:

如何在 react-leaflet 中访问这些方法?从用户交互返回的对象中不存在这些方法。我也尝试从 react-leaflet 导出它们,但这也不起作用。

这是我的jsfiddle

我知道一个月前有人问过同样的问题,但是 access 的解决方案this.refs.geojson.leafletElement.resetStyle(e.target)不再起作用,因为它refs不是.e.targetthise.target

0 投票
3 回答
7671 浏览

twitter-bootstrap - 反应传单没有正确呈现

地图未react-leaflet正确渲染。

  • 地图在其父边界之外渲染
  • 地图的某些图块丢失

将地图与标准react组件一起使用时会出现问题。

我的网站也使用react-bootstrap. react-leaflet正如我所读到的,这可能会导致渲染方式出现一些潜在问题。

这被渲染

0 投票
1 回答
1937 浏览

reactjs - 反应传单标记层未在缩放时更新

react-leaflet-marker-layer放大/缩小地图时不会更新。

它保持不变,而地图内容更改其缩放级别。

这在使用鼠标滚动和 +/- 按钮进行缩放期间都会发生。

注意:这可能是相关的,我注意到地图渲染非常慢,并且一些图块需要很长时间才能加载。放大/缩小有助于立即加载它们。

组合截图