Why?
Most map images are rendered from WGS84 sources, such as GeoTIFF, NetCDF etc. It means that each pixel of these images is indexing a geo-coordinate position.
For example, we suppose a NetCDF file with longitudes(from 110.1 to 120.0, step 0.1), latitudes(from 20.1 to 30.0, step 0.1) and values. So, there are 100*100 values in this file. Each value could be represented by a pixel in the PNG image file. Finally, we get an image with 100*100 pixels.
We put this 100*100 pixels PNG image on a web map, such as Leaflet.js. Leaflet.js give us a convenient way to display an image on a map using the ImageOverlay. Below the ImageOverlay, is the tiled layer as TileLayer. Here, I don’t give a lot of explanation about the tiled layer. But the basis you must know is the projected coordinate system addressed as EPSG:3857 or Web Mercator. You can find the official details on epsg.io. Also, a useful feature are listed on the page and I put it below.
Area of use:World between 85.06°S and 85.06°N.
So, let me list the differences between these two coordinate systems.
| Coordinate System | Alias | Area of use |
|---|---|---|
| EPSG:4326 | WGS84 | between 90°S and 90°N |
| EPSG:3857 | Web Mercator | between 85.06°S and 85.06°N |
How?
The 100*100 PNG image we have created before, is based on WGS84. So the area of use is between 90°S and 90°N. If we use the ImageOverlay to display out image and pass the configuration bbox as [[30.0,110.1],[20.1,120.0]]. Probably, the image is not placed at the right position. And how to solve it?
It’s so simple!
On EPSG:4326 system, each pixel represent an unit of longitude or latitude. Contracting to EPSG:3857, the scale of latitude is different. So, that’s the problem!
Back to our image, we should scale the Y axis from 90.0 to 85.06. So, the ratio is 90/85.06 = 1.058076652... and the height of our image should be scaled to 100/(90/85.06) as proximately 94 or 95. Another way to do this is calculate the latitude we pass to the ImageOverlay. Each latitude should be calculated as [lat]/(90/85.06). So the bbox should be [[28.35333,110.1],[18.99673,120.0]]. Finally, we will see the right result.
Author: 徐奕峰 Eephone Xu