将许多数据映射到传单上的道路上并单独绘制线条

问题描述

我想在我的网页中做类似谷歌地图中的交通状况的事情，我在前端使用React和Leaflet（react-leaflet）。我在城市周围有数百万个点，格式为 [纬度、经度、方位、速度]。

我试图盲目地将数据绘制为标记或折线，然后，当然，浏览器似乎需要很长时间才能加载。

我似乎需要完成以下任务，但我不知道如何实现它们：

1. 从某处获取道路信息（在 openstreet 地图中是否称为“路”？）。
2. 找到一些算法将点映射到道路。
3. 平均每个路段的点的速度，但保留方向。
4. 根据路段画线。

有人可以为我指出如何实现这些目标的方向，尤其是 1 和 2？非常感谢。

解决方法

你描述的是一系列你需要解决的问题。你最好把它分成几部分，试着解决每一部分，并在展示你的努力的同时寻求帮助。

我会指出一些需要注意的困难/条件，以提供帮助。

• 您很难仅使用前端解决方案来实施您的项目。在前端将所有数据作为矢量数据加载将显着增加加载时间，并可能很快导致延迟和糟糕的用户体验。考虑使用空间服务器（例如 GeoServer）来提供 WMS 或 WFS（例如使用 BBox 策略）。

• 您想根据点的值为路段分配值。但首先，您需要决定您希望这发生在何处。前端？后端？我建议使用后者，但这意味着如果没有 PostGIS，您可能无法逃脱。此外，您将不得不下载整条道路数据集，这意味着您可能不得不限制您的区域（或者您将不得不处理大量数据）。

• 如果您想继续使用前端解决方案，那么您需要在矢量数据中获取道路（例如来自矢量切片），用您的线条创建一个 GeoJson（为每个线条分配一个值）并将您的线条对齐到道路（例如使用 Turf.js）。或者您可以尝试使用 Map Matching 服务来捕捉您生成的折线（例如 OSRM、Mapbox Map Matching API）。