javascript - 当使用超过 10,000 个点的 geojson 时,Leaflet 需要很长时间来创建线串和簇

标签 javascript reactjs leaflet

在创建所使用的点的滑板车集群路径时,我遇到了传单问题。
我的数据库中有超过 10000 个地理定位点,我想创建一条踏板车的路径。由于点数量较多,我必须将点聚集起来以便更好地呈现。
我使用 Geojson 并将所有点放入坐标中。

{
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [[10 thousand points]...]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

我使用 leaflet cluster library造成困惑。我尝试了 chunkedLoading 参数,但似乎没有帮助。聚类点仍然需要很长的时间。 此外,创建一条包含 10000 个点和点簇的路径需要近 10 秒的时间。
现在我想创建10条或更多路径以及不同滑板车的集群,有什么解决方案可以缩短创建时间吗?

最佳答案

一万点线要么是非常长的,要么是非常详细的滑板车骑行。在尝试将几何图形加载到 map 中之前,您可能需要减少或简化几何图形。

如果您要从 PostGIS 等数据库检索线串,则可以使用 ST_SimplifyST_SimplifyPreserveTopology

如果您的数据库没有简化功能,您可能会考虑在从数据库获取数据之后、将数据发送到客户端以在页面上呈现类似 this 之前减少几何形状。或类似的工具。

对于静态 geojson 文件也是如此,在将它们添加到项目之前尝试减少几何图形。查看Mapshaper为此也是如此。

关于javascript - 当使用超过 10,000 个点的 geojson 时,Leaflet 需要很长时间来创建线串和簇,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44590062/

相关文章:

javascript - React - 控制对服务器的 AJAX 调用

javascript - 使用 MobX 状态时 Antd 模式无法打开/关闭

javascript - Meteor.js - 如何在登录时重新呈现模板

leaflet - 在 Leaflet 上将点转换为 LatLng

vue.js - 带有 No-SSR 的 Vue2-Leaflet 导致 Window is not Defined 错误

javascript - 使用动态值的 jquery 图表示例

javascript - render方法没有返回数据怎么处理?

用于循环条件迭代和重置变量的 Javascript

javascript - 代理 HTMLElement

reactjs - 如何等待上下文值被设置| react 钩子(Hook)