Skip to content

Commit 5c4313b

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【fix】mapboxgl maplibregl initmap 支持带token的url; review by qiw
1 parent cf3595b commit 5c4313b

File tree

4 files changed

+205
-5
lines changed

4 files changed

+205
-5
lines changed

‎src/mapboxgl/mapping/InitMap.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import mapboxgl from 'mapbox-gl';
22
import { MapService } from '../services/MapService';
33
import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
44
import { InitMapServiceBase, isPlaneProjection, getZoom, getTileset, getTileFormat } from '@supermapgis/iclient-common/iServer/InitMapServiceBase';
5+
import { Util } from '@supermapgis/iclient-common/commontypes/Util';
56
import proj4 from 'proj4';
67

78
/**
@@ -137,7 +138,7 @@ async function getVectorTileCRSExtent(vectorStyleUrl, restMapUrl) {
137138
if (vectorStyleData.metadata && vectorStyleData.metadata.indexbounds) {
138139
return { extent: vectorStyleData.metadata.indexbounds };
139140
}
140-
const vectorExtentDataRes = await FetchRequest.get(`${restMapUrl}/prjCoordSys/projection/extent.json`);
141+
const vectorExtentDataRes = await FetchRequest.get(Util.urlPathAppend(restMapUrl, 'prjCoordSys/projection/extent.json'));
141142
const vectorExtentData = await vectorExtentDataRes.json();
142143
return { extent: vectorExtentData, center: vectorStyleData.center };
143144
} catch (error) {
@@ -176,7 +177,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
176177
let extent = bounds;
177178
let tileUrl =
178179
sourceType === 'vector-tile'
179-
? url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY'
180+
? Util.urlAppend(Util.urlPathAppend(url, 'tileFeature/vectorstyles.json'), 'type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY')
180181
: url;
181182
let nonEnhanceExtraInfo = {};
182183
let enhanceExtraInfo = {};
@@ -228,7 +229,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
228229
const tileSize = 256;
229230
nonEnhanceExtraInfo.tileSize = tileSize;
230231
const transparent = mapOptions.transparent !== false;
231-
tileUrl += `/zxyTileImage.png?z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`;
232+
tileUrl = Util.urlAppend(Util.urlPathAppend(tileUrl, 'zxyTileImage.png'), `z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`);
232233
}
233234
}
234235
if (zoom === undefined) {

‎src/maplibregl/mapping/InitMap.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import maplibregl from 'maplibre-gl';
22
import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
33
import { MapService } from '../services/MapService';
44
import { InitMapServiceBase, isPlaneProjection, getZoom, getTileset, getTileFormat } from '@supermapgis/iclient-common/iServer/InitMapServiceBase';
5+
import { Util } from '@supermapgis/iclient-common/commontypes/Util';
56
import proj4 from 'proj4';
67
/**
78
* @function initMap
@@ -169,7 +170,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
169170
let extent = bounds;
170171
let tileUrl =
171172
sourceType === 'vector-tile'
172-
? url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY'
173+
? Util.urlAppend(Util.urlPathAppend(url, 'tileFeature/vectorstyles.json'), 'type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY')
173174
: url;
174175
let nonEnhanceExtraInfo = {};
175176
let enhanceExtraInfo = {};
@@ -221,7 +222,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
221222
const tileSize = 256;
222223
nonEnhanceExtraInfo.tileSize = tileSize;
223224
const transparent = mapOptions.transparent !== false;
224-
tileUrl += `/zxyTileImage.png?z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`;
225+
tileUrl = Util.urlAppend(Util.urlPathAppend(tileUrl, 'zxyTileImage.png'), `z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`);
225226
}
226227
}
227228
if (zoom === undefined) {

‎test/mapboxgl/mapping/InitMapSpec.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { FetchRequest } from '../../../src/common/util/FetchRequest';
55

66
describe('mapboxgl_InitMap', () => {
77
let originalTimeout, testDiv;
8+
const tokenQuery = 'token=opbFn8Nl5zUs2xhuCQ..';
89

910
beforeEach(() => {
1011
spyOn(mapboxgl, 'Map').and.callFake(mbglmap);
@@ -251,7 +252,128 @@ describe('mapboxgl_InitMap', () => {
251252
};
252253
initMap(tilesetServeRequest).then(({ map }) => {
253254
expect(map).not.toBeNull();
255+
delete mapboxgl.CRS;
256+
delete mapboxgl.proj4;
254257
done();
255258
});
256259
});
260+
261+
it('initMap raster when carring on token', async () => {
262+
const restMapUrl = 'http:/fake:8090/iserver/iserver/services/map-china400/rest/maps/China';
263+
const url = `${restMapUrl}?${tokenQuery}`;
264+
const mapServiceInfo = {
265+
dynamicProjection: false,
266+
prjCoordSys: {
267+
epsgCode: 3857
268+
},
269+
bounds: {
270+
top: 20037508.342789087,
271+
left: -20037508.342789248,
272+
bottom: -20037508.34278914,
273+
leftBottom: {
274+
x: -20037508.342789248,
275+
y: -20037508.34278914
276+
},
277+
right: 20037508.342789244,
278+
rightTop: {
279+
x: 20037508.342789244,
280+
y: 20037508.342789087
281+
}
282+
},
283+
center: {
284+
x: -7.450580596923828e-9,
285+
y: -2.60770320892334e-8
286+
}
287+
};
288+
spyOn(FetchRequest, 'get').and.callFake((url) => {
289+
expect(url).toContain(tokenQuery);
290+
if (url.indexOf('/tilesets') > -1) {
291+
return Promise.resolve(new Response(tilesetInfo_1));
292+
}
293+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
294+
});
295+
const resData = await initMap(url);
296+
const map = resData.map;
297+
expect(map).not.toBeUndefined();
298+
expect(map.options.crs).toBe(`EPSG:${mapServiceInfo.prjCoordSys.epsgCode}`);
299+
expect(map.options.center).toEqual([-6.692970425781022e-14, -2.2899993706537323e-13]);
300+
expect(Object.values(map.options.style.sources).length).toBe(1);
301+
expect(map.options.style.layers.length).toBe(1);
302+
expect(Object.values(map.options.style.sources)[0].tiles.length).toBe(1);
303+
expect(Object.values(map.options.style.sources)[0].tiles[0]).toBe(
304+
`${restMapUrl}/zxyTileImage.png?${tokenQuery}&z={z}&x={x}&y={y}&width=256&height=256&transparent=true`
305+
);
306+
});
307+
308+
it('initMap vector tile when carring on token', async () => {
309+
const restMapUrl = 'http:/fake:8090/iserver/services/map-mvt-landuse/rest/maps/landuse';
310+
const url = `${restMapUrl}?${tokenQuery}`;
311+
const mapServiceInfo = {
312+
dynamicProjection: false,
313+
prjCoordSys: {
314+
epsgCode: 4326
315+
},
316+
center: {
317+
x: 116,
318+
y: 39
319+
},
320+
bounds: {
321+
top: 90.00000000000001,
322+
left: -180,
323+
bottom: -90.00000000003598,
324+
leftBottom: { x: -180, y: -90.00000000003598 },
325+
right: 180.00000000007202,
326+
rightTop: { x: 180.00000000007202, y: 90.00000000000001 }
327+
}
328+
};
329+
const vectorStyleUrl =
330+
`${restMapUrl}/tileFeature/vectorstyles.json?${tokenQuery}&type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY`;
331+
const WKT =
332+
'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]';
333+
spyOn(FetchRequest, 'get').and.callFake((acceptUrl) => {
334+
if (acceptUrl === `${restMapUrl}/prjCoordSys.wkt?${tokenQuery}`) {
335+
return Promise.resolve(new Response(WKT));
336+
}
337+
if (acceptUrl === vectorStyleUrl) {
338+
return Promise.resolve(new Response(JSON.stringify({})));
339+
}
340+
if (acceptUrl === `${restMapUrl}/prjCoordSys/projection/extent.json?${tokenQuery}`) {
341+
return Promise.resolve(
342+
new Response(
343+
JSON.stringify({
344+
top: 2.0037508342789244e7,
345+
left: -2.0037508342789244e7,
346+
bottom: -2.0037508342789244e7,
347+
leftBottom: {
348+
x: -2.0037508342789244e7,
349+
y: -2.0037508342789244e7
350+
},
351+
right: 2.0037508342789244e7,
352+
rightTop: {
353+
x: 2.0037508342789244e7,
354+
y: 2.0037508342789244e7
355+
},
356+
center: [120, 39]
357+
})
358+
)
359+
);
360+
}
361+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
362+
});
363+
mapboxgl.CRS = function () {
364+
return {
365+
code: mapServiceInfo.prjCoordSys.epsgCode
366+
};
367+
};
368+
mapboxgl.proj4 = function () {
369+
return [0, 0];
370+
};
371+
const resData = await initMap(url, { type: 'vector-tile' });
372+
const map = resData.map;
373+
expect(map).not.toBeUndefined();
374+
expect(map.options.crs.code).toBe(mapServiceInfo.prjCoordSys.epsgCode);
375+
expect(map.options.style).toBe(vectorStyleUrl);
376+
delete mapboxgl.CRS;
377+
delete mapboxgl.proj4;
378+
});
257379
});

‎test/maplibregl/mapping/InitMapSpec.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1+
import maplibregl from 'maplibre-gl';
2+
import mbglmap from '../../tool/mock_maplibregl_map';
13
import { initMap } from '../../../src/maplibregl/mapping/InitMap';
24
import { FetchRequest } from '../../../src/common/util/FetchRequest';
35

46
describe('maplibregl_InitMap', () => {
57
let originalTimeout, testDiv;
8+
const tokenQuery = 'token=opbFn8Nl5zUs2xhuCQ..';
69

710
beforeEach(() => {
11+
spyOn(maplibregl, 'Map').and.callFake(mbglmap);
812
testDiv = window.document.createElement('div');
913
testDiv.setAttribute('id', 'map');
1014
testDiv.style.styleFloat = 'left';
@@ -218,4 +222,76 @@ describe('maplibregl_InitMap', () => {
218222
done();
219223
});
220224
});
225+
226+
it('initMap raster when carring on token', async () => {
227+
const url = `${GlobeParameter.ChinaURL}?${tokenQuery}`;
228+
const mapServiceInfo = {
229+
dynamicProjection: false,
230+
prjCoordSys: {
231+
epsgCode: 3857
232+
},
233+
bounds: {
234+
top: 20037508.342789087,
235+
left: -20037508.342789248,
236+
bottom: -20037508.34278914,
237+
leftBottom: {
238+
x: -20037508.342789248,
239+
y: -20037508.34278914
240+
},
241+
right: 20037508.342789244,
242+
rightTop: {
243+
x: 20037508.342789244,
244+
y: 20037508.342789087
245+
}
246+
},
247+
center: {
248+
x: -7.450580596923828e-9,
249+
y: -2.60770320892334e-8
250+
}
251+
};
252+
spyOn(FetchRequest, 'get').and.callFake((url) => {
253+
expect(url).toContain(tokenQuery);
254+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
255+
});
256+
const resData = await initMap(url);
257+
const map = resData.map;
258+
expect(map).not.toBeUndefined();
259+
expect(map.getCenter().toArray()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
260+
});
261+
262+
it('initMap vector-tile when carring on token', async () => {
263+
const url = `http:/fake:8090/iserver/services/map-mvt-landuse/rest/maps/landuse?${tokenQuery}`;
264+
const mapServiceInfo = {
265+
dynamicProjection: false,
266+
prjCoordSys: {
267+
epsgCode: 3857
268+
},
269+
center: {
270+
x: 12124158.777882982,
271+
y: 2732247.310535573
272+
},
273+
bounds: {
274+
top: 20037508.342789087,
275+
left: -20037508.342789248,
276+
bottom: -20037508.34278914,
277+
leftBottom: {
278+
x: -20037508.342789248,
279+
y: -20037508.34278914
280+
},
281+
right: 20037508.342789244,
282+
rightTop: {
283+
x: 20037508.342789244,
284+
y: 20037508.342789087
285+
}
286+
},
287+
};
288+
spyOn(FetchRequest, 'get').and.callFake((url) => {
289+
expect(url).toContain(tokenQuery);
290+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
291+
});
292+
const resData = await initMap(url, { type: 'vector-tile' });
293+
const map = resData.map;
294+
expect(map).not.toBeUndefined();
295+
expect(map.getCenter()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
296+
});
221297
});

0 commit comments

Comments
 (0)