Skip to content

Commit bf878bf

Browse files
songyumengsongyumeng
committed
【feature】L.supermap.tiledMapLayer 支持设置overflowTiles控制额外渲染的瓦片圈数
1 parent ec985fd commit bf878bf

File tree

2 files changed

+244
-77
lines changed

2 files changed

+244
-77
lines changed

‎src/leaflet/mapping/TiledMapLayer.js

+84-43
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
/* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
22
* This program are made available under the terms of the Apache License, Version 2.0
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
4-
import L from 'leaflet';
5-
import '../core/Base';
6-
import { SecurityManager } from '@supermapgis/iclient-common/security/SecurityManager';
7-
import { ServerGeometry } from '@supermapgis/iclient-common/iServer/ServerGeometry';
8-
import { Unit } from '@supermapgis/iclient-common/REST';
9-
import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util';
10-
11-
import * as Util from '../core/Util';
12-
import Attributions from '../core/Attributions';
4+
import L from 'leaflet';
5+
import '../core/Base';
6+
import { SecurityManager } from '@supermapgis/iclient-common/security/SecurityManager';
7+
import { ServerGeometry } from '@supermapgis/iclient-common/iServer/ServerGeometry';
8+
import { Unit } from '@supermapgis/iclient-common/REST';
9+
import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util';
1310

11+
import * as Util from '../core/Util';
12+
import Attributions from '../core/Attributions';
1413
/**
1514
* @class TiledMapLayer
1615
* @deprecatedclassinstance L.supermap.tiledMapLayer
@@ -41,12 +40,12 @@
4140
* @param {string} [options.attribution='Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' title='SuperMap iServer' target='_blank'>SuperMap iServer</a></span>'] - 版权描述信息。
4241
* @param {Array.<number>} [options.subdomains] - 子域名数组。
4342
* @param {ChartSetting} [options.chartSetting] - 海图显示参数设置类，用于管理海图显示环境，包括海图的显示模式、显示类型名称、颜色模式、安全水深线等各种显示风格。
43+
* @param {number} [options.overflowTiles = 0] - 绘制超出图层范围的瓦片圈数。常用于位于地图边缘的要素符号显示不全的场景。默认值为0，表示不绘制超出图层范围的瓦片。当 options.noWrap 为 true 时，overflowTiles有效。
4444
* @fires TiledMapLayer#tilesetsinfoloaded
4545
* @fires TiledMapLayer#tileversionschanged
4646
* @usage
4747
*/
4848
export var TiledMapLayer = L.TileLayer.extend({
49-
5049
options: {
5150
//如果有layersID，则是在使用专题图
5251
layersID: null,
@@ -68,9 +67,10 @@ export var TiledMapLayer = L.TileLayer.extend({
6867
crs: null,
6968
format: 'png',
7069
//启用托管地址。
71-
tileProxy:null,
70+
tileProxy: null,
7271
attribution: Attributions.Common.attribution,
73-
subdomains: null
72+
subdomains: null,
73+
overflowTiles: 0
7474
},
7575

7676
initialize: function (url, options) {
@@ -94,7 +94,52 @@ export var TiledMapLayer = L.TileLayer.extend({
9494
this._crs = this.options.crs || map.options.crs;
9595
L.TileLayer.prototype.onAdd.call(this, map);
9696
},
97+
/**
98+
* @override
99+
* @private
100+
*/
101+
_resetGrid: function () {
102+
L.TileLayer.prototype._resetGrid.call(this);
103+
const overflowTiles = this.options.overflowTiles;
104+
if (this._globalTileRange && overflowTiles && this.options.noWrap) {
105+
this._globalTileRange.min = this._globalTileRange.min.subtract([overflowTiles, overflowTiles]);
106+
this._globalTileRange.max = this._globalTileRange.max.add([overflowTiles, overflowTiles]);
107+
}
108+
if (this.options.bounds && this.options.noWrap && overflowTiles) {
109+
const bounds = L.latLngBounds(this.options.bounds);
110+
const sw = bounds.getSouthWest();
111+
const ne = bounds.getNorthEast();
112+
this._boundsTileRange = this._pxBoundsToTileRange(L.bounds(this._crs.latLngToPoint(sw, this._tileZoom), this._crs.latLngToPoint(ne, this._tileZoom)));
113+
this._boundsTileRange.min = this._boundsTileRange.min.subtract([overflowTiles, overflowTiles]);
114+
this._boundsTileRange.max = this._boundsTileRange.max.add([overflowTiles, overflowTiles]);
97115

116+
}
117+
},
118+
/**
119+
* @override
120+
* @private
121+
*/
122+
_isValidTile: function (coords) {
123+
const crs = this._map.options.crs;
124+
if (!crs.infinite) {
125+
const bounds = this._globalTileRange;
126+
if (
127+
((!crs.wrapLng || this.options.noWrap) && (coords.x < bounds.min.x || coords.x > bounds.max.x)) ||
128+
(!crs.wrapLat && (coords.y < bounds.min.y || coords.y > bounds.max.y))
129+
) {
130+
return false;
131+
}
132+
}
133+
if (!this.options.bounds) {
134+
return true;
135+
}
136+
if (this._boundsTileRange && this.options.noWrap) {
137+
return coords.x >= this._boundsTileRange.min.x && coords.x <= this._boundsTileRange.max.x && coords.y >= this._boundsTileRange.min.y && coords.y <= this._boundsTileRange.max.y;
138+
} else {
139+
var tileBounds = this._tileCoordsToBounds(coords);
140+
return L.latLngBounds(this.options.bounds).overlaps(tileBounds);
141+
}
142+
},
98143
/**
99144
* @function TiledMapLayer.prototype.getTileUrl
100145
* @description 根据行列号获取瓦片地址。
@@ -104,16 +149,16 @@ export var TiledMapLayer = L.TileLayer.extend({
104149
getTileUrl: function (coords) {
105150
var scale = this.getScaleFromCoords(coords);
106151
var layerUrl = this._getLayerUrl();
107-
var tileUrl = layerUrl + "&scale=" + scale + "&x=" + coords.x + "&y=" + coords.y;
152+
var tileUrl = layerUrl + '&scale=' + scale + '&x=' + coords.x + '&y=' + coords.y;
108153
//支持代理
109154
if (this.options.tileProxy) {
110155
tileUrl = this.options.tileProxy + encodeURIComponent(tileUrl);
111156
}
112157
if (!this.options.cacheEnabled) {
113-
tileUrl += "&_t=" + new Date().getTime();
158+
tileUrl += '&_t=' + new Date().getTime();
114159
}
115160
if (this.options.subdomains) {
116-
tileUrl = L.Util.template(tileUrl, {s: this._getSubdomain(coords)});
161+
tileUrl = L.Util.template(tileUrl, { s: this._getSubdomain(coords) });
117162
}
118163
return tileUrl;
119164
},
@@ -165,10 +210,7 @@ export var TiledMapLayer = L.TileLayer.extend({
165210
var ne = crs.project(tileBounds.getNorthEast());
166211
var sw = crs.project(tileBounds.getSouthWest());
167212
var tileSize = me.options.tileSize;
168-
var resolution = Math.max(
169-
Math.abs(ne.x - sw.x) / tileSize,
170-
Math.abs(ne.y - sw.y) / tileSize
171-
);
213+
var resolution = Math.max(Math.abs(ne.x - sw.x) / tileSize, Math.abs(ne.y - sw.y) / tileSize);
172214
var mapUnit = Unit.METER;
173215
if (crs.code) {
174216
var array = crs.code.split(':');
@@ -181,7 +223,6 @@ export var TiledMapLayer = L.TileLayer.extend({
181223
}
182224
},
183225

184-
185226
/**
186227
* @function TiledMapLayer.prototype.setTileSetsInfo
187228
* @description 设置瓦片集信息。
@@ -275,7 +316,7 @@ export var TiledMapLayer = L.TileLayer.extend({
275316
*/
276317
mergeTileVersionParam: function (version) {
277318
if (version) {
278-
this.requestParams["tileversion"] = version;
319+
this.requestParams['tileversion'] = version;
279320
this._paramsChanged = true;
280321
this.redraw();
281322
this._paramsChanged = false;
@@ -288,11 +329,11 @@ export var TiledMapLayer = L.TileLayer.extend({
288329
* @description 更新参数。
289330
* @param {Object} params - 参数对象。
290331
*/
291-
updateParams: function(params) {
292-
Object.assign(this.requestParams, params);
293-
this._paramsChanged = true;
294-
this.redraw();
295-
this._paramsChanged = false;
332+
updateParams: function (params) {
333+
Object.assign(this.requestParams, params);
334+
this._paramsChanged = true;
335+
this.redraw();
336+
this._paramsChanged = false;
296337
},
297338

298339
_getLayerUrl: function () {
@@ -320,60 +361,60 @@ export var TiledMapLayer = L.TileLayer.extend({
320361
if (!(tileSize instanceof L.Point)) {
321362
tileSize = L.point(tileSize, tileSize);
322363
}
323-
params["width"] = tileSize.x;
324-
params["height"] = tileSize.y;
364+
params['width'] = tileSize.x;
365+
params['height'] = tileSize.y;
325366

326-
params["redirect"] = options.redirect === true;
327-
params["transparent"] = options.transparent === true;
328-
params["cacheEnabled"] = !(options.cacheEnabled === false);
367+
params['redirect'] = options.redirect === true;
368+
params['transparent'] = options.transparent === true;
369+
params['cacheEnabled'] = !(options.cacheEnabled === false);
329370

330371
if (options.prjCoordSys) {
331-
params["prjCoordSys"] = JSON.stringify(options.prjCoordSys);
372+
params['prjCoordSys'] = JSON.stringify(options.prjCoordSys);
332373
}
333374

334375
if (options.layersID) {
335-
params["layersID"] = options.layersID.toString();
376+
params['layersID'] = options.layersID.toString();
336377
}
337378

338379
if (options.clipRegionEnabled && options.clipRegion) {
339380
options.clipRegion = ServerGeometry.fromGeometry(Util.toSuperMapGeometry(options.clipRegion));
340-
params["clipRegionEnabled"] = options.clipRegionEnabled;
341-
params["clipRegion"] = JSON.stringify(options.clipRegion);
381+
params['clipRegionEnabled'] = options.clipRegionEnabled;
382+
params['clipRegion'] = JSON.stringify(options.clipRegion);
342383
}
343384

344385
//切片的起始参考点，默认为地图范围的左上角。
345386
var crs = me._crs;
346387
if (crs.options && crs.options.origin) {
347-
params["origin"] = JSON.stringify({
388+
params['origin'] = JSON.stringify({
348389
x: crs.options.origin[0],
349390
y: crs.options.origin[1]
350391
});
351392
} else if (crs.projection && crs.projection.bounds) {
352393
var bounds = crs.projection.bounds;
353394
var tileOrigin = L.point(bounds.min.x, bounds.max.y);
354-
params["origin"] = JSON.stringify({
395+
params['origin'] = JSON.stringify({
355396
x: tileOrigin.x,
356397
y: tileOrigin.y
357398
});
358399
}
359400

360401
if (options.overlapDisplayed === false) {
361-
params["overlapDisplayed"] = false;
402+
params['overlapDisplayed'] = false;
362403
if (options.overlapDisplayedOptions) {
363-
params["overlapDisplayedOptions"] = options.overlapDisplayedOptions;
404+
params['overlapDisplayedOptions'] = options.overlapDisplayedOptions;
364405
}
365406
} else {
366-
params["overlapDisplayed"] = true;
407+
params['overlapDisplayed'] = true;
367408
}
368409

369410
if (params.cacheEnabled === true && options.tileversion) {
370-
params["tileversion"] = options.tileversion.toString();
411+
params['tileversion'] = options.tileversion.toString();
371412
}
372413
if (options.rasterfunction) {
373-
params["rasterfunction"] = JSON.stringify(options.rasterfunction);
414+
params['rasterfunction'] = JSON.stringify(options.rasterfunction);
374415
}
375416
if (options.chartSetting) {
376-
params["chartSetting"] = JSON.stringify(options.chartSetting);
417+
params['chartSetting'] = JSON.stringify(options.chartSetting);
377418
}
378419

379420
return params;

0 commit comments

Comments
 (0)