feat: add Tencent map

htoooth · Apr 13, 2022 · f80831d · f80831d
1 parent d37298c
commit f80831d
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@ There are more examples at the examples folder like below.
 
 [./examples/indexBaidu.html](http://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexBaidu.html)
 
+[./examples/indexTencent.html](http://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexBaidu.html)
 Above all maps use Coordinate Reference Systems (CRS), which are EPSG:3857. 
 
 <a name="providers"></a>
@@ -73,6 +74,10 @@ Current options suitable for tile layers are:
     * Baidu.Normal.Map
     * Baidu.Satellite.Map (exclude Annotion)
     * Baidu.Satellite.Annotion
+* Tencent
+    * Tencent.Normal.Map
+    * Tencent.Satellite.Map
+    * Tencent.Terrain.Map
 
 ## Options
 

diff --git a/examples/indexTencent.html b/examples/indexTencent.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title></title>
+    <meta charset="utf-8">
+    <style type="text/css">
+    body {
+        padding: 0;
+        margin: 0;
+    }
+
+    html,
+    body,
+    #map {
+        height: 100%;
+    }
+    </style>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+
+    <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
+    <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>>
+    <script type="text/javascript" src='../src/leaflet.ChineseTmsProviders.js'></script>
+</head>
+
+<body>
+    <div id='map'></div>
+</body>
+<script type="text/javascript">
+var normalm = L.tileLayer.chinaProvider('Tencent.Normal.Map', {
+        maxZoom: 18,
+        minZoom: 5
+    }),
+    imgm = L.tileLayer.chinaProvider('Tencent.Satellite.Map', {
+        maxZoom: 18,
+        minZoom: 5
+    }),
+    terrainm = L.tileLayer.chinaProvider('Tencent.Terrain.Map', {
+        maxZoom: 18,
+        minZoom: 5
+    });
+
+var normal = L.layerGroup([normalm]),
+    image = L.layerGroup([imgm]),
+    terrain = L.layerGroup([terrainm]);
+
+var baseLayers = {
+    "地图": normal,
+    "影像": image,
+    "地形": terrain,
+}
+
+
+var map = L.map("map", {
+    center: [31.59, 120.29],
+    zoom: 12,
+    layers: [image],
+    zoomControl: false
+});
+
+L.control.layers(baseLayers).addTo(map);
+L.control.zoom({
+    zoomInTitle: '放大',
+    zoomOutTitle: '缩小'
+}).addTo(map);
+</script>
+
+</html>
diff --git a/src/leaflet.ChineseTmsProviders.js b/src/leaflet.ChineseTmsProviders.js
@@ -38,7 +38,28 @@ L.TileLayer.ChinaProvider = L.TileLayer.extend({
         }
 
         L.TileLayer.prototype.initialize.call(this, url, options);
-    }
+    },
+
+    getTileUrl: function (coords) {
+		var data = {
+			s: this._getSubdomain(coords),
+			x: coords.x,
+			y: coords.y,
+			z: this._getZoomForUrl(),
+		};
+		if (this._map && !this._map.options.crs.infinite) {
+			var invertedY = this._globalTileRange.max.y - coords.y;
+			if (this.options.tms) {
+				data['y'] = invertedY;
+			}
+			data['-y'] = invertedY;
+		}
+
+        data.sx = data.x >> 4
+        data.sy = (( 1 << data.z) - data.y) >> 4
+
+		return L.Util.template(this._url, L.Util.extend(data, this.options));
+	},
 });
 
 L.TileLayer.ChinaProvider.providers = {
@@ -111,6 +132,19 @@ L.TileLayer.ChinaProvider.providers = {
         },
         Subdomains: '0123456789',
         tms: true
+    },
+
+    Tencent: {
+        Normal: {
+            Map: "//rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={-y}&type=vector&styleid=3",
+        },
+        Satellite: {
+            Map: "//p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg",
+        },
+        Terrain: {
+            Map: "//p{s}.map.gtimg.com/demTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg"
+        },
+        Subdomains: '0123',
     }
 
 };