Javascript 使用Mapbox GL JS从点数据生成连续插值曲面

我对Mapbox及其GL JS库相对较陌生，但到目前为止，我对其功能印象深刻

我目前正在使用一个大约100000个点的数据集，并试图设计一种在我拥有的数据集的凸包内快速生成/可视化连续插值曲面的方法（基本上是尝试生成与热图功能一样快速/响应的功能，但希望从点数据值而不是空间密度进行插值）

本文讨论了这一确切的场景：

在你可以在网上找到的地图中，有两种常见的地图类型 热图：鼓励用户探索密集点数据的热图， 以及在连续曲面上插值离散值的函数， 在这些点之间创建平滑的渐变。后者的效果更好 常见且最常用于科学出版物或 现象以可预测的方式分布在某个区域。用于 例如，您所在的城镇可能只有几个气象站，但您的 favorite weather应用程序显示了整个区域的平滑温度梯度 您所在城市的整个区域。对于您当地的气象服务，它是 合理假设，如果两个相邻的站点报告不同 温度，它们之间的温度会逐渐转变 从一个到下一个。

但随后继续解释这是不常见的，并且没有为这种类型的应用程序提供文档/示例

---

在此阶段，我尝试将点转换为voronoi单元多边形，并按数据值进行颜色编码（可视化的最近邻方法），但在较低的缩放级别（0到8）下，渲染似乎难以处理100000个点。有人知道是否可以从点值创建快速渲染曲面插值吗？任何示例都会非常棒。

是一个用于二维点Delaunay三角剖分的非常快速的JavaScript库。这两个库都基于此库。您可以使用这些库，然后通过>是一个用于二维点Delaunay三角剖分的非常快速的JavaScript库。这两个库都基于此库。您可以使用这些库，然后在地图上显示结果。如果生成一次网格（而不是每一帧），则网格中的100k点听起来并不是一个问题…注意：我不是建议您使用three.js，我只是指出，每个顶点都有颜色的100k点voronoi单元的单个网格对我来说并不是很大。WebGL2允许您访问顶点着色器中的纹理，这意味着您可以使用纹理中的像素值来偏移每个顶点的y分量两次渲染1：对于贴图如果其基本插值，您可以使用高斯模糊或框模糊生成高度贴图。2：使用第一遍的插值纹理渲染网格，以渲染最终网格。应工作良好（完全动画插值和网格渲染）如果你在地图分辨率上不疯狂。也不需要在每一帧更新网格，因为你只需要一个静态网格。@杰克，我完全同意你的看法。Mapbox解释这对气象站可能是一个有用的场景，但没有解释……如果你在地图上生成网格，网格中的100k点听起来不应该是一个问题ce（而不是每帧）…注意：我不是建议您使用three.js，我只是指出，每个顶点都有颜色的100k点voronoi单元的单个网格对我来说并不是很大。WebGL2允许您访问顶点着色器中的纹理，这意味着您可以使用纹理中的像素值来偏移每个顶点的y分量两次渲染1：对于贴图如果其基本插值，您可以使用高斯模糊或框模糊生成高度贴图。2：使用第一遍的插值纹理渲染网格，以渲染最终网格。应工作良好（完全动画插值和网格渲染）如果你在地图分辨率上不疯狂。也不需要每帧更新网格，因为你只需要一个静态网格。@Jack我完全同意你的看法。Mapbox解释这对气象站可能是一个有用的场景，但是没有解释。。。