GeoTIFF에서 데이터 시각화를 위해 p5.js/processing 활용? Web mercator에서 Lon/Lat 좌표를 어떻게 그리는가?

Question

나는 고고학 사이트를 수집하는 데이터베이스 작업을하고 있습니다. 우리 프로젝트의 목표는 데이터를 웹에서 액세스 가능하게 만드는 것입니다. GeoTIFF에 시간을 들여 분포와 변화를 보여주기 위해 그래프를 그립니다. 또한 델라 네이 삼각 측량과 히트 맵을 계산하여 오버레이로 표시 할 수 있습니다. 시간이 지남에 따라 애니메이션으로 변화를 시각화하는 것이 중요합니다. 필자는 숙련 된 프로그래머가 아니기 때문에 p5.js/processing을 선택합니다 (일부 R, NetLogo 및 Processsing). 특히 애니메이션과 관련된 작업에 적합하다고 생각합니다. 좀 더 자세히 설명하기 전에 첫 번째 질문은 다음과 같습니다.

이 도구는 현명한 선택입니까? 다른 도구를 추천 해 주시겠습니까? 내가 p5.js 지진 데이터를 시각화에 다니엘 Shiffmans 튜토리얼 건너 온

이 내가 어떻게 할 것인지에 근접 : 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 빌드를 사용하고 100 % 무료가 아니기 때문에 맵 박스를 피하는 것을 선호한다. 하지만 코드를 사용자 정의 GeoTiff로베이스 맵으로 사용하려면 어떻게해야합니까? 나는 자신의 커스텀 Tiff 중심점에 "clon"과 "clat"변수를 설정할 수 있지만 좌표는 올바르게 변형되지 않았다. 문제는 줌 레벨 일명 "확대/축소"라고 생각합니다. 하지만 내 맞춤지도의 확대/축소를 결정하는 방법은 무엇입니까? 나는 p5.js에서 웹 mercator 투영의 다른 구현을 발견하지 못했습니다. 아니면 투영을 넘어 수학을 잘못 받습니까?

Answer 1

필자는 p5.js에 익숙하지 않지만 지리 데이터를 포함하여 다양한 dataviz 작업에 d3.js를 사용하는 데 좋은 경험이 있습니다. 그래서 제 제안은 렌더링과 데이터 조작을 위해 p3.js를 사용하여 두 세계의 장점을 최대한 활용하는 것입니다. 귀하의 경우, 간단한 재 투영이 필요합니다 (LonLat to Mercator).

는 반복하려면

1. 사용 d3.js를 어떤 투사 그 것이다 (LonLat) (메르카토르)
2. 이 p5.js
을에 투영 된 데이터를 렌더링 사용 p5.js 투사로 데이터를 프로젝트

빠른 인터넷 검색은 API documentation

가, D3의 측면에서 나에게 this guide on d3 + p5 integration

착륙

그리고 여기 d3.js에 good example of GeoTIFF reading/rendering이 있습니다. 좋아, 여기에 one more입니다.