Skip to content

Latest commit

 

History

History
90 lines (67 loc) · 2.82 KB

README.md

File metadata and controls

90 lines (67 loc) · 2.82 KB
Raw

Leaflet.ChineseTmsProviders

An extension to Leaflet that contains configurations for various Chinese tile providers.

Usage

npm i leaflet.chinatmsproviders

Leaflet-ChineseTmsProviders providers are refered to with a provider.<variant>.<type> -string. Let's say you want to add the nice Normal.Map base layers from www.tianditu.com to your map, you pass TianDiTu.Normal.Map to the L.tileLayer.chinaProvider-constructor, which will return a L.TileLayer instance for TianDiTu Normal Map tile layer.

//add TianDiTu Normal Map Layer to map.
L.tileLayer.chinaProvider('TianDiTu.Normal.Map').addTo(map);

Example

var map = L.map('map', {
    center: [31.59, 120.29],
    zoom: 12
});

L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',{maxZoom:18,minZoom:5}).addTo(map);

There are more examples at the examples folder like below.

./examples/indexTianDiTu.html

./examples/indexGaoDe.html

./examples/indexGoogle.html

./examples/indexGeoq.html

./examples/indexOSM.html

Above all maps use Coordinate Reference Systems (CRS), which are EPSG:3857.

Providers

Current options suitable for tile layers are:

  • TianDiTu
    • TianDiTu.Normal.Map
    • TianDiTu.Normal.Annotion
    • TianDiTu.Satellite.Map
    • TianDiTu.Satellite.Annotion
    • TianDiTu.Terrain.Map
    • TianDiTu.Terrain.Annotion
  • GaoDe
    • GaoDe.Normal.Map (include Annotion)
    • GaoDe.Satellite.Map
    • GaoDe.Satellite.Annotion
  • Google
    • Google.Normal.Map (include Annotion)
    • Google.Satellite.Map
  • Geoq
    • Geoq.Normal.Map
    • Geoq.Normal.PurplishBlue
    • Geoq.Normal.Gray
    • Geoq.Normal.Warm
    • Geoq.Normal.Hydro
  • OSM
    • OSM.Normal.Map

Options

key

If you're using TianDiTu, please apply the key and config it in the option, like this:

L.tileLayer.chinaProvider(
    'TianDiTu.Normal.Map',
    {
        key: 'Your key',
        maxZoom:18,
        minZoom:5,
    }).addTo(map);

I added a key to the source code, but this key should only be used for testing.

About

This work was inspired from https://github.com/tontita/Leaflet.KoreanTmsProviders, and https://github.com/leaflet-extras/leaflet-providers.