问题标签 [react-map-gl]

我想在deck.gl 中的静态地图上呈现激光雷达数据的点云。

在deck.gl 文档中有一个位于地图上的点云示例。但是从代码中我不清楚示例点云是如何进行地理参考的。我在 deck.gl 文档中找到的其他点云示例不包括地图。

由于我的数据来自“真实世界”的测量，我需要确保它与地图正确对齐。我该怎么办？

在将文档与我的用例相协调时遇到了一些麻烦。我在尝试使用 d3 让 openstreet 地图进行反应时遇到了一点困难，并且一直在玩 react-map-gl ......很棒的库，非常适合拨号！这个库建立在 d3 和 openstreetmaps 之上，并使用了很多d3 插件......这是我试图复制的示例：

https://github.com/uber/react-map-gl/blob/5.0-release/examples/heatmap/src/app.js

在此示例中，坐标所在的数据位于 geoJson 文件中，并以如下所示的方法访问（从上面的链接复制并粘贴...在此代码中，他们使用 d3-request 插件来通过 geoJson 文件获取和解析，该文件包含有关地震等的其他数据）：

如果您使用的是 GeoJson，那就太好了，我已经做了很多工作来将 d3 指向美国各州、县或邮政编码的对象……但是我想做的事情要简单得多！我有一个要获取的数据数组，并作为道具传递给这个热图组件，它看起来像这样：

所以问题是，如果我不使用 geoJson，我如何告诉热图使用什么坐标？任何帮助表示赞赏！

我无法理解 react-map-gl 库中组件 ReactMapGL 和组件 MapGL 之间的区别。文档没有解释它，它们似乎具有相同的属性。

https://uber.github.io/react-map-gl/#/Documentation/getting-started/adding-custom-data即使示例间歇性地使用它们

我正在尝试自定义我的 Web 应用程序的地图，我正在使用 react-map-gl（Uber 开源代码） 我尝试更改地图的图标引脚但我无法弄清楚，字符串代码 ICON 是什么意思？

从“反应”导入反应，{ PureComponent }；

常量图标 = M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3 c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9 C20.1,15.8,20.2,15.8,20.2,15.7z;

const pinStyle = { 光标：'指针'，填充：'#d00'，笔画：'无'};

导出默认类 CityPin 扩展 PureComponent {

render() { const { size = 20, onClick } = this.props;

} }

ICON const 中的所有这些数字是什么意思？如何根据此代码更改样式？请帮忙，谢谢:)

所以我目前正在处理 Deck.gl 和 React，我需要加载一个 geojson 文件，该文件有一个名为“floors”的附加属性或类似的东西，它告诉建筑物有多少层。

有什么方法可以将交替的地板水平挤出一点点，使它看起来像这个图像中的一些建筑物的地板边缘（尽管它们中的大多数只是在顶部变薄）。我尝试搜索deck.gl，但没有这样的东西。我抬头发现 MapBox-gl-js 有一个叫做extrusion-base-height的东西，它可以让你在另一个之上添加多边形，但是没有水平挤压以使1层变薄然后恢复到原始大小这样的东西。每当新楼层开始时，这都会让步。

我已经搜索了 deck.gl 的文档，但在水平拉伸或在另一种意义上改变多边形区域/大小以便我可以在同一个位置绘制多个大小的多边形时找不到任何东西。

我正在尝试的另一张清晰图片

我想做的事情。

1. 红色多边形是倾斜的。需要使它的方向与绿色的方向相同，同时减少它的面积。

2. 移动绿色多边形顶部的红色多边形底座。

我正在使用的测试数据如下所示，

编辑：-我认为正确的方法是将经度/纬度转换为笛卡尔坐标，将向量获取到多边形的 4 个角，将向量平移到中心移动偏移量，然后再转换回来。但这仅适用于四边形/矩形多边形，对于由多个四边形组成的建筑物，我需要另一种方式。

我使用了 deck.gl@^6.4.7 和 react-map-gl@^5.0.7，并放置了一个带有图标子项的标记，该子项正在侦听点击事件。当我将deck.gl 更新到7.1.10 版时，图标的点击事件停止工作。

你知道如何解决这个问题吗？

我试图将我的反应图 gl 从 3.x 更新到 5.x，它非常有问题。

与显示地图故障的 gif 相关的 github 问题： https ://github.com/uber/react-map-gl/issues/836

地图的交互区域占据了相同数量的视口，但只显示了背景层的一部分。

我找不到任何更改日志/发行说明，并且控制台中没有错误，所以有点难以弄清楚是否是一些库 API 更改是奇怪的根源。这可能是我用来渲染背景层的 react-map-gl 库和 raster-tile-style 库之间的新不兼容。

当我深入研究这个时，基本上是在寻找群众的任何调试技巧......

更新：为常规 mapbox 令牌 API 切换了我们的自定义 MapStyle。如您所见，地图 div（带有属性）的位置正确，但实际上仍然只显示地图内容的左上角......

更新 2：最新的情节扭曲：故障没有出现在 Firefox 中，（最初出现在 chrome 中）当然，mapbox 层工作正常，但是当我在开发环境中使用我们的 mapStyle 时，它​​会阻止地图图块请求，因为CORS

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

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

谢谢！！

mapbox-gl-js 版本：@ 最新的 mapbox-gl-draw 版本：@latest

预期行为

我在地图初始化上添加了绘制控件，并且我有多种绘制类型的自定义按钮。矩形，自由多边形。所以在 DEV 环境中绘图工作完全完美。在开发人员录制的视频中 https://drive.google.com/file/d/1m1TEqQMjOgdDvFxk2HRihJMmuqLZX5WS/view

构建后的实际行为

当我在反应中创建构建时，它的行为不正确。构建项目后，DrawControl 会在鼠标悬停时自动开始绘图，但它应该在单击时开始绘图并在单击时结束绘图。在构建中，它从 mouseenter 开始并在光标在地图上时自动停止。如果你需要的话。这是构建后的当前行为。 https://drive.google.com/file/d/1aH0G7bcU9_fP3g6-o1l0n782fZzyu5w_/view

请告诉我您是否需要其他帮助我。谢谢。

I'm using React Map GL, and I want to put the latitude and longitude of the user

Returning the component like this:

I'm tried to use react-geolocated but it's returning null coords.

I want to get these informations when the component mounts, that's the code:

The map component:

I'm getting the props like this: