Major issue overlaying GeoTIF in Mapbox GL JS

被刻印的时光 ゝ 提交于 2019-12-08 09:33:12

问题


I have some general questions to understand what has become a very serious issue in my project. I hope that I might come to some sort of understanding on what is happening here, as I am perplexed well over 2 months into this issue. Let me just dive in :

I am in the process of making a weather app using Mapbox which displays both radar (rain) and satellite (visible clouds) over the state of Texas. I am using image overlays to accomplish this. The process is simple, but the overlays are not overlaying in the correct position.

I use freeware from NOAA called the "Weather-Climate Toolkit". This has batch support that allows me to extract the geo-coords I want and write to geoTIF. (Download/View link is https://www.ncdc.noaa.gov/wct/ )

In my example, I am doing the state of Texas - the bounds I selected (decimal) are :

North : 37 East :-92 West : -109 South : 24

After making the required settings above, my output is this - which seems 100% correct satellite data for the selected time :

I then use an image overlay in Mapbox with the same exact coords :

[-109, 37],
[-92, 37],
[-92, 24],
[-109, 24]

The result was overlaid with transparency so you can easily see the issue. It is not aligned. (See circled coastline as it makes it obvious) The latitude is incorrect, but longitude seems good.

Any ideas of what is happening here?

I was able to get the other radar (rain) data working to show rain, but it was an absolute nightmare. Once I overlaid it, I spend hours manually adjusting it. I just don't have the time to figure it out with every new set of data like I have been.

I have noticed that if I set small coords (like, a 30 mile cube) the image overlay comes out perfectly in Mapbox without changing the coords manually to move it where it should be.

Is there some soft of conversion I should know about, or something missing? The bigger the image, the greater the inaccuracy seems to be. I have no idea what to do at this point.


回答1:


Re-Projecting the image into web mercator (for Mapbox) is the solution.



来源:https://stackoverflow.com/questions/51907688/major-issue-overlaying-geotif-in-mapbox-gl-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!