问题标签 [deck.gl]

我正在尝试将基本的 deck.gl（mapbox 静态地图）添加到 react 项目中——我可以这样做；但是，一旦加载地图，它就会占据整个页面，并且任何其他信息都隐藏在地图后面。例如，我在地图上方有一些文本<p>，当它应该显示在地图上方时，它被隐藏在地图后面。

任何调整地图所在 div 大小的尝试均未成功： margin-top, height etc..

该类称为 DglMap

添加到名为 Content 的类

添加到 app.js

文件SomeText返回<div><p>SomeText</p></div>

预期结果是地图显示在文本下方而不显示在文本上方。在另一种情况下，我可能想将地图调整为特定大小；例如500x500px。

任何帮助表示赞赏并乐意详细说明。干杯!

我正在使用uber react-map-gl和deck-gl库来尝试动态显示数据。我的反应小应用程序中有 2 个组件。一个导航栏和一个Mapbox map。所以这是我的管道。当页面第一次加载时，只显示地图没有任何标记或可视数据。但是当我单击导航栏之一时link，action creator会调用一个，当我ajax调用以获取一些数据时，并且从调度的操作中将我的响应数据作为有效负载传递并reducer达到我有一个新版本的商店。我想在他们的存储键中可视化的数据：mainProjects包含一个数组。geojson我点击导航栏链接成功更新了该值，在实际Map组件中，我可以加载新的价值观，但useEffect不更新我的本地状态。这是我的地图代码：

在上面的代码中，我尝试通过 is setter 更新我的本地状态值，但useEffect似乎不起作用。看起来它只被调用一次，在组件第一次呈现时。我该如何解决这个问题?

谢谢！！

我正在开发一个 React 应用程序，它应该用于可视化不同的地理信息，主要以 GeoJSON 格式描述。更详细地说，我目前正在开发一个地图组件，稍后应该将其包含在整个前端部分中。

为此，我开始使用他们的 GeoJSON 示例应用程序 ( https://github.com/uber/deck.gl/tree/master/examples/website/geojson )的代码来评估 Deck.gl。这工作得很好。所以我开始添加更多图层以获取更多信息：

• TileLayer + BitmapLayer 用于整合不同的底图
• IconLayer 可视化不同的兴趣点
• nebula.gl SelectionLayer 选择地图中的多个元素

这也工作得很好。所以我想适当地封装这个解决方案，以便它可以很容易地用作子组件。因此，我使用 create-react-app 来搭建脚手架并开始迁移代码。

生成的代码结构如下所示（仅相关部分）：

• 上市
  • 索引.html

• 源代码

  • 成分
    • 地图.js

  • 数据

    • 地图集.png
    • 映射.json
    • 图标.json
    • 地理数据.json

  • index.js

索引.html

index.js：

地图.js：

Map.js 中使用的代码实际上与扩展示例代码时使用的代码完全相同（按预期工作），只是它的呈现方式略有改变。我希望它以相同的方式工作，但我得到以下输出：https ://imgur.com/dyat3jc

如果我删除 TileLayer + BitmapLayer，第一个错误将消失，至少 GeoJSON 数据将正确显示，只是没有底图。IconLayer 也不起作用，而 SelectionLayer 不会导致任何问题，就像 GeojsonLayer 一样。

我对 React 和 Deck.gl 还很陌生，所以有什么我忘记正确迁移示例代码的吗？

更新：

我稍微重构了代码并让图标正常工作。在使用 TileLayer 时，我还通过删除 props 到 BitmapLayer 的传播消除了错误消息（props.data 为空，在示例代码中使用时似乎没有问题，但在此处不知何故会导致问题），但是位图根本不显示，即使图像链接和边界是正确的。

这实际上是我的第一个 JS 代码，所以请多多包涵，我设法改编了 Deck.Gl 中的示例示例以显示散点图，现在我不确定如何根据“状态”列的值更改颜色，我知道如何为 1 个值执行此操作，但不确定如何在此处使用 if then else 执行其余操作

这是一个完整的可重复示例

我在 github 中发布了一个网页https://djouallah.github.io/keplergl/，并且我限制对这些 URL 的访问，（我正在尝试不同的组合）

https://djouallah.github.io

https://djouallah.github.io/keplergl

https://djouallah.github.io/keplergl/

https://djouallah.github.io/keplergl/index.html

但是 mapbox 不渲染，它可以与我的公共令牌一起使用，我不能使用它，因为我想将其保密。这是html页面的代码

我正在使用 deck.gl GeoJsonLayer 在地图上显示区域。通过一个事件，我能够使这些区域可选。我正在努力解决的问题是在单击后更改特征选择中的特征颜色。

这是渲染层功能（改编自此处）

问题是，当我通过 setState() 更新特征集合中特征的选择状态时，即使数据中表示状态更改，渲染也不会更新。

这就是我传递“geofeats”对象的方式：

我通过 setState 而不是通过 props 尝试了它 - 但结果是一样的。特征集合被移交给 GeoJsonLayer 但从未更新。

有人可以告诉我，我做错了什么吗？

更新：带有错误再现的要点示例：https ://gist.github.com/jaronimoe/efdbb58b3f52c2aac63362a921802cfe

我正在使用 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 都允许交互？

我正在使用deckgl 构建自定义视觉效果，这是代码和整个视觉效果

datastudio.google.com/reporting/fe15b7b1-aa4a-4f1b-9b29-52db4734c526

目前，我只是使用第一个元素作为初始视图的参考

这是我正在使用的对象数组的示例

如何获取字段“coordinateid”的最低值，在此示例中为 [140,-20] 我是 javascript 新手，我确实了解如何访问单个对象值，但不确定如何遍历整个数组，是否有一个函数可以直接访问“Coordinateid”字段的所有值，或者我应该使用循环。

请告诉我是什么const {data = DATA_URL} =this.props意思。

const {data = DATA_URL} =this.props和有什么区别const {data} =this.props？

我已经通过多选将geojson文件用于谷歌地图。但是当我尝试删除覆盖时，它不起作用。这是我用于添加和删除的代码。我需要知道如何从地图中删除选定的 geojson 文件