feat: support options.tms for TileLayer in 3857 and 4326 projection (#2782)

* feat: add options.tms for TileLayer in 3857 and 4326 projection

* refactor: update VectorTileLayer._prepareOptions

* add tileSystem static constants

* fix TileLayer._prepareOptions

Author: fuzhenn

packages/maptalks/src/layer/tile/TileLayer.ts

@@ -256,6 +256,26 @@ class TileLayer extends Layer {
         return new TileLayer(layerJSON['id'], layerJSON['options']);
     }
 
+    onAdd() {
+        this._prepareOptions();
+    }
+
+    _prepareOptions() {
+        const options = this.options as any;
+        if (!options.tileSystem && options.tms) {
+            const sr = this.getSpatialReference();
+            const projection = sr.getProjection();
+            const is4326 = projection.code === "EPSG:4326" || projection.code === "EPSG:4490";
+            const is3857 = projection.code === "EPSG:3857";
+
+            if (is3857) {
+                options.tileSystem = TileSystem['tms-global-mercator'];
+            } else if (is4326) {
+                options.tileSystem = TileSystem['tms-global-geodetic'];
+            }
+        }
+    }
+
     /**
      * force Reload tilelayer.
      * Note that this method will clear all cached tiles and reload them. It shouldn't be called frequently for performance reason.

packages/maptalks/src/layer/tile/tileinfo/TileSystem.ts

@@ -1,5 +1,7 @@
 import { extend } from '../../../core/util';
 
+const semiCircum = 6378137 * Math.PI;
+
 /**
  * @classdesc
  * A class internally used by tile layer helps to descibe tile system used by different tile services.<br>
@@ -20,6 +22,39 @@ class TileSystem {
         y: number;
     }
 
+    /**
+     * The most common used tile system, used by google maps, bing maps and amap, soso maps in China.
+     * @see {@link https://en.wikipedia.org/wiki/Web_Mercator}
+     * @constant
+     * @static
+     */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    static 'web-mercator' = new TileSystem([1, -1, -semiCircum, semiCircum]);
+
+    /**
+     * Predefined tile system for TMS tile system, A tile system published by [OSGEO]{@link http://www.osgeo.org/}. <br>
+     * Also used by mapbox's [mbtiles]{@link https://github.com/mapbox/mbtiles-spec} specification.
+     * @see {@link http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification}
+     * @constant
+     * @static
+     */
+    static 'tms-global-mercator' = new TileSystem([1, 1, -semiCircum, -semiCircum]);
+
+    /**
+     * Another tile system published by [OSGEO]{@link http://www.osgeo.org/}, based on EPSG:4326 SRS.
+     * @see {@link http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification#global-geodetic}
+     * @constant
+     * @static
+     */
+    static 'tms-global-geodetic' = new TileSystem([1, 1, -180, -90]);
+
+    /**
+     * Tile system used by [baidu]{@link http://map.baidu.com}
+     * @constant
+     * @static
+     */
+    static 'baidu' = new TileSystem([1, 1, 0, 0]);
+
     /**
      * Similar with [transformation]{@link Transformation}, it contains 4 numbers: sx, sy, ox, oy.<br>
      * @see {@link http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification}
@@ -69,41 +104,4 @@ class TileSystem {
     }
 }
 
-const semiCircum = 6378137 * Math.PI;
-
-extend(TileSystem, /** @lends TileSystem */ {
-    /**
-     * The most common used tile system, used by google maps, bing maps and amap, soso maps in China.
-     * @see {@link https://en.wikipedia.org/wiki/Web_Mercator}
-     * @constant
-     * @static
-     */
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    'web-mercator': new TileSystem([1, -1, -semiCircum, semiCircum]),
-
-    /**
-     * Predefined tile system for TMS tile system, A tile system published by [OSGEO]{@link http://www.osgeo.org/}. <br>
-     * Also used by mapbox's [mbtiles]{@link https://github.com/mapbox/mbtiles-spec} specification.
-     * @see {@link http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification}
-     * @constant
-     * @static
-     */
-    'tms-global-mercator': new TileSystem([1, 1, -semiCircum, -semiCircum]),
-
-    /**
-     * Another tile system published by [OSGEO]{@link http://www.osgeo.org/}, based on EPSG:4326 SRS.
-     * @see {@link http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification#global-geodetic}
-     * @constant
-     * @static
-     */
-    'tms-global-geodetic': new TileSystem([1, 1, -180, -90]),
-
-    /**
-     * Tile system used by [baidu]{@link http://map.baidu.com}
-     * @constant
-     * @static
-     */
-    'baidu': new TileSystem([1, 1, 0, 0])
-});
-
 export default TileSystem;

packages/vt/src/layer/layer/VectorTileLayer.ts

@@ -331,24 +331,12 @@ class VectorTileLayer extends maptalks.TileLayer {
                 }
             }
         }
-        if (!options.tileSystem) {
-            if (options.tms) {
-                if (is3857) {
-                    options.tileSystem = [
-                        1,
-                        1,
-                        -6378137 * Math.PI,
-                        -6378137 * Math.PI,
-                    ];
-                } else if (is4326) {
-                    options.tileSystem = [1, 1, -180, -90];
-                }
-            } else {
-                if (is4326) {
-                    options.tileSystem = [1, -1, -180, 90];
-                }
+        if (!options.tileSystem && !options.tms) {
+            if (is4326) {
+                options.tileSystem = [1, -1, -180, 90];
             }
         }
+        super['_prepareOptions']();
     }
 
     forceReload(): this {