Understanding Map Projections: From Geographic to Web Mercator and Tile Services

Preface

While learning to use the OSM ID editor, I realized my knowledge of web GIS fundamentals was lacking, which made source code confusing. I decided to study GIS basics, starting with the question: how are points located and displayed on a flat map when the Earth is spherical?

Coordinate Systems

The Earth is an oblate spheroid, so a three‑dimensional (x, y, z) system is needed for precise positioning. In GIS, latitude, longitude, and height form the Geographic Coordinate System (GCS) .

When we use a phone or web map, we see a flat map. The distance between two points is shown as a planar distance measured in meters or kilometers. This flat representation uses a Projected Coordinate System (PCS) .

Converting from GCS to PCS requires a mathematical projection because a sphere cannot be unfolded into a continuous, wrinkle‑free plane.

Projection methods follow specific rules, such as preserving distances or angles, similar to casting a 3D object's shadow onto a 2D surface.

Mercator Projection

The Mercator Projection (1569, by Gerardus Mercator) is an angle‑preserving cylindrical projection. Imagine the Earth placed inside a hollow cylinder tangent at the equator; a light source at the Earth's center projects the surface onto the cylinder, which is then unrolled to form a planar coordinate system.

Key characteristics of the Mercator projection:

Meridians and parallels are straight, mutually perpendicular lines.

Distortion increases toward the poles; at 89° N/S the projected area becomes infinite.

Although area is distorted, the scale is uniform in all directions, preserving direction, angle, and relative position.

Web Mercator

The Web Mercator (Pseudo‑Mercator) is a simplified version used by Google Maps, Bing, Baidu, OSM, etc. Unlike the true Mercator, it treats the Earth as a sphere, simplifying the projection formulas.

The formula is:

where x and y are projected coordinates, R is the equatorial radius, λ is longitude, and φ is latitude.

With an equatorial radius of 6 378 137 m, the world extent in Web Mercator is ±20 037 508.342789244 m on both axes, limiting latitude to roughly ±85.0511287°.

For higher‑precision needs (e.g., accurate area calculations), conic projections such as Albers or Lambert are preferred.

EPSG

Because there is no single universal standard for describing a point, many coordinate reference systems exist. The EPSG registry manages these systems using unique identifiers (WKID).

Examples:

WGS84 (WKID = 4326)

WGS84 is a geocentric datum and the basis for GPS. It is the default for most global web maps.

CGCS2000 (WKID = 4490)

China's modern geocentric datum, compatible with WGS84 at the centimeter level.

Web Mercator (WKID = 3857)

Web Mercator is also registered in EPSG, despite its simplified assumptions.

GCJ02 and BD09

GCJ02 is a Chinese government‑mandated offset applied to WGS84 coordinates (often called the “Mars coordinate system”). Baidu adds an additional layer, creating BD09.

Conversion algorithms are not publicly disclosed; only authorized providers can offer them. Example conversion using Amap API transforms WGS84 (116.397588, 39.908775) to GCJ02 (116.397588975695, 39.908775499132).

There is no reliable reverse conversion from GCJ02 to WGS84.

Data Services

After understanding coordinate transformations, we need data services to render maps.

OGC

The Open Geospatial Consortium (OGC) defines standards for spatial data and location services. Most GIS developers follow OGC specifications.

Common services:

WMS (Web Map Service) – delivers map images.

WFS (Web Feature Service) – provides vector features (e.g., GeoJSON).

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "name": "xx超市"
      }
    }
  ]
}

For higher zoom levels, tiled services are used:

WMTS (Web Map Tile Service)

TMS (Tile Map Service)

Tiles

Tile services pre‑generate square images at multiple zoom levels. As the user zooms in, the appropriate tile set is displayed, providing higher resolution without loading a massive single image.

Gaode (Amap) uses Web Mercator tiles of 256 × 256 px. The tile URL pattern is:

http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

At zoom level 3, the tile layout looks like:

Rendering a Point

Given a container of 1200 × 1000 px, zoom level 12, and a center at Tiananmen (GCJ02: 116.397588, 39.908775), we calculate the map extent, projected center, and required tiles.

The resulting tile indices are:

Tile X range: [3370, 3374]
Tile Y range: [1550, 1553]

Configuring the Gaode tile layer in the OSM ID editor with zoom 12 and the Tiananmen center reproduces the calculated tile layout.