问题标签 [react-map-gl]

Trying to work with react-map-gl but can't get the simplest lib example to work. As soon as I try to render the map I get this weird error in console I'm unable to understand:

Sometimes it changes to this:

The map frame with mapbox logo renders but nothing else.

I'm on Rails 6 with those packages:

My code :

Googled the error the whole afternoon but found nothing.

我只是使用来自 react-map-gl 的开箱即用的“GeolocateControl”组件，它在我的电脑上完美运行。但是，当我按下地理定位按钮时，在我的手机上没有任何反应？我在移动设备上的浏览器有权访问位置，但没有像 PC 上那样要求显示位置权限的弹出式节目。我试过使用 Chrome、Firefox 和默认浏览器。

我试过使用 Chrome、Firefox 和默认浏览器。在我的 iPad 上它也不起作用，只有在我的电脑上它才能正常工作。

期待它把我带到当前位置并像在电脑上一样在屏幕上放置一个蓝色标记。

我正在使用 react-map-gl 和 deck.gl 编写一个 Web 应用程序，我的挑战是正确设置鼠标事件。

如果我在deck.gl 上使用react-map-gl，deck.gl 图层不会收到我的鼠标事件，如果我反过来，react-map-gl 图层不会收到事件。

这是我正在使用的层/叠加层的简化列表（自下而上）：

1. react-map-gl 底图（使用 MapGL 反应组件）
2. 带有 PathLayer 的 deck.gl 用于显示我航行过的轨迹
3. react-map-gl 帆布覆盖，用于显示帆船位置标记，包括船速、风速等
4. react-map-gl HTML 叠加层，用于在轨道上放置可点击的图像缩略图

如果我像上面那样排列它们，可点击的图像缩略图可以工作，但deck.gl PathLayer 不会收到任何鼠标信息。

如果我反其道而行之，并将 MapGL 作为 DeckGL 的子项，则 PathLayer 可以正常处理事件，但我无法再单击图像缩略图。

将它放在一起的正确方法是什么，以便 react-map-gl 和 deck.gl 都允许交互？

我有一张从视口坐标获取用户位置的地图，然后它使用这些坐标从 API 中获取标记。问题是我的标记只有在我移动地图后才会出现。我对我缺少的东西感到困惑：

然后我的函数来确定用户的位置：

然后我从我的 API 中获取标记：

最后是标记：

然后当我调用地图时：

我得到了地图，但我没有得到标记。有人可以指出我正确的方向吗？我认为问题在于我对 Promise 和组件生命周期的把握不牢，但老实说，我一直无法弄清楚这一点。我在这里粘贴了完整的（凌乱的）代码：https ://pastebin.com/j8dzYAsk

我添加了一个 div 和 dropdwn，在每个选项上我都使用 reactjs 中的 addDatatoMap 上传了 geojson 数据。每次我选择该选项时，都会上传相应的图层，但我无法删除以前的图层，因此任何重置/清除地图图层的代码或示例

当单击地图区域时尝试使用纬度和经度从 API 获取时遇到问题。初始地图加载很好，来自 API 的数据按预期显示，我可以确认 geoLoc 数组状态正在更新 onClick，因为控制台日志显示了这一点。但是，由于某种原因，即使 geoLoc.latitude 和 geoLoc.longitude 的状态都在变化，API 也不会更新。这有什么原因吗？任何帮助将非常感激！谢谢

我正在尝试在 React Map GL（地图框）和 Deck GL 中创建一个矩形或六边形的网格层，覆盖整个国家。

这就是我想要实现的目标：http ://webcoveragemap.rootmetrics.com/en-US

这些是我找到的解决方案：

1. https://deck.gl/#/documentation/deckgl-api-reference/layers/s2-layer
2. https://deck.gl/#/documentation/deckgl-api-reference/layers/h3-cluster-layer

我面临的问题是 s2-layer 使用 S2 Cell 令牌（我似乎无法理解如何计算，同样 h3-cluster-layer 使用 H3 并且我也找不到任何代码示例反应。所以任何人都可以向我解释如何使用 H3、S2 并计算可以在 React Map Gl 和 Deck GL 上查看的 50 平方公里的盒子（如果需要）。或者建议另一个解决方案？

有没有办法将一个状态的状态设置为另一个状态的状态？例如下面在_updateData()...单击geojson状态获取状态newGeojson？目标是能够更改data={geojson}单击按钮（在示例中未显示 Geojson 文件，但假设它们存在于 GeoJSON 和 newGeojson 中。我从 firebase 中提取 JSON，然后在 componentDidMount 中将其转换为 GeoJSON 以创建 geojson状态）。谢谢您的帮助。希望我以正确的方式接近这一点。

我在 React 中使用 useState 挂钩，并且在触发 onClick时geojson不会更新状态。我认为 useEffect 正在覆盖函数中 onClick 更改的更新。为了更新状态，我在这里缺少什么？我使用 useEffect 的目的是让初始 goejson 加载。谢谢你的帮助。正在使用的 Mapbox 库：https ://uber.github.io/react-map-gl/#/<source data={geojson}>_updateDatageojson_updateData{geojson}

当函数size.value触发. 例如，假设开始的 defaultValue 选项为“All”，为空...该选项更改为“Medium”，为“All”...该选项更改为“Large”，为“Medium”。 ..等等。最初我希望该函数在选择“All”的情况下运行 onload 也不起作用，它会引发错误 Cannot read property 'target' of undefined on 。我在这里做错了什么？谢谢您的帮助。_updateData<select><select>locationslocationslocations_updateDatasetSize({value: event.target.value})