Mapbox GL JS中覆盖GeoTIF的主要问题 [英] Major issue overlaying GeoTIF in Mapbox GL JS

问题描述

我有一些一般性问题，以了解在我的项目中什么已经成为非常严重的问题.我希望我对这里发生的事情有所了解，因为我在这个问题上花了两个多月的时间感到困惑.让我潜入:

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 :

我正在使用Mapbox制作天气应用，该应用同时显示德克萨斯州上空的雷达(雨)和卫星(可见云).我正在使用图像叠加层来完成此操作.这个过程很简单，但是覆盖层没有正确的位置覆盖.

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.

我使用NOAA的免费软件天气气候工具包".这具有批处理支持，使我可以提取所需的地理坐标并写入geoTIF. (下载/查看链接为 https://www.ncdc.noaa.gov/wct/)

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 :

北部:37 东:-92 西:-109 南:24

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

在进行了上述必要的设置之后，我的输出是这样的-在选定的时间内，这似乎是100％正确的卫星数据:

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

然后我在Mapbox中使用具有完全相同的坐标的图像叠加层:

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.

我注意到，如果我设置了较小的坐标(例如30英里的立方体)，则图像叠加层会在Mapbox中完美呈现，而无需手动更改坐标即可将其移动到应有的位置.

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.

推荐答案

将图像重新投影到Web mercator中(对于Mapbox)是解决方案.

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

这篇关于Mapbox GL JS中覆盖GeoTIF的主要问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！