Leaflet.js球形墨卡托WMS地图上的GeoJSON形状变形

Question

I have a map with a simple WMS layer in spherical mercator projection (rendered by a OSM-Mapnik-TileCache server stack, everything is in EPSG:900913 / EPSG:3857 ).

First: I can't understand why, if Leaflet uses CRS EPSG:3857 , whose unit is meters , I still have to provide coordinates, like maxBounds and center , in WGS84 format, which uses degrees . Is it an API inconsistency?

Second: I need to render a GeoJSON feature expressed in WGS84 coordinates ( EPSG:4326 ), but the shape is visibly distorted (see pics below). Should I convert the shape from EPSG:4326 to EPSG:3857? How? If I do so, I would have coordinates expressed in meters, while Leaflet still expects degrees. How could I fix this?

I made a double check with a simple wms layer in OpenLayers and a GeoJSON overlay and it works fine, so I proved that the distortion is not in the data.

Any clue?

Here is the test GeoJSON, hope someone can understand the reason of the issue:

{
    "type": "Polygon",
    "coordinates": [
        [
            [14.740017498458682, 40.673078870109705],
            [14.740132563378529, 40.673283531348574],
            [14.741625561383819, 40.67246759585111],
            [14.741671820229074, 40.672308542443076],
            [14.74151049646397, 40.672262934612235],
            [14.740017498458682, 40.673078870109705]
        ]
    ]
}

Example image on Leaflet

Example image on OpenLayers

Answer 1

First: I can't understand why, if Leaflet uses CRS EPSG:3857, whose unit is meters, I still have to provide coordinates, like maxBounds and center, in WGS84 format, which uses degrees. Is it an API inconsistency?

Projections in data are different than display projections. The input to Leaflet is lat/lon in WGS84, the default output is mercator, in EPSG:3857. EPSG:3857 is rarely used for data encodings.

but the shape is visibly distorted (see pics below).

This is what projections are: this is distorted because projections are distortions.

Should I convert the shape from EPSG:4326 to EPSG:3857?

Leaflet is doing this internally already, you don't need to do it manually.

I made a double check with a simple wms layer in OpenLayers and a GeoJSON overlay and it works fine, so I proved that the distortion is not in the data.

Your OpenLayers map has EPSG:4326 as its display projection, while your Leaflet map has EPSG:3857: this is why one is a different shape.