javascript - 利用 p5.js/processing 在 GeoTIFF 上进行数据可视化?如何在网络墨卡托中绘制经度/纬度坐标?

标签 javascript processing gis data-visualization p5.js

我负责收集考古遗址的数据库。我们项目的目标是使数据可以在网络上访问。我想将它们绘制在 GeoTIFF 上以显示它们的分布和随时间的变化。我还想计算 Delaunay 三 Angular 剖分和热图,您可以将其显示为叠加层。对我来说,将随时间的变化可视化为动画很重要。我选择 p5.js/processing 因为我不是一个非常熟练的程序员(一些 R、NetLogo 和 Processsing)。我认为它适合这项任务,特别是关于动画。在详细介绍之前,我的第一个问题是:

这是一个明智的工具选择吗?您会推荐其他工具吗?

如果您认为我的选择至关重要,这是我的第二个问题:

我遇到了 Daniel Shiffmans 关于在 p5.js 中可视化地震数据的教程,这与我要做的很接近: https://www.youtube.com/watch?v=ZiYdOwOrGyc

代码在这里: https://github.com/CodingTrain/Rainbow-Code/blob/master/CodingChallenges/CC_57_Earthquake_Viz/sketch.js

在上面的示例中,他依赖于mapbox.js。我更喜欢使用我们项目中的自定义构建 GeoTiff 并避免使用 Mapbox,因为它不是 100% 免费的。但是我如何让他的代码使用自定义 GeoTiff 作为 basemap ?我可以将他的变量“clon”和“clat”设置为我的自定义 Tiff 中心点,但坐标没有正确转换。我认为问题在于缩放级别(又名“缩放”)。但如何确定自定义 map 的缩放比例?我没有在 p5.js 中找到任何其他 Web Mercator 投影的实现,也没有找到处理。或者我是否得到了超出预测的数学错误?

最佳答案

我不太精通 p5.js,但我在使用 d3.js 执行各种数据可视化任务(包括处理地理数据)方面有很好的经验。所以我的建议是两全其美——使用 p5.js 进行渲染,使用 d3.js 进行数据操作。就您而言,您似乎需要一个简单的重投影(LonLat 到 Mercator)。

重申一下:

  1. 使用 d3.js 将数据从任何投影 (LonLat) 投影到 p5.js 正在使用的投影 (Mercator)
  2. 在 p5.js 中渲染投影数据

快速谷歌搜索找到了我this guide on d3 + p5 integration

在d3一侧,有一个API documentation

这是一个 good example of GeoTIFF reading/rendering在 d3.js 中。好的,这是one more .

关于javascript - 利用 p5.js/processing 在 GeoTIFF 上进行数据可视化?如何在网络墨卡托中绘制经度/纬度坐标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43866104/

相关文章:

javascript - 在 Google Cloud Function 内调用 Promise 函数

javascript - 为什么我得到整数 NaN?

map - 从何处获取地形数据-免费和付费?

java - 如何获取 JBox2d 主体尺寸

java - 检索有向图每个顶点的 "out degree"(jgrapht)

collections - GeoTools:创建点并将其添加到 featureCollection

javascript - 在非常接近的点的大型数据集上计算 Voronoï 图

javascript - 覆盖 window.open()

JavaScript 内联函数,如 C++ 中的

javascript - 如何从 jquery 数据表中获取单行数据?