问题标签 [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.

1029 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
5062 浏览

javascript - 使用 react-leaflet 在标记内实现动态 JSX 元素

我有一个 React 应用程序，我在其中通过react-leaflet使用Leaflet，这两个都是非常有用的库。

在这个应用程序中，我有一组坐标需要渲染如下：

  1. 缩小时，将坐标聚集到标记簇中，如下所示 在此处输入图像描述

  2. 放大时，每个标记需要有

    1. 它下面有一个动态倒数计时器
    2. 像这样围绕它的动态SVG倒计时时钟 在此处输入图像描述

对于集群，我使用react-leaflet-markercluster插件，它非常适合显示静态内容。

但是当我需要在每个标记中显示任何动态内容时，我没有发送的选项，JSX只有静态 HTML 的规定可以从这里的示例中看出。

有没有办法处理这种情况？如何制作 JSX 标记而不是静态 HTML 标记？

PS：我已经尝试过使用ReactDOM.renderToString，但这是一个丑陋的黑客，每次都需要重新渲染标记。

蒂亚！！

如果您有解决方案，这里有一个示例WebpackBin供您使用

0 投票
1 回答
688 浏览

javascript - 无法读取属性 '#' of undefined , after retriving onClick Custom React

I'm building a leaflet map that dipslay markers. These markers have additional data on them besides lat and long, (keys in this case)

I'm using a custom reac

I'm building a leaflet map that dipslay markers. These markers have additional data on them besides lat and long, (keys in this case)

I'm using a custom react component from the react-leaflet repo. I can get multiple markers location, but when I try to retrieve the marker I clicked on and pass it to a child component I get

Cannot read property '# < Object > ' of undefined

I can pass ALL the data , without a problem though.

I get this error when I try to pass the "clicked" marker to the Card and Cartitle components.

What I've tried so far:

Inside the handleToggle function I did:

index = this.props.places[index]

but that is when I get the error above. What am I doing wrong?

P.D. Also, Im able to display ALL the data to the children components

How to get multiple matrices from large data sets based on year

before I start here is a a small subset of the data I'm working with, i apologize in advance for it being so large (note this is only the first 30 rows of an extremely large dataset:

This dataset represents the abundance of different species in different parks over a multitude of years. What I essentially want to do with this data is to get a species X park matrix for every year that data was recorded and then youse the 'vegan' package to calculate diversity indices for each park for each year. Obviously this is not a balanced dataset as not every park recorded species abundance for every year etc. Now I've realized to do this I need to run loops. I would need to get a list of parks per year and a list of species and their abundance per park per year in order to create these matrices. I'm not the greatest when it comes to running loops and this task is confusing me. For example, I created a separate vector of unique years in the dataset. I then created an empty list called "parkbyyear" to fill up with a list of parks by year from the main dataframe

The loop fails to run. Any help would be appreciated.

0 投票
1 回答
1687 浏览

reactjs - 从 MapLayer 组件访问地图（适用于以前的 react-leaflet 版本）

我正在尝试在传单地图上显示两点之间的路线。为此，我正在使用传单路由机。但是我将地图对象传递给传单路由组件时遇到问题。

map_container.js

路由.js

我得到的错误：

但最有趣的是 -在 "react-leaflet": "1.1.0" 版本上一切都可以完美运行，但在 1.1.1 及更高版本上它会中断。

有任何想法吗？

0 投票
1 回答
1318 浏览

javascript - GeoJSON 的自定义传单渲染器

我想以不同于默认情况下 Leaflet 提供的方式呈现 GeoJSON。不幸的是，更改style()函数是不够的，因为我需要更好地控制正在创建的矢量图形。

这样做的惯用方式是什么？我认为我可以重用在src/layers/vector/SVG.js. 但是，我只想将它替换为一个 GeoJSON 层/一个 FeatureGroup。由于这些都不是继承自Path，这似乎是不可能的。

我尝试以一种非常基本的方式扩展 SVG 类：

然后在初始化 Leaflet 时将其设置为渲染器，但这失败了TypeError: max2 is undefined（这是一个未处理的承诺拒绝，源于我使用react-leaflet）。

我错过了什么？

0 投票
1 回答
147 浏览

javascript - 使用带有 react-leaflet 的 html5 视频

我正在尝试react-leaflet使用 html5 将叠加层（在本例中为视频）添加到我的地图中。

但是传单一直覆盖视频。对我来说最好的办法是将视频保留在传单之外（尽管我知道传单中有一个视频叠加组件，但我不想使用它）

0 投票
0 回答
450 浏览

javascript - Leaflet-dvf ReactJS 实现

我正在将代码库升级到 React，但无法理解为什么传单和传单-dvf 不起作用 -ChoroplethDataLayer显示没有。

所以实际的组件代码如下：

您可以在下图中看到：第一的

Legend正确显示，但没有显示Choropleth图层，但是它是生成的，您可以在这张图片中看到它leaflet-overlay-pane

第二

如果我使用 class 从 DOM div 中删除leflet-shadow-pane，leaflet-tile-pane并从中删除leaflet-paneclass leaflet-overtlay-pane，如下图所示：

在此处输入图像描述

然后我可以看到该Choropleth层已生成并且可见，如本例所示：

在此处输入图像描述

所以我有以下问题：

1）如何使Choropleth可见且尺寸合适？（baseLayer.bringToFront() 和 zIndex 没有帮助）

2）如何正确导入leaflet和leaflet-dvf打包（它们都在“L”命名空间中）？（现在我正在做import "leaflet"和import "leaflet-dvf"）

3) 如何正确构建和导入contryData.js用于查找和渲染国家/城市/等的文件。该文件位于github 的 leaflet-dvf/src/data 中？（现在我复制了这个文件并在顶部添加了import "leaflet"）。ES6/React 中的最佳实践是什么？

