问题标签 [react-leaflet]

我正在尝试检索地图上具有某个固定半径的圆的 GeoJson 数据。我不明白如何从地图中检索 GeoJson 数据对象。根据文档，使用 FeatureGroup 应该会有所帮助，但我无法理解如何在 React 中实现它。提前致谢 ！

我正在使用 Leaflet 和 React 构建一个小型反应应用程序，用于显示维也纳的不同地铁站。

我遇到的问题是如何在 react-leaflet 中编辑各个地铁线路的颜色。不同地铁线路的地图图像。 现在它们都是红色的，我想用圆圈的颜色自定义颜色。

每个地铁站的颜色、名称和坐标都在 GeoJSON 文件中进行编辑。

GeoJSON 文件 ( vienna_metro_lines_byLines.geojson )

组件文件

泰。为了你的时间。

通过 API 调用，我得到 GEOJSON data (points) 。我立即使用 circleMaker 在传单地图中显示该数据，并将它们全部显示为一种颜色。然后，我为用户提供滑动滑块的选项（触发动作，有效负载为滑块值/位置）。我想要做的是改变一些圆圈的颜色（即那些具有低于滑块值的属性的圆圈）。如何在不重新渲染所有圆圈的情况下做到这一点？

示例：（所有圆圈均为绿色，滑块值为 0，然后我将滑块更改为 4，并且所有值（我从 GEOJSON 功能获得）低于 4（滑块值）的圆圈将颜色更改为红色，其余的保持不变。

示例代码：我有一个 GEOJSON 组件：

^ 数据是一个 GEOJSON 对象，所有点都具有“分数”的特征

这是pointToLayer：

在另一个组件中，我有一个滑块，每次更改时都会调用 handleChange：

然后这会触发一个动作，然后触发一个对状态进行适当更改的减速器（即，它使状态滑块值更改为用户刚刚更改的滑块中的值。

react-leaflet我在我的项目中集成了create-react-app脚本创建。我按照这个例子。

一切正常，但是当我尝试使用GeoJson导入的组件时：

我有以下警告。

warning.js:35 警告：React.createElement：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。在 index.js:47 检查您的代码。

和错误

未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出您的组件。检查渲染方法Leaflet

而且我在地图上看不到该地区。

如何解决这个问题？谢谢 。

在我的旧传单应用程序中，我使用此代码来旋转图标，并且效果很好。现在，我正在尝试将代码移动到 react-leaflet 但无法弄清楚如何应用它。我知道这应该可以通过自定义组件实现，我尝试在 RotatedMarker 上创建某种类型（基于 src 中的 Marker.js），但是由于我对这一切都不熟悉，所以我无法让它工作......任何人都可以指出我正确的方向？

谢谢，

亚历克斯

我正在使用 react-leaflet 并想要一个自定义标记图标。React-leaflet 可以使用 Leaflet.Icon 对象来显示自定义标记图标。所以我 NPM 安装了传单，并添加了import { L } from 'leaflet';.

然后我补充说：

到我的渲染方法。

但我不断收到以下错误Cannot read property 'Icon' of undefined。

为了实现自定义标记图标，我还尝试了以下方法：

但又出现Cannot read property 'icon' of undefined错误。

关于我做错了什么的任何想法？

我的版本：反应：16.0.0 反应传单：1.6.6

我试图将图层控制器添加到我的地图中。有两层，每层都包含多个标记。这是我尝试做的一个例子。

在此处运行代码：https ://www.webpackbin.com/bins/-Kvmu5PPSjeS4lY-qe_E

问题是渲染后，列表中应该只有两层。目前，我看到每个图层中的每个项目都显示在列表中。我认为原因是因为我将标记推送到数组并返回它。但是，我不确定我可以采取什么解决方法来仅显示每层一个列表。

我有一个“第一个”项目试图使用 react-scripts-ts 和 react-leaflet。

我正在尝试创建以下类，看起来 ti 应该是直截了当的：

我得到的错误相当于

'Readonly<{}>' 类型上不存在属性 'lat'

关于将 lat 和 lng 分配到位置 (TS2339) 和类似地

类型 'any[]' 不可分配给类型 '[number, number] | 纬度 | LatLngLiteral | 不明确的'。

关于将位置分配给中心（TS2322）。

据我所知，这是/已连接到打字稿版本，但我相信我有一个足够新的版本，这不应该是这种情况。

包.json：

我尝试将位置定义为[Number, Number]，我应该给它一个不同的类型注释吗？

没有打字稿的概念证明可以在这里找到

我正在使用 react-leftlet 在许多县显示标记。如您所见，我正在映射大约 53K 标记。问题是，在我渲染这些标记后，网页实际上无法使用并且经常冻结。有没有办法绕过这个传单限制？有没有更好的方法来显示这么多标记？我使用 GeoJson 作为数据源。这就是我呈现这些点的方式：

这是 pointToLayer 函数：

}

使用热图更新：

这是我的代码：

我的目标是让地图的高度为 100 像素，宽度为 100 像素，所以我写了这个 CSS 样式：

现在，问题是传单返回了一个扭曲的图像。我做错了什么？