Skip to content

Commit 871d26d

Browse files
songyumengsongyumeng
committed
【feature】ol.source.TileSuperMapRest 支持overflowTiles参数，在当前视口范围外额外渲染的瓦片圈数
AI-GEN: 60% Claude
1 parent 9ca62b2 commit 871d26d

2 files changed

Lines changed: 116 additions & 9 deletions

File tree

‎src/openlayers/mapping/TileSuperMapRest.js‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,51 @@ import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util
77
import { ServerGeometry } from '@supermapgis/iclient-common/iServer/ServerGeometry';
88
import { Util } from '../core/Util';
99
import TileImage from 'ol/source/TileImage';
10+
import TileRange from 'ol/TileRange';
1011
import Geometry from 'ol/geom/Geometry';
1112
import GeoJSON from 'ol/format/GeoJSON';
1213
import * as olSize from 'ol/size';
1314
import * as olTilegrid from 'ol/tilegrid';
1415
import TileGrid from 'ol/tilegrid/TileGrid';
1516

17+
function getOverflowTileCount(overflowTiles) {
18+
return Math.max(0, Math.floor(Number(overflowTiles) || 0));
19+
}
20+
21+
function wrapTileGridWithOverflow(tileGrid, overflowTiles) {
22+
const overflowTileCount = getOverflowTileCount(overflowTiles);
23+
if (!tileGrid || !overflowTileCount) {
24+
return tileGrid;
25+
}
26+
27+
const wrappedTileGrid = Object.create(tileGrid);
28+
wrappedTileGrid.overflowTiles = overflowTileCount;
29+
wrappedTileGrid.getTileRangeForExtentAndZ = function (extent, z, tempTileRange) {
30+
const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z, tempTileRange);
31+
if (!tileRange) {
32+
return tileRange;
33+
}
34+
tileRange.minX -= overflowTileCount;
35+
tileRange.maxX += overflowTileCount;
36+
tileRange.minY -= overflowTileCount;
37+
tileRange.maxY += overflowTileCount;
38+
return tileRange;
39+
};
40+
wrappedTileGrid.getFullTileRange = function (z) {
41+
const tileRange = tileGrid.getFullTileRange ? tileGrid.getFullTileRange(z) : null;
42+
if (!tileRange) {
43+
return tileRange;
44+
}
45+
return new TileRange(
46+
tileRange.minX - overflowTileCount,
47+
tileRange.maxX + overflowTileCount,
48+
tileRange.minY - overflowTileCount,
49+
tileRange.maxY + overflowTileCount
50+
);
51+
};
52+
return wrappedTileGrid;
53+
}
54+
1655
/**
1756
* @class TileSuperMapRest
1857
* @browsernamespace ol.source
@@ -36,6 +75,7 @@ import TileGrid from 'ol/tilegrid/TileGrid';
3675
* @param {string} [options.format = 'png'] - 瓦片表述类型，支持 "png" 、"webp"、"bmp" 、"jpg"、"gif" 等图片类型。
3776
* @param {(NDVIParameter|HillshadeParameter)} [options.rasterfunction] - 栅格分析参数。
3877
* @param {ChartSetting} [options.chartSetting] - 海图显示参数设置类，用于管理海图显示环境，包括海图的显示模式、显示类型名称、颜色模式、安全水深线等各种显示风格。
78+
* @param {number} [options.overflowTiles = 0] - 在当前视口范围外额外渲染的瓦片圈数。为 1 时上下左右各多请求一圈瓦片，可用于缓解符号在图层范围边缘被裁切的问题。
3979
* @extends {ol.source.TileImage}
4080
* @usage
4181
*/
@@ -46,6 +86,7 @@ export class TileSuperMapRest extends TileImage {
4686
options.attributions || "Map Data <span>© SuperMap iServer</span> with <span>© SuperMap iClient</span>";
4787

4888
options.format = options.format ? options.format : 'png';
89+
const tileGrid = wrapTileGridWithOverflow(options.tileGrid, options.overflowTiles);
4990

5091
super({
5192
attributions: options.attributions,
@@ -57,14 +98,15 @@ export class TileSuperMapRest extends TileImage {
5798
reprojectionErrorThreshold: options.reprojectionErrorThreshold,
5899
state: options.state,
59100
tileClass: options.tileClass,
60-
tileGrid: options.tileGrid,
101+
tileGrid: tileGrid,
61102
tileLoadFunction: options.tileLoadFunction,
62103
tilePixelRatio: options.tilePixelRatio,
63104
tileUrlFunction: tileUrlFunction,
64105
wrapX: options.wrapX !== undefined ? options.wrapX : false,
65106
cacheEnabled: options.cacheEnabled,
66107
layersID: options.layersID
67108
});
109+
options.tileGrid = tileGrid;
68110
if (options.tileProxy) {
69111
this.tileProxy = options.tileProxy;
70112
}
@@ -166,22 +208,28 @@ export class TileSuperMapRest extends TileImage {
166208
function tileUrlFunction(tileCoord, pixelRatio, projection) {
167209
if (!me.tileGrid) {
168210
if (options.extent) {
169-
me.tileGrid = TileSuperMapRest.createTileGrid(options.extent);
211+
me.tileGrid = wrapTileGridWithOverflow(TileSuperMapRest.createTileGrid(options.extent), options.overflowTiles);
170212
if (me.resolutions) {
171213
me.tileGrid.resolutions = me.resolutions;
172214
}
173215
} else {
174216
if (projection.getCode() === 'EPSG:3857') {
175-
me.tileGrid = TileSuperMapRest.createTileGrid([
176-
-20037508.3427892,
177-
-20037508.3427892,
178-
20037508.3427892,
179-
20037508.3427892
180-
]);
217+
me.tileGrid = wrapTileGridWithOverflow(
218+
TileSuperMapRest.createTileGrid([
219+
-20037508.3427892,
220+
-20037508.3427892,
221+
20037508.3427892,
222+
20037508.3427892
223+
]),
224+
options.overflowTiles
225+
);
181226
me.extent = [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
182227
}
183228
if (projection.getCode() === 'EPSG:4326') {
184-
me.tileGrid = TileSuperMapRest.createTileGrid([-180, -90, 180, 90]);
229+
me.tileGrid = wrapTileGridWithOverflow(
230+
TileSuperMapRest.createTileGrid([-180, -90, 180, 90]),
231+
options.overflowTiles
232+
);
185233
me.extent = [-180, -90, 180, 90];
186234
}
187235
}

‎test/openlayers/mapping/TileSuperMapRestSpec.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {getQueryValue} from '../../tool/utils';
66

77
import Point from 'ol/geom/Point';
88
import * as olProj from 'ol/proj';
9+
import TileGrid from 'ol/tilegrid/TileGrid';
910

1011
var url = GlobeParameter.imageURL;
1112
describe('openlayers_TileSuperMapRest', () => {
@@ -46,6 +47,64 @@ describe('openlayers_TileSuperMapRest', () => {
4647
expect(tileSourcetile.getTileGrid().getResolution(0)).toEqual(90.0 / 256);
4748
});
4849

50+
it('tileGrid_overflowTiles_internalGrid', () => {
51+
var tileSource = new TileSuperMapRest({
52+
url: url,
53+
extent: [-180, -90, 180, 90],
54+
overflowTiles: 1,
55+
prjCoordSys: {
56+
epsgCode: 4326
57+
}
58+
});
59+
tileSource.tileUrlFunction([0, 0, 0], 1, olProj.get('EPSG:4326'));
60+
const tileRange = tileSource.getTileGrid().getTileRangeForExtentAndZ([-180, -90, 180, 90], 0);
61+
const fullTileRange = tileSource.getTileGrid().getFullTileRange(0);
62+
expect(tileRange.minX).toBe(-1);
63+
expect(tileRange.maxX).toBe(1);
64+
expect(tileRange.minY).toBe(-1);
65+
expect(tileRange.maxY).toBe(1);
66+
expect(fullTileRange.minX).toBe(-1);
67+
expect(fullTileRange.maxX).toBe(1);
68+
expect(fullTileRange.minY).toBe(-1);
69+
expect(fullTileRange.maxY).toBe(1);
70+
});
71+
72+
it('tileGrid_overflowTiles_customTileGrid', () => {
73+
var tileGrid = new TileGrid({
74+
extent: [-180, -90, 180, 90],
75+
origin: [-180, 90],
76+
resolutions: [180 / 256],
77+
tileSize: 256
78+
});
79+
var tileSource = new TileSuperMapRest({
80+
url: url,
81+
tileGrid: tileGrid,
82+
overflowTiles: 1,
83+
prjCoordSys: {
84+
epsgCode: 4326
85+
}
86+
});
87+
const tileRange = tileSource.getTileGrid().getTileRangeForExtentAndZ([-180, -90, 180, 90], 0);
88+
expect(tileRange.minX).toBe(-1);
89+
expect(tileRange.maxX).toBe(1);
90+
expect(tileRange.minY).toBe(-1);
91+
expect(tileRange.maxY).toBe(1);
92+
});
93+
94+
it('tileUrlFunction_overflowTiles_negativeTileCoord', () => {
95+
var tileSource = new TileSuperMapRest({
96+
url: url,
97+
extent: [-180, -90, 180, 90],
98+
overflowTiles: 1,
99+
prjCoordSys: {
100+
epsgCode: 4326
101+
}
102+
});
103+
var tileUrl = tileSource.tileUrlFunction([0, -1, -1], 1, olProj.get('EPSG:4326'));
104+
expect(tileUrl).toContain('&x=-1');
105+
expect(tileUrl).toContain('&y=-1');
106+
});
107+
49108
it('tileUrlFunction_tilePoxy', () => {
50109
var tileOptions = {
51110
url: url,

0 commit comments

Comments
 (0)