https://github.com/htoooth/Leaflet.ChineseTmsProviders

Provider for Chinese Tms Service
https://github.com/htoooth/Leaflet.ChineseTmsProviders

epsg javascript leaflet tile-provider tilelayer

Last synced: about 1 month ago
JSON representation

Provider for Chinese Tms Service

• Host: GitHub
• URL: https://github.com/htoooth/Leaflet.ChineseTmsProviders
• Owner: htoooth
• License: mit
• Created: 2014-01-26T14:52:26.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2022-07-08T10:08:20.000Z (over 2 years ago)
• Last Synced: 2024-11-05T03:42:43.123Z (about 2 months ago)
• Topics: epsg, javascript, leaflet, tile-provider, tilelayer
• Language: JavaScript
• Homepage: https://htoooth.github.io/Leaflet.ChineseTmsProviders/
• Size: 136 KB
• Stars: 1,013
• Watchers: 38
• Forks: 302
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Leaflet.ChineseTmsProviders

An extension to [Leaflet](http://leafletjs.com/) that contains configurations for various Chinese tile providers.

## Usage

```bash

npm i leaflet.chinatmsproviders

```

Leaflet-ChineseTmsProviders [providers](#providers) are refered to with a `provider..` -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.

```Javascript

//add TianDiTu Normal Map Layer to map.

L.tileLayer.chinaProvider('TianDiTu.Normal.Map').addTo(map);

```

## Example

```Javascript

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](https://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexTianDiTu.html)

[./examples/indexGaoDe.html](https://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexGaoDe.html)

[./examples/indexGoogle.html](https://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexGoogle.html)

[./examples/indexGeoq.html](https://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexGeoq.html)

[./examples/indexOSM.html](https://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexOSM.html)

[./examples/indexBaidu.html](http://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexBaidu.html)

[./examples/indexTencent.html](https://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexTencent.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 (exclude Annotion)

    * Google.Satellite.Map (include Annotion)

* Geoq

    * Geoq.Normal.Map

    * Geoq.Normal.PurplishBlue

    * Geoq.Normal.Gray

    * Geoq.Normal.Warm

    * Geoq.Normal.Hydro

* OSM

    * OSM.Normal.Map

* Baidu

    * Baidu.Normal.Map

    * Baidu.Satellite.Map (exclude Annotion)

    * Baidu.Satellite.Annotion

* Tencent

    * Tencent.Normal.Map

    * Tencent.Satellite.Map

    * Tencent.Terrain.Map

## Options

### key

If you're using TianDiTu, please [apply the key](http://lbs.tianditu.gov.cn/) and config it in the option, like this:

```js

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.

## Please note

If you want to use Baidu provider，please install [Proj4Leaflet](https://github.com/kartena/Proj4Leaflet) in your project.

## About

This work was inspired from , , and .