Skip to content

Commit 8e2b196

Browse files
deyihudeyihu
authored
TileLayer _getTileBBox Consider offset (#2422)
* TileLayer _getTileBBox Consider offset * spec
1 parent 41fa9e2 commit 8e2b196

File tree

2 files changed

+215
-5
lines changed

2 files changed

+215
-5
lines changed

‎src/layer/tile/TileLayer.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1537,12 +1537,18 @@ class TileLayer extends Layer {
15371537
}
15381538

15391539
const extent2d = tile.extent2d;
1540+
const offset = tile.offset || [0, 0];
15401541
if (!extent2d) {
15411542
return;
15421543
}
15431544
const res = tile.res;
1545+
const [offsetX, offsetY] = offset;
15441546

1545-
const { xmin, ymin, xmax, ymax } = extent2d;
1547+
let { xmin, ymin, xmax, ymax } = extent2d;
1548+
xmin -= offsetX;
1549+
xmax -= offsetX;
1550+
ymin -= offsetY;
1551+
ymax -= offsetY;
15461552
const pmin = new Point(xmin, ymin),
15471553
pmax = new Point(xmax, ymax);
15481554
const min = map.pointAtResToCoordinate(pmin, res, TEMP_POINT0),

‎test/layer/TileOffsetSpec.js

Lines changed: 208 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@ describe('TileLayer with Offset Specs', function () {
5656
var tile = new maptalks.TileLayer('tile', {
5757
offset: [100, 100],
5858
renderer: 'canvas',
59-
urlTemplate : '/resources/tile-green-256.png'
59+
urlTemplate: '/resources/tile-green-256.png'
6060
}).addTo(map);
61-
61+
6262
setTimeout(() => {
6363
expect(tile).to.be.painted(0, 0);
6464
done();
@@ -70,13 +70,217 @@ describe('TileLayer with Offset Specs', function () {
7070
var tile = new maptalks.TileLayer('tile', {
7171
offset: 100,
7272
renderer: 'canvas',
73-
urlTemplate : '/resources/tile-green-256.png'
73+
urlTemplate: '/resources/tile-green-256.png'
7474
}).addTo(map);
75-
75+
7676
setTimeout(() => {
7777
expect(tile).to.be.painted(0, 0);
7878
done();
7979
}, 500);
8080

8181
});
82+
83+
it('#2421 _getTileBBox Consider offset', function (done) {
84+
createMap(16, 0, 0);
85+
86+
map.setView({
87+
"center": [110.32920106, 25.27279731], "zoom": 16.305775789479334, "pitch": 46.800000000000104, "bearing": 1.2000000000000455
88+
});
89+
90+
//is WGS84
91+
const shield = {
92+
"type": "Feature",
93+
"geometry": {
94+
"type": "Polygon",
95+
"coordinates": [
96+
[
97+
[
98+
110.32250576374257,
99+
25.28102209831316
100+
],
101+
[
102+
110.32409363147939,
103+
25.281953416813796
104+
],
105+
[
106+
110.32559566852773,
107+
25.282651900997177
108+
],
109+
[
110+
110.32790840417357,
111+
25.283212444189076
112+
],
113+
[
114+
110.32966793328734,
115+
25.28375570437403
116+
],
117+
[
118+
110.33138454705687,
119+
25.28379450857985
120+
],
121+
[
122+
110.3325432613513,
123+
25.282785595194014
124+
],
125+
[
126+
110.33373821077467,
127+
25.280502147206814
128+
],
129+
[
130+
110.33429611024978,
131+
25.279570817564924
132+
],
133+
[
134+
110.33505172194086,
135+
25.277973332578497
136+
],
137+
[
138+
110.33593167510243,
139+
25.27676999761006
140+
],
141+
[
142+
110.33670415129872,
143+
25.274829659771175
144+
],
145+
[
146+
110.33773411956044,
147+
25.274247552369303
148+
],
149+
[
150+
110.33884991851065,
151+
25.272734060056557
152+
],
153+
[
154+
110.33940781798573,
155+
25.271569822356483
156+
],
157+
[
158+
110.33968999753338,
159+
25.269847624923436
160+
],
161+
[
162+
110.33850982556683,
163+
25.269847624923436
164+
],
165+
[
166+
110.33681466946942,
167+
25.270196902362258
168+
],
169+
[
170+
110.33522164876206,
171+
25.27070742845115
172+
],
173+
[
174+
110.33211028630478,
175+
25.271211936410623
176+
],
177+
[
178+
110.33122593468767,
179+
25.27160278339744
180+
],
181+
[
182+
110.33023115394707,
183+
25.271581310042173
184+
],
185+
[
186+
110.32855745552179,
187+
25.27165892622897
188+
],
189+
[
190+
110.32819267509575,
191+
25.27086335796126
192+
],
193+
[
194+
110.3277088968281,
195+
25.270124814946108
196+
],
197+
[
198+
110.32674330158272,
199+
25.268456034898886
200+
],
201+
[
202+
110.32597853083944,
203+
25.26743455749359
204+
],
205+
[
206+
110.32544037140936,
207+
25.266171432216623
208+
],
209+
[
210+
110.32434603013128,
211+
25.265705713297294
212+
],
213+
[
214+
110.32340189255804,
215+
25.265977382884028
216+
],
217+
[
218+
110.32342335023016,
219+
25.26672670329696
220+
],
221+
[
222+
110.32367997454732,
223+
25.269072049176387
224+
],
225+
[
226+
110.3236585168752,
227+
25.271893599759114
228+
],
229+
[
230+
110.32360967234699,
231+
25.27387151593713
232+
],
233+
[
234+
110.32334962566374,
235+
25.27587146624989
236+
],
237+
[
238+
110.32338824947355,
239+
25.27749357688312
240+
],
241+
[
242+
110.32225099285124,
243+
25.27999655193813
244+
],
245+
[
246+
110.32235828121183,
247+
25.280889073188973
248+
],
249+
[
250+
110.32250576374257,
251+
25.28102209831316
252+
]
253+
]
254+
]
255+
},
256+
"id": "shield",
257+
"properties": null
258+
};
259+
const mask = new maptalks.GeoJSON.toGeometry(shield);
260+
261+
function offset(z) {
262+
const map = this.getMap();
263+
const center = map.getCenter();
264+
const c = maptalks.CRSTransform.transform(center.toArray(), "GCJ02", "WGS84");
265+
const offset = map
266+
.coordToPoint(center, z)
267+
.sub(map.coordToPoint(new maptalks.Coordinate(c), z));
268+
return offset._round().toArray();
269+
}
270+
271+
272+
var tileLayer = new maptalks.TileLayer('tile', {
273+
offset,
274+
renderer: 'canvas',
275+
urlTemplate: '/resources/tile-green-256.png'
276+
}).addTo(map);
277+
278+
tileLayer.setMask(mask);
279+
280+
setTimeout(() => {
281+
expect(tileLayer.getTiles().count).to.be.equal(16);
282+
done();
283+
}, 500);
284+
285+
});
82286
});

0 commit comments

Comments
 (0)