在GeoTIFF上利用p5.js /處理進行數據可視化？如何繪製Web mercator中的Lon/Lat座標？

Question

我在收集考古遺址的數據庫上工作。我們項目的目標是使數據在網絡上可訪問。我想在GeoTIFF上繪製它們以顯示它們的分佈和隨時間變化。我進一步想要計算Delaunay三角剖分和一個熱圖，你可以將它顯示爲疊加圖。它對我來說非常重要，可以將動畫隨着時間的變化可視化。我選擇p5.js /處理，因爲我不是一個非常熟練的程序員（一些R，NetLogo和Processsing）。我認爲它將適合特別是關於動畫的任務。在進入更多細節之前，我的第一個問題是：

這是工具的明智選擇嗎？你會推薦其他工具嗎？

如果你覺得我的選擇是至關重要的，這裏是我的第二個問題：

我遇到丹尼爾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一起作爲底圖使用？我可以將他的變量「clon」和「clat」設置爲我自定義的Tiff中心點，但座標沒有正確轉換。我認爲問題在於縮放級別，即縮放。但是，如何確定我的自定義地圖的縮放？我沒有在p5.js中找到任何其他web mercator投影的實現，也沒有處理。還是我得到超出投影錯誤的數學？

Answer 1

我對p5.js不太熟練，但是我對使用d3.js處理各種dataviz任務（包括處理地理數據）有很好的經驗。所以我的建議是使用兩個世界中最好的 - 使用p5.js進行渲染，使用d3.js進行數據處理。就你而言，你似乎需要一個簡單的重投影（LonLat to Mercator）。

重申：

1. 使用d3.js項目無論從任何投影是（LonLat）到投影是p5.js使用（墨卡託）
2. 呈現p5.js
預計的數據數據

快速登陸谷歌搜索我this guide on d3 + p5 integration

在D3的一面，有一個API documentation

這裏是d3.js中的good example of GeoTIFF reading/rendering。好的，這裏是one more。