问题标签 [react-map-gl]

我是 React 应用程序开发的新手。我正在尝试创建一个使用react-map-gl库中的ReactMapGL类的反应应用程序。这会渲染地图（我创建了地图组件）。我想在此地图上向页面右侧显示一个输入表单（我创建了 SampleInputForm 组件）作为覆盖。我正在使用 material-ui 框架进行前端 UI 设计。以下是代码片段：-

这会在页面下方的 mapbox 区域之外显示表单。如果我在我的地图组件中使用Sampleinputform作为子组件，那么它可以正常工作，并且我会在页面右上角的 mapbox 顶部获得一个输入表单作为叠加层，下面是代码片段：-

我在第一个代码片段中遗漏了什么，因此我不需要在 Map 组件中传递表单？

我有以下 geojson 点，它们将是地图上的公共汽车：

它的层如下：

而不是 'circle' 我想使用 'symbol' 类型并设置一个图标。据我所知，它需要一个来自地图样式精灵图标集合的名称。我现在不需要制作自定义精灵，我想我会对默认的巴士图标感到满意，深色地图框地图肯定有精灵，但我不知道如何找到它。我在哪里可以看到图标列表及其精灵名称？以及它包含的 png 和 json 文件。来自 Uber Open Source 的 sprite 示例

我在渲染大量标记时遇到问题。每个标记都显示为 SVG。一切都很好，直到标记的数量增加到超过 1000 个。地图开始滞后，放大或缩小时有延迟，甚至移动地图。正如我从这篇文章中看到的：React-mapbox-gl 中的样式标记/功能？

有没有其他方法可以在不从 react-map-gl 更改为 react-mapbox-gl 的情况下顺利渲染和交互？因为 react-map-gl 中不存在 Feature 组件。

谢谢回答我的问题。

我有一个 DeckGL 组件，我将它放在一个 div 标记中并赋予它大小，但 deckGL 层似乎占据了整个视口。这是我的代码片段。

如何在给定大小的特定 div 中渲染甲板 gl 组件。

我在尝试加载两个不同颜色的不同 s 时指定了两个<Source>元素。当两个 s 都存在时它不起作用，因为它隐藏第一个 (id: ) 并显示后者 (id: )。ReactMapGLFeatureCollectionSourcemaps-with-yieldmaps-without-yield

以下警告也为第一个打印Source。

我们不允许使用多个来源还是我在这里做错了什么？

注意：属性yield始终可用，因为我已经打印了数据集map和mapWithoutYield数据集并进行了检查。

我正在尝试将 geoJSON 点添加到我的 ReactMapGL 但它似乎没有呈现......控制台也没有任何错误

我的代码如下

我目前的输出是

我的预期输出是这个（来自 mapbox Studio）

有人可以帮帮我吗？我似乎找不到太多关于此的信息

我的代码生成一个输入字段，允许用户输入要搜索的值。然后当他们点击 Submit 按钮时，它会导致 displayMap 为 true，这样当 MapDisplay 组件呈现时，它将通过 Map 组件触发 API 搜索并返回值，然后显示在地图上。

问题是这个过程只工作一次。当我再次单击该按钮时，它确实做了一些事情，我确认它正在输入框中获取新值，但我似乎无法弄清楚如何让地图再次呈现。

我尝试在 this.setState 中设置其他变量，试图让它知道它需要再次渲染组件，但我想我错过了一些东西，因为没有任何效果。

我对 React 还很陌生，所以您能提供的任何帮助将不胜感激。

这是 MainSearchBar.js，上面描述的大部分工作都在其中进行：

这是调用 MainSearchBar 的地方

这是 Map 组件本身，以防您需要它：

更新：4/28，根据我收到的答案，我将 MainSearchBar.js 的渲染更新为如下所示：

我正在使用react-map-gl和deck.gl将图层加载到 mapbox 中。

我正在尝试导出带有图层的地图的 png 图像，但是下载图像时不显示图层。

这些层是：一个 GeojsonLayer 和一个 HexagonalLayer。

如何在我的 png 中显示图层？

// 这是我下载图片的方法。

我想在地图中显示我在我的州拥有的数据我设法在我的州获得纬度和经度问题是每当尝试通过该州进行映射时我总是得到它不是函数错误这是我的部分代码和我在该州拥有的数据：

并像这样映射它：

获取 api 函数：

我正在尝试在地图上画一个圆圈（中心会有一个标记）。但是，我的地图上什么也没有出现。我尝试了各种 ScatterplotLayer 选项并尝试切换位置，还尝试了 getPosition: (d) => [d.coordinates[0], d.coordinates[1]] 等。但我的地图上没有出现任何内容。