4）是否可以使用react-leaflet并leaflet-dvf提供完整的示例？

0 投票
0 回答
968 浏览

javascript - 使用 React 16 在地图中将 shapefile 显示为图层

我在里面使用一个旧的（2 年）传单插件来响应加载一个形状文件（一个包含 4 个文件的 zip 文件，当在地图上显示时会绘制一个图层，通常在 GIS 上使用）

虽然插件有效（经过测试），但我想消除上传功能。只需调用我在应用程序中的 zip 文件，并使其在地图右上角的图层控制菜单上出现和消失。而已

这是https://codesandbox.io/s/34o825nz8m

我相信诀窍就在这里：

到目前为止我已经尝试过：

替换了位于此处（https://www.data.boem.gov/Mapping/Files/protrac.zip）的“./protrac.zip”的 var 文件出现错误。

更改了 reader.readAsDataURL(file)。

由于我已经删除了输入标记，因此我的意图是在 ComponentDidMount () 中运行 handleFile 函数。但我什至不能 console.log 我在我的应用程序中的 zip。

PD 如果你得到一个 createLeafletElement () 错误，这只能在 node_modules 文件夹中通过放置这一行来修复

0 投票
6 回答
42001 浏览

icons - 带有反应传单的自定义标记图标

我尝试了我在网上找到的所有东西，Stackoverflow 和 Github，但我仍然无法成功。

我想用自定义图标制作自定义标记，但是在下面的代码中，我总是遇到错误：'TypeError: options.icon.createIcon is not a function'

这是我的代码（文件夹路径没有错误，一切都在 src/js 或 src/img 中）

图标.js

MarkerPin人

真的在寻找你的帮助！

0 投票
1 回答
710 浏览

reactjs - React 中的 Google 地图未在混合视图中显示街道和城市名称

我在这里使用示例作为粗略指南。我正在尝试使用 Google Maps 实现 Leaflet.js，为图像提供基础层。一切都很好，但混合视图（卫星+地点/街道名称）仅显示卫星图像 - 没有名称。

我确实注意到，在连接不好的情况下加载它，带有名称的层会短暂显示然后被掩埋，这让我想知道这是否是 z-index 问题。

这是我的组件的相关部分：

我对 Google Maps API 有什么遗漏吗？

0 投票
1 回答
1364 浏览

reactjs - React-Leaflet-将绘图列表映射到标记

我有一个 React Leaflet 地图，它渲染得很好。

我有一个状态图列表，看起来很好（如果我查看组件状态，我可以看到它们。

每个绘图都有一个 GeoJSON 多边形属性。

我有一个自定义标记组件，它根据缩放呈现不同的效果（GeoJSON 多边形或绘图多边形中心的标记。）

我正在映射绘图列表并从每个列表中实例化一个自定义标记组件。但这不会渲染任何情节。

我错过了什么？

地图组件：

标记组件：


12345678910