【fix】修复leaflet 天地图layer noWrap参数无效的问题

Author: songyumeng

src/leaflet/core/ExtendsCRS.js

@@ -36,12 +36,15 @@ for (let i = 1; i < 19; i++) {
 export var TianDiTu_WGS84CRS = L.CRS.TianDiTu_WGS84 = L.Proj.CRS("EPSG:4326",{
     origin: [-180, 90],
     resolutions: tdt_WGS84_resolutions,
-    bounds: L.bounds([-180, -90], [180, 90])
+    bounds: L.bounds([-180, -90], [180, 90]),
+    wrapLng: [-180, 180]
 });
 
+const c = Math.PI * 2 * 6378137;
+const halfC = c / 2;
 var tdt_Mercator_resolutions = [];
 for (let i = 1; i < 19; i++) {
-    tdt_Mercator_resolutions.push(78271.5169640203125 * 2 / (Math.pow(2, i)));
+    tdt_Mercator_resolutions.push(c / 256 / Math.pow(2, i));
 }
 
 /**
@@ -50,11 +53,12 @@ for (let i = 1; i < 19; i++) {
  * @category BaseTypes Projection
  * @namespace
  */
-export var TianDiTu_MercatorCRS = L.CRS.TianDiTu_Mercator = L.Proj.CRS("EPSG:3857",{
-    origin: [-20037508.3427892, 20037508.3427892],
+export var TianDiTu_MercatorCRS = (L.CRS.TianDiTu_Mercator = L.Proj.CRS('EPSG:3857', {
+    origin: [-halfC, halfC],
     resolutions: tdt_Mercator_resolutions,
-    bounds: L.bounds([-20037508.3427892, -20037508.3427892], [20037508.3427892, 20037508.3427892])
-});
+    bounds: L.bounds([-halfC, -halfC], [halfC, halfC]),
+    wrapLng: [-180, 180]
+}));
 L.CRS.BaiduCRS = BaiduCRS;
 L.CRS.TianDiTu_WGS84CRS = TianDiTu_WGS84CRS;
 L.CRS.TianDiTu_MercatorCRS = TianDiTu_MercatorCRS;

src/leaflet/core/Proj4Leaflet.js

@@ -26,14 +26,15 @@ L.Proj._isProj4Obj = function(a) {
  * @param {L.bounds} bounds -  投影范围参数
  */
 L.Proj.Projection = L.Class.extend({
-    initialize: function(code, def, bounds) {
+    initialize: function(code, def, bounds, wrapLng) {
         var isP4 = L.Proj._isProj4Obj(code);
         this._proj = isP4 ? code : this._projFromCodeDef(code, def);
         var boundsOption = bounds;
         if (L.Util.isArray(bounds)) {
             boundsOption = L.bounds(bounds);
         }
         this.bounds = isP4 ? def : boundsOption;
+        this.wrapLng = wrapLng;
     },
 
     /**
@@ -54,8 +55,8 @@ L.Proj.Projection = L.Class.extend({
      * @param {number} unbounded -  坐标点高程值等。
      * @returns {L.LatLng} 返回经纬度坐标
      */
-    unproject: function(point, unbounded) {
-        if (this.bounds) {
+    unproject: function(point, zoom) {
+        if (this.bounds && !this.wrapLng) {
             point.x =
                 point.x < this.bounds.min.x
                     ? this.bounds.min.x
@@ -70,7 +71,7 @@ L.Proj.Projection = L.Class.extend({
                     : point.y;
         }
         var point2 = this._proj.inverse([point.x, point.y]);
-        return new L.LatLng(point2[1], point2[0], unbounded);
+        return new L.LatLng(point2[1], point2[0], zoom);
     },
 
     _projFromCodeDef: function(code, def) {
@@ -111,6 +112,7 @@ L.Proj.Projection = L.Class.extend({
  * @param {Array.<number>} [options.resolutions] - 分辨率数组。
  * @param {(Array.<number>|L.Bounds)} [options.bounds] - 范围。
  * @param {number} [options.dpi=96] - dpi。
+ * @param {number} [options.wrapLng] - 定义经度（水平）坐标轴是否在给定范围内环绕。大多数情况下默认为[-180，180]。
  * @example
  *    var crs =L.Proj.CRS("EPSG:4326",{
  *          origin: [-180,90],
@@ -136,15 +138,18 @@ export var CRS = L.Class.extend({
             code = proj.srsCode;
             options = options || {};
 
-            this.projection = new L.Proj.Projection(proj, options.bounds);
+            this.projection = new L.Proj.Projection(proj, options.bounds,options.wrapLng);
         } else {
             code = srsCode;
             options = options || {};
             def = options.def || '';
-            this.projection = new L.Proj.Projection(code, def, options.bounds);
+            this.projection = new L.Proj.Projection(code, def, options.bounds,options.wrapLng);
         }
 
         L.Util.setOptions(this, options);
+        if (this.options.wrapLng) {
+            this.wrapLng = this.options.wrapLng;
+        }
         this.code = code;
         this.transformation = this.options.transformation;
         this.options.dpi = this.options.dpi || 96;

src/leaflet/mapping/TiandituTileLayer.js

@@ -1,12 +1,10 @@
 /* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
  * This program are made available under the terms of the Apache License, Version 2.0
  * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
-import L from "leaflet";
-import "../core/Base";
-import {
-    WMTSLayer
-} from "./TileLayer.WMTS";
-import Attributions from '../core/Attributions'
+import L from 'leaflet';
+import '../core/Base';
+import { WMTSLayer } from './TileLayer.WMTS';
+import Attributions from '../core/Attributions';
 
 /**
  * @class L.supermap.tiandituTileLayer
@@ -22,30 +20,35 @@ import Attributions from '../core/Attributions'
  * @param {boolean} [options.isLabel=false] - 是否是标注图层。
  * @param {Array.<number>} [options.subdomains=[0, 1, 2, 3, 4, 5, 6, 7]] - 子域名数组。
  * @param {string} [options.attribution='Map Data <a href='https://www.tianditu.gov.cn' target='_blank'><img style='background-color:transparent;bottom:2px;opacity:1;' src='https://api.tianditu.gov.cn/img/map/logo.png' width='53px' height='22px' opacity='0'></a>'] - 版权信息
+ * @param {string} [options.noWrap=true] - 图层是否X方向平铺。
  */
 export var TiandituTileLayer = WMTSLayer.extend({
-
     layerLabelMap: {
-        "vec": "cva",
-        "ter": "cta",
-        "img": "cia"
+        vec: 'cva',
+        ter: 'cta',
+        img: 'cia'
     },
     layerZoomMap: {
-        "vec": 18,
-        "ter": 14,
-        "img": 18
+        vec: 18,
+        ter: 14,
+        img: 18
     },
     options: {
-        layerType: "vec", //(vec:矢量图层，vec:矢量标签图层，img:影像图层,cia:影像标签图层，ter:地形,cta:地形标签图层)
+        layerType: 'vec', //(vec:矢量图层，vec:矢量标签图层，img:影像图层,cia:影像标签图层，ter:地形,cta:地形标签图层)
         isLabel: false,
         attribution: Attributions.Tianditu.attribution,
-        url: "https://t{s}.tianditu.gov.cn/{layer}_{proj}/wmts?",
+        url: 'https://t{s}.tianditu.gov.cn/{layer}_{proj}/wmts?',
         zoomOffset: 1,
-        key: "",
+        key: '',
         dpi: 96,
-        style: "default",
-        format: "tiles",
-        subdomains: [0, 1, 2, 3, 4, 5, 6, 7]
+        style: 'default',
+        format: 'tiles',
+        subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
+        bounds: [
+            [-90, -180],
+            [90, 180]
+        ],
+        noWrap: true
     },
 
     initialize: function (options) {
@@ -63,10 +66,27 @@ export var TiandituTileLayer = WMTSLayer.extend({
         this.options.tilematrixSet = map.options.crs.code === "EPSG:4326" ? "c" : "w";
         this._url = this._url.replace("{layer}", this.options.layer).replace("{proj}", this.options.tilematrixSet);
         WMTSLayer.prototype.onAdd.call(this, map);
+    },
+    _isValidTile: function (coords) {
+        const crs = this._map.options.crs;
+        if (!crs.infinite) {
+            const bounds = this._globalTileRange;
+            if (
+                ((!crs.wrapLng || this.options.noWrap) && (coords.x < bounds.min.x || coords.x > bounds.max.x)) ||
+                (!crs.wrapLat && (coords.y < bounds.min.y || coords.y > bounds.max.y))
+            ) {
+                return false;
+            }
+        }
+        if (!this.options.bounds) {
+            return true;
+        }
+        const tileBounds = this._tileCoordsToBounds(coords);
+        return L.latLngBounds(this.options.bounds).overlaps(tileBounds);
     }
 });
 export var tiandituTileLayer = function (options) {
     return new TiandituTileLayer(options);
 };
 
-L.supermap.tiandituTileLayer = tiandituTileLayer;
+L.supermap.tiandituTileLayer = tiandituTileLayer;

src/leaflet/mapping/TileLayer.WMTS.js

@@ -21,6 +21,7 @@ import "../core/Base";
  * @param {Array.<L.supermap.wmtsLayer.matrix>} [options.matrixIds] - 瓦片矩阵对象。不设置时，默认为获取当前级别为tilematrix参数。
  * @param {string} [options.version='1.0.0'] - 版本。
  * @param {string} [options.attribution] - 版权信息。
+ * @param {string} [options.noWrap=true] - 图层是否X方向平铺。
  */
 /**
  * @typedef {Object} L.supermap.wmtsLayer.matrix
@@ -38,7 +39,8 @@ export var WMTSLayer = L.TileLayer.extend({
         matrixIds: null,
         layer: '',
         requestEncoding: 'KVP',
-        attribution: ''
+        attribution: '',
+        noWrap: true
     },
 
     //todo 自动获取Capabilities
@@ -65,6 +67,7 @@ export var WMTSLayer = L.TileLayer.extend({
 
             opt.requestEncoding = "KVP";
         }
+        
     },
 
     /**

test/leaflet/mapping/TiandituTileLayerSpec.js

@@ -10,7 +10,7 @@ describe('leaflet_TiandituTileLayer', () => {
         testDiv.style.styleFloat = 'left';
         testDiv.style.marginLeft = '8px';
         testDiv.style.marginTop = '50px';
-        testDiv.style.width = '500px';
+        testDiv.style.width = '1500px';
         testDiv.style.height = '500px';
         mockCreateTile();
         document.body.appendChild(testDiv);
@@ -147,4 +147,17 @@ describe('leaflet_TiandituTileLayer', () => {
             'https://t0.tianditu.gov.cn/cia_w/wmts?tk=123456&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix=2&tilerow=0&tilecol=0'
         );
     });
+    it('initialize_noWrap_false', () => {
+        var coords = { x: 0, y: 0, z: 0 };
+        layer = tiandituTileLayer({
+            layerType: 'img',
+            isLabel: true,
+            noWrap:false,
+            key: '123456'
+        }).addTo(map);
+        expect(layer.getTileUrl(coords)).toBe(
+            'https://t0.tianditu.gov.cn/cia_w/wmts?tk=123456&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix=2&tilerow=0&tilecol=0'
+        );
+        expect( document.querySelectorAll('.leaflet-tile').length).toBeGreaterThan(4);
+    });
 });