Skip to content

Commit 5398599

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

File tree

4 files changed

+199
-7
lines changed

4 files changed

+199
-7
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 '@supermap/iclient-common/util/FetchRequest';
44
import { InitMapServiceBase, isPlaneProjection, getZoom } from '@supermap/iclient-common/iServer/InitMapServiceBase';
5+
import { Util } from '@supermap/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 = {};
@@ -204,7 +205,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
204205
const tileSize = 256;
205206
nonEnhanceExtraInfo.tileSize = tileSize;
206207
const transparent = mapOptions.transparent !== false;
207-
tileUrl += `/zxyTileImage.png?z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`;
208+
tileUrl = Util.urlAppend(Util.urlPathAppend(tileUrl, 'zxyTileImage.png'), `z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`);
208209
}
209210
}
210211
const zoom = getZoom({ scale, dpi, coordUnit }, extent);

‎src/maplibregl/mapping/InitMap.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import maplibregl from 'maplibre-gl';
22
import { MapService } from '../services/MapService';
33
import { InitMapServiceBase, isPlaneProjection, getZoom } from '@supermap/iclient-common/iServer/InitMapServiceBase';
4+
import { Util } from '@supermap/iclient-common/commontypes/Util';
45
import proj4 from 'proj4';
56
/**
67
* @function initMap
@@ -81,14 +82,14 @@ async function createMapOptions(url, resetServiceInfo, options) {
8182
const mapCenter = center ? proj4('EPSG:3857', 'EPSG:4326', [center.x, center.y]) : [0, 0];
8283
let tileUrl =
8384
sourceType === 'vector-tile'
84-
? url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY'
85+
? Util.urlAppend(Util.urlPathAppend(url, 'tileFeature/vectorstyles.json'), 'type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY')
8586
: url;
8687
let rasterExtraInfo = {};
8788
if (sourceType === 'raster') {
8889
const tileSize = 256;
8990
rasterExtraInfo.tileSize = tileSize;
9091
const transparent = mapOptions.transparent !== false;
91-
tileUrl += `/zxyTileImage.png?z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`;
92+
tileUrl = Util.urlAppend(Util.urlPathAppend(tileUrl, 'zxyTileImage.png'), `z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`);
9293
}
9394
const zoom = getZoom({ scale, dpi, coordUnit }, bounds);
9495
return {

‎test/mapboxgl/mapping/InitMapSpec.js‎

Lines changed: 118 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import mbglmap from '../../tool/mock_mapboxgl_map';
33
import { initMap } from '../../../src/mapboxgl/mapping/InitMap';
44
import { FetchRequest } from '../../../src/common/util/FetchRequest';
55

6-
describe('InitMap', () => {
6+
describe('mapboxgl InitMap', () => {
77
let originalTimeout, testDiv;
8+
const tokenQuery = 'token=opbFn8Nl5zUs2xhuCQ..';
89

910
beforeEach(() => {
1011
spyOn(mapboxgl, 'Map').and.callFake(mbglmap);
@@ -223,4 +224,120 @@ describe('InitMap', () => {
223224
delete mapboxgl.CRS;
224225
delete mapboxgl.proj4;
225226
});
227+
228+
it('initMap raster when carring on token', async () => {
229+
const restMapUrl = 'http:/fake:8090/iserver/iserver/services/map-china400/rest/maps/China';
230+
const url = `${restMapUrl}?${tokenQuery}`;
231+
const mapServiceInfo = {
232+
dynamicProjection: false,
233+
prjCoordSys: {
234+
epsgCode: 3857
235+
},
236+
bounds: {
237+
top: 20037508.342789087,
238+
left: -20037508.342789248,
239+
bottom: -20037508.34278914,
240+
leftBottom: {
241+
x: -20037508.342789248,
242+
y: -20037508.34278914
243+
},
244+
right: 20037508.342789244,
245+
rightTop: {
246+
x: 20037508.342789244,
247+
y: 20037508.342789087
248+
}
249+
},
250+
center: {
251+
x: -7.450580596923828e-9,
252+
y: -2.60770320892334e-8
253+
}
254+
};
255+
spyOn(FetchRequest, 'get').and.callFake((url) => {
256+
expect(url).toContain(tokenQuery);
257+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
258+
});
259+
const resData = await initMap(url);
260+
const map = resData.map;
261+
expect(map).not.toBeUndefined();
262+
expect(map.options.crs).toBe('EPSG:3857');
263+
expect(map.options.center).toEqual([-6.692970425781022e-14, -2.2899993706537323e-13]);
264+
expect(Object.values(map.options.style.sources).length).toBe(1);
265+
expect(map.options.style.layers.length).toBe(1);
266+
expect(Object.values(map.options.style.sources)[0].tiles.length).toBe(1);
267+
expect(Object.values(map.options.style.sources)[0].tiles[0]).toBe(
268+
`${restMapUrl}/zxyTileImage.png?${tokenQuery}&z={z}&x={x}&y={y}&width=256&height=256&transparent=true`
269+
);
270+
});
271+
272+
it('initMap vector tile when carring on token', async () => {
273+
const restMapUrl = 'http:/fake:8090/iserver/services/map-mvt-landuse/rest/maps/landuse';
274+
const url = `${restMapUrl}?${tokenQuery}`;
275+
const mapServiceInfo = {
276+
dynamicProjection: false,
277+
prjCoordSys: {
278+
epsgCode: 4326
279+
},
280+
center: {
281+
x: 116,
282+
y: 39
283+
},
284+
bounds: {
285+
top: 90.00000000000001,
286+
left: -180,
287+
bottom: -90.00000000003598,
288+
leftBottom: { x: -180, y: -90.00000000003598 },
289+
right: 180.00000000007202,
290+
rightTop: { x: 180.00000000007202, y: 90.00000000000001 }
291+
}
292+
};
293+
const vectorStyleUrl =
294+
`${restMapUrl}/tileFeature/vectorstyles.json?${tokenQuery}&type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY`;
295+
const WKT =
296+
'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"]]';
297+
spyOn(FetchRequest, 'get').and.callFake((acceptUrl) => {
298+
if (acceptUrl === `${restMapUrl}/prjCoordSys.wkt?${tokenQuery}`) {
299+
return Promise.resolve(new Response(WKT));
300+
}
301+
if (acceptUrl === vectorStyleUrl) {
302+
return Promise.resolve(new Response(JSON.stringify({})));
303+
}
304+
if (acceptUrl === `${restMapUrl}/prjCoordSys/projection/extent.json?${tokenQuery}`) {
305+
return Promise.resolve(
306+
new Response(
307+
JSON.stringify({
308+
top: 2.0037508342789244e7,
309+
left: -2.0037508342789244e7,
310+
bottom: -2.0037508342789244e7,
311+
leftBottom: {
312+
x: -2.0037508342789244e7,
313+
y: -2.0037508342789244e7
314+
},
315+
right: 2.0037508342789244e7,
316+
rightTop: {
317+
x: 2.0037508342789244e7,
318+
y: 2.0037508342789244e7
319+
},
320+
center: [120, 39]
321+
})
322+
)
323+
);
324+
}
325+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
326+
});
327+
mapboxgl.CRS = function () {
328+
return {
329+
code: mapServiceInfo.prjCoordSys.epsgCode
330+
};
331+
};
332+
mapboxgl.proj4 = function () {
333+
return [0, 0];
334+
};
335+
const resData = await initMap(url, { type: 'vector-tile' });
336+
const map = resData.map;
337+
expect(map).not.toBeUndefined();
338+
expect(map.options.crs.code).toBe(mapServiceInfo.prjCoordSys.epsgCode);
339+
expect(map.options.style).toBe(vectorStyleUrl);
340+
delete mapboxgl.CRS;
341+
delete mapboxgl.proj4;
342+
});
226343
});

‎test/maplibregl/mapping/InitMapSpec.js‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { initMap } from '../../../src/maplibregl/mapping/InitMap';
22
import { FetchRequest } from '../../../src/common/util/FetchRequest';
33

4-
describe('InitMap', () => {
4+
describe('maplibregl InitMap', () => {
55
let originalTimeout, testDiv;
6+
const tokenQuery = 'token=opbFn8Nl5zUs2xhuCQ..';
67

78
beforeEach(() => {
89
testDiv = window.document.createElement('div');
@@ -163,4 +164,76 @@ describe('InitMap', () => {
163164
expect(map).not.toBeUndefined();
164165
expect(map.getCenter()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
165166
});
167+
168+
it('initMap raster when carring on token', async () => {
169+
const url = `${GlobeParameter.ChinaURL}?${tokenQuery}`;
170+
const mapServiceInfo = {
171+
dynamicProjection: false,
172+
prjCoordSys: {
173+
epsgCode: 3857
174+
},
175+
bounds: {
176+
top: 20037508.342789087,
177+
left: -20037508.342789248,
178+
bottom: -20037508.34278914,
179+
leftBottom: {
180+
x: -20037508.342789248,
181+
y: -20037508.34278914
182+
},
183+
right: 20037508.342789244,
184+
rightTop: {
185+
x: 20037508.342789244,
186+
y: 20037508.342789087
187+
}
188+
},
189+
center: {
190+
x: -7.450580596923828e-9,
191+
y: -2.60770320892334e-8
192+
}
193+
};
194+
spyOn(FetchRequest, 'get').and.callFake((url) => {
195+
expect(url).toContain(tokenQuery);
196+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
197+
});
198+
const resData = await initMap(url);
199+
const map = resData.map;
200+
expect(map).not.toBeUndefined();
201+
expect(map.getCenter().toArray()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
202+
});
203+
204+
it('initMap vector-tile when carring on token', async () => {
205+
const url = `http:/fake:8090/iserver/services/map-mvt-landuse/rest/maps/landuse?${tokenQuery}`;
206+
const mapServiceInfo = {
207+
dynamicProjection: false,
208+
prjCoordSys: {
209+
epsgCode: 3857
210+
},
211+
center: {
212+
x: 12124158.777882982,
213+
y: 2732247.310535573
214+
},
215+
bounds: {
216+
top: 20037508.342789087,
217+
left: -20037508.342789248,
218+
bottom: -20037508.34278914,
219+
leftBottom: {
220+
x: -20037508.342789248,
221+
y: -20037508.34278914
222+
},
223+
right: 20037508.342789244,
224+
rightTop: {
225+
x: 20037508.342789244,
226+
y: 20037508.342789087
227+
}
228+
},
229+
};
230+
spyOn(FetchRequest, 'get').and.callFake((url) => {
231+
expect(url).toContain(tokenQuery);
232+
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
233+
});
234+
const resData = await initMap(url, { type: 'vector-tile' });
235+
const map = resData.map;
236+
expect(map).not.toBeUndefined();
237+
expect(map.getCenter()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
238+
});
166239
});

0 commit comments

Comments
 (0)