Contents

1. Overview
2. Computing Tile Coordinate
   1. Projected Coordinate
   2. Pixel Coordinate
   3. Tile Coordinate
3. Tile System in Maptalks

In enterprise GIS projects, developers need to deal with various tile services of different CRS systems. This guide's goal is to present an overview of underlying theory of map tiles and how to load them with maptalks.

To optimize the performance of map retrieval and display, the rendered map is cut into map tiles(usually 256 x 256 pixels each). Each time, we only load tiles necessary to fill the map container.

In a tile service, tiles are always organized by a tile system. In a typical tile system, tiles are indexed with a number on both X-axis and Y-axis that is called a tile coordinate. The value of tile coordinate varies with the projection system and zoom levels.

A tile system also defines tiles' ranging order on X-axis and Y-axis.

Thus, loading map tiles can be divided into 2 steps:

• Compute the tile coordinate on the current geographic coordinate
• Load tiles according to the ranging order

Given a geographic coordinate, its tile coordinate's computing is divided into 3 steps:

1. Compute the geographic coordinate's projected coordinate which remains unchanged in different zoom levels.
2. Convert the projected coordinate to a 2d pixel coordinate according to current resolution, which varies with zoom level.
3. Compute the tile coordinate with the pixel coordinate according to the tile system

Projected Coordinate System is a very scientific concept involved with algorithms and mathematics. According to ESRI's definition:

A projected coordinate system is defined on a flat, two-dimensional surface and a projected coordinate system is always based on a geographic coordinate system that is based on a sphere or spheroid.

If you want to dig in, you can find more on this ESRI's link.

In short, we need to know:

1. projected coordinate system is used to convert a coordinate on a sphere to a coordinate on a 2d surface which is much easier to deal with.
2. Given a geographic coordinate, projected coordinate remains the same in different zoom levels.

And here are 2 common used projection systems:

EPSG:3857: AKA web-mercator projection, the most common used by google map/bing/osm/mapbox and more.

EPSG:4326: A simple Plate Carrée, it uses geographic coordinate directly as the projected coordinate without any projection.

A map can zoom in and zoom out. Map's extent changes in different zoom levels, this is because the geographic distance on a single pixel varies with zoom level which is called "resolution".

A resolution indicates the distance (between 2 projected coordinate) represented by a single pixel in the map. With it, a projected coordinate can be convert to a pixel coordinate, e.g.

pixel.x = prjCoord.x / resolution;
pixel.y = prjCoord.y / resolution;

Apparently, a geographic coordinate's point coordinate varies with zoom level because of the vary of resolution.

Finally, we can get a tile coordinate now with a pixel coordinate. Computing of tile coordinate is decided by tile system of the tile service.

Take the example of Bing Map's tile system which is also used by open street map and mapbox. Tile's coordinate starts from origin (0, 0) in the upper left to (Math.pow(2, level)–1, Math.pow(2, level)–1) in the lower right as below:

You can read more in this Bing's article.

Other tile services may have different tile systems, for example, OSGEO's tile map service's tile system is as below:

Maptalks uses a 4 digit array to indicate a tile service's tile system: [sx, sy, ox, oy]

Meaning of each digit is:

sx : Order of tile.x from left to right. 1 : increase, -1 : decrease

sy : Order of tile.y from bottom to top. 1 : increase, -1 : decrease

ox : Pixel coordinate's origin x for tile coordinate.

oy : Pixel coordinate's origin y for tile coordinate.

Some examples:

[1, -1, -20037508.34, 20037508.34] : The most common used and the default tile system of maptalks, used by Bing, open street map and mapbox.

[1, 1, -180, -90] : The tile system used by OSGEO's "global-geodetic"(http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification#global-geodetic) shown above.

[1, 1, 0, 0] : A tile system used by map.baidu.com

Examples of tile systems in maptalks:

    //osm's tile service with default tileSystem, so we don't need to specify in options
    new maptalks.TileLayer("osm",{
        //tileSystem : [1, -1, -20037508.34, 20037508.34],
        urlTemplate : 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains  : ['a','b','c']
    });

    //tianditu's tile service, a service based on EPSG:4326
    new maptalks.TileLayer("tdt",{
        tileSystem : [1,-1,-180,90],
        urlTemplate:'http://t{s}.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}',
        subdomains:['1','2','3','4','5']
    });

    //baidu tile service
    new maptalks.TileLayer("baidu",{
        tileSystem:[1,1,0,0],
        urlTemplate:'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',
        subdomains:[0,1,2,3,4,5,6,7,8,9]
    });