Skip to content

Commit 3918cde

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feature】mapboxgl出图支持传自定义的requestParameters; review by luox
1 parent 7b27cfb commit 3918cde

File tree

11 files changed

+311
-39
lines changed

11 files changed

+311
-39
lines changed

‎src/common/mapping/MapStyle.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ export function createMapStyleExtending(SuperClass, { MapManager, crsManager })
4141
url: proxy ? `${proxy}${encodeURIComponent(url)}` : url,
4242
credentials: this.webMapService.handleWithCredentials(proxy, url, this.options.withCredentials || false)
4343
? 'include'
44-
: undefined
44+
: undefined,
45+
...(this.options.tileTransformRequest && this.options.tileTransformRequest(url))
4546
};
4647
};
4748
}

‎src/common/mapping/WebMapV2.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
4747
this._cacheLayerId = new Map();
4848
this._layerTimerList = [];
4949
this._appendLayers = false;
50+
this._tileTransformRequest = options.tileTransformRequest;
5051
}
5152

5253
async initializeMap(mapInfo, map) {
@@ -303,7 +304,8 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
303304
const proxy = this.webMapService.handleProxy('image');
304305
return {
305306
url: url,
306-
credentials: this.webMapService.handleWithCredentials(proxy, url, false) ? 'include' : undefined
307+
credentials: this.webMapService.handleWithCredentials(proxy, url, false) ? 'include' : undefined,
308+
...(this._tileTransformRequest && this._tileTransformRequest(url))
307309
};
308310
}
309311
return { url };

‎src/common/mapping/WebMapV3.js

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -235,13 +235,8 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, crsMa
235235
const copyLayer = { ...matchLayer, ...layerInfo, id: copyLayerId };
236236
if (l7LayerUtil.isL7Layer(copyLayer)) {
237237
const layers = [copyLayer];
238-
await l7LayerUtil.addL7Layers({
239-
map: this.map,
240-
webMapInfo: { ...this._mapInfo, layers, sources: this._mapInfo.sources },
241-
l7Layers: layers,
242-
spriteDatas: this._spriteDatas,
243-
options: this.options
244-
});
238+
const params = this._getAddL7LayersParams(layers, this._mapInfo.sources, layers);
239+
await l7LayerUtil.addL7Layers(params);
245240
} else {
246241
if (typeof copyLayer.source === 'object') {
247242
this.map.addSource(copyLayer.id, copyLayer.source);
@@ -287,18 +282,8 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, crsMa
287282
const fontFamilys = this._getLabelFontFamily();
288283
// 初始化 map
289284
const mapOptions = {
290-
transformRequest: (url, resourceType) => {
291-
const res = { url };
292-
if (
293-
resourceType === 'Tile' &&
294-
this.options.iportalServiceProxyUrl &&
295-
url.indexOf(this.options.iportalServiceProxyUrl) >= 0
296-
) {
297-
res.credentials = 'include';
298-
}
299-
return res;
300-
},
301285
...this.mapOptions,
286+
transformRequest: this._getTransformRequest(),
302287
container: this.options.target,
303288
crs: this._baseProjection,
304289
center,
@@ -324,6 +309,23 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, crsMa
324309
});
325310
}
326311

312+
_getTransformRequest() {
313+
if (this.mapOptions.transformRequest) {
314+
return this.mapOptions.transformRequest;
315+
}
316+
return (url, resourceType) => {
317+
if (resourceType === 'Tile') {
318+
const withCredentials = this.options.iportalServiceProxyUrl && url.indexOf(this.options.iportalServiceProxyUrl) >= 0;
319+
return {
320+
url: url,
321+
credentials: withCredentials ? 'include' : undefined,
322+
...(this.options.tileTransformRequest && this.options.tileTransformRequest(url))
323+
};
324+
}
325+
return { url };
326+
}
327+
}
328+
327329
_registerMapCRS(mapInfo) {
328330
const { crs } = mapInfo;
329331
let epsgCode = crs;
@@ -423,16 +425,8 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, crsMa
423425
});
424426
const l7Layers = layers.filter((layer) => l7LayerUtil.isL7Layer(layer));
425427
if (l7Layers.length > 0) {
426-
await l7LayerUtil.addL7Layers({
427-
map: this.map,
428-
webMapInfo: { ...this._mapInfo, layers, sources },
429-
l7Layers,
430-
spriteDatas: this._spriteDatas,
431-
options: {
432-
...this.options,
433-
emitterEvent: this.fire.bind(this)
434-
}
435-
});
428+
const params = this._getAddL7LayersParams(layers, sources, l7Layers);
429+
await l7LayerUtil.addL7Layers(params);
436430
}
437431
this._createLegendInfo();
438432
this._sendMapToUser();
@@ -442,6 +436,20 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, crsMa
442436
}
443437
}
444438

439+
_getAddL7LayersParams(layers, sources, l7Layers) {
440+
return {
441+
map: this.map,
442+
webMapInfo: { ...this._mapInfo, layers, sources },
443+
l7Layers,
444+
spriteDatas: this._spriteDatas,
445+
options: {
446+
...this.options,
447+
emitterEvent: this.fire.bind(this),
448+
transformRequest: this._getTransformRequest()
449+
}
450+
}
451+
}
452+
445453
/**
446454
* @private
447455
* @function WebMapV3.prototype._setUniqueId

‎src/common/mapping/utils/L7LayerUtil.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -701,12 +701,14 @@ export function L7LayerUtil(config) {
701701
sourceLayer
702702
}
703703
};
704-
if (isIportalProxyServiceUrl(result.data, options)) {
705-
Object.assign(result.parser, {
706-
requestParameters: {
707-
credentials: 'include'
708-
}
709-
});
704+
const requestParameters = options.transformRequest(result.data, 'Tile');
705+
if (requestParameters) {
706+
if (requestParameters.credentials) {
707+
result.parser.requestParameters = { credentials: requestParameters.credentials };
708+
}
709+
if (requestParameters.headers) {
710+
result.parser.requestParameters = { ...result.parser.requestParameters, headers: requestParameters.headers };
711+
}
710712
}
711713
return result;
712714
}

‎test/common/mapping/utils/L7LayerUtilSpec.js

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ describe('L7LayerUtil', () => {
5252
const options = {
5353
withCredentials: true,
5454
server: 'http://localhost:8190/iportal/',
55-
emitterEvent: function() {}
55+
emitterEvent: function() {},
56+
transformRequest: function() {}
5657
};
5758

5859
const addOptions = {
@@ -513,6 +514,7 @@ describe('L7LayerUtil', () => {
513514
webMapInfo: { ...mapstudioWebMap_L7LayersRes, layers, sources },
514515
l7Layers: layers,
515516
options: {
517+
...addOptions.options,
516518
withCredentials: false,
517519
server: '/iportal/',
518520
iportalServiceProxyUrl: 'http://localhost:8195/portalproxy'
@@ -603,4 +605,79 @@ describe('L7LayerUtil', () => {
603605
expect(result.field).toEqual(['smpid', '新建字段']);
604606
expect(result.values).not.toBeUndefined();
605607
});
608+
609+
it('add mvt source and requestParameters', (done) => {
610+
const layers = [
611+
{
612+
filter: ['all', ['==', 'smpid', 1]],
613+
layout: {
614+
'text-z-offset': 200000,
615+
'text-letter-spacing': 0,
616+
visibility: 'visible',
617+
'text-field': '{smpid}',
618+
'text-anchor': 'center',
619+
'text-size': 36,
620+
'text-allow-overlap': true
621+
},
622+
metadata: {
623+
MapStudio: {
624+
title: 'ms_label_县级行政区划_1719818803020_5'
625+
}
626+
},
627+
maxzoom: 24,
628+
paint: {
629+
'text-halo-color': '#242424',
630+
'text-halo-blur': 2,
631+
'text-color': '#FFFFFF',
632+
'text-halo-width': 1,
633+
'text-opacity': 0.9,
634+
'text-translate': [0, 0]
635+
},
636+
source: 'ms_label_县级行政区划_1719818803020_5_source',
637+
'source-layer': '932916417$geometry',
638+
id: 'ms_label_县级行政区划_1719818803020_5',
639+
type: 'symbol',
640+
minzoom: 0
641+
}
642+
];
643+
const sources = {
644+
ms_label_县级行政区划_1719818803020_5_source: {
645+
tiles: [
646+
'http://localhost:8190/iportal/services/../web/datas/932916417/structureddata/pointonsurface/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%22pac%22%2C%22Video%22%2C%22SmUserID%22%2C%22name%22%2C%22Image%22%2C%22objectid%22%2C%22URL%22%5D&geometryFieldName=geometry'
647+
],
648+
bounds: [102.98962307000005, 30.090978575000065, 104.89626180000005, 31.437765225000078],
649+
type: 'vector'
650+
}
651+
};
652+
const tileCustomRequestHeaders = { 'Authorization': 'test token' };
653+
const nextOptions = {
654+
...addOptions,
655+
webMapInfo: { ...mapstudioWebMap_L7LayersRes, layers, sources },
656+
l7Layers: layers,
657+
options: {
658+
...addOptions.options,
659+
transformRequest: function() {
660+
return {
661+
credentials: 'include',
662+
headers: tileCustomRequestHeaders
663+
}
664+
}
665+
}
666+
};
667+
const spy1 = spyOn(nextOptions.map, 'addLayer').and.callThrough();
668+
const spy2 = spyOn(L7, 'PointLayer').and.callFake(mockL7.PointLayer);
669+
l7LayerUtil.addL7Layers(nextOptions).then(() => {
670+
expect(nextOptions.map.addLayer.calls.count()).toEqual(1);
671+
expect(layerMaplist['ms_label_县级行政区划_1719818803020_5']).toBeTruthy();
672+
const matchLayer = layerMaplist['ms_label_县级行政区划_1719818803020_5'].getLayer();
673+
expect(matchLayer.featureId).toBe('smpid');
674+
const matchL7layer = layerMaplist['ms_label_县级行政区划_1719818803020_5'].getL7Layer();
675+
expect(matchL7layer.layerSource.parser.requestParameters).not.toBeUndefined();
676+
expect(matchL7layer.layerSource.parser.requestParameters.credentials).toBe('include');
677+
expect(matchL7layer.layerSource.parser.requestParameters.headers).toEqual(tileCustomRequestHeaders);
678+
spy1.calls.reset();
679+
spy2.calls.reset();
680+
done();
681+
});
682+
});
606683
});

‎test/mapboxgl/mapping/WebMapSpec.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1399,4 +1399,53 @@ describe('mapboxgl_WebMap', () => {
13991399
});
14001400
});
14011401
});
1402+
1403+
it('test transformRequest when url includes iportalproxy', (done) => {
1404+
const iportalServiceProxyUrl = 'http://localhost:8195/portalproxy';
1405+
const tileCustomRequestHeaders = { 'Authorization': 'test token' };
1406+
const commonOption = {
1407+
server: 'http://fack:8190/iportal/',
1408+
target: 'map',
1409+
withCredentials: false,
1410+
iportalServiceProxyUrlPrefix: iportalServiceProxyUrl,
1411+
tileTransformRequest: (url) => {
1412+
if (url.includes(iportalServiceProxyUrl)) {
1413+
return { headers: tileCustomRequestHeaders };
1414+
}
1415+
}
1416+
};
1417+
const mapOptions = {
1418+
style: {
1419+
version: 8,
1420+
sources: {
1421+
baseLayer: {
1422+
type: 'raster',
1423+
tiles: ['https://test'],
1424+
tileSize: 256
1425+
}
1426+
},
1427+
layers: [{ id: 'baseLayer', type: 'raster', source: 'baseLayer' }]
1428+
},
1429+
center: [107.7815, 39.9788],
1430+
zoom: 5,
1431+
renderWorldCopies: false,
1432+
crs: 'EPSG:3857',
1433+
minzoom: 0,
1434+
maxzoom: 22
1435+
};
1436+
datavizWebmap = new WebMap('', { ...commonOption }, { ...mapOptions });
1437+
datavizWebmap.on('mapinitialized', ({ map }) => {
1438+
let mockTileUrl =
1439+
'http://localhost:8195/portalproxy/7c851958ab40a5e0/iserver/services/map_world1_y6nykx3f/rest/maps/World1/tileimage.png?scale=6.760654286410619e-9&x=1&y=0&width=256&height=256&transparent=true&redirect=false&cacheEnabled=true&origin=%7B%22x%22%3A-180%2C%22y%22%3A90%7D';
1440+
let transformed = datavizWebmap._handler.mapOptions.transformRequest(mockTileUrl, 'Tile');
1441+
expect(transformed.credentials).toBe('include');
1442+
expect(transformed.headers).toEqual(tileCustomRequestHeaders);
1443+
expect(transformed.url).toBe(mockTileUrl);
1444+
mockTileUrl = 'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark';
1445+
transformed = map.options.transformRequest(mockTileUrl, 'Tile');
1446+
expect(transformed.credentials).toBeUndefined();
1447+
expect(transformed.headers).toBeUndefined();
1448+
done();
1449+
});
1450+
});
14021451
});

‎test/mapboxgl/mapping/WebMapV2Spec.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2047,6 +2047,39 @@ describe('mapboxgl_WebMapV2', () => {
20472047
});
20482048
});
20492049

2050+
it('transformRequest when url includes iportalproxy', (done) => {
2051+
spyOn(FetchRequest, 'get').and.callFake((url) => {
2052+
if (url.indexOf('web/datas/1920557079/content.json') > -1) {
2053+
return Promise.resolve(new Response(layerData_CSV));
2054+
}
2055+
return Promise.resolve(new Response(JSON.stringify({})));
2056+
});
2057+
const iportalServiceProxyUrl = 'http://localhost:8195/portalproxy';
2058+
const tileCustomRequestHeaders = { 'Authorization': 'test token' };
2059+
datavizWebmap = new WebMap(vectorLayer_line, {
2060+
...commonOption,
2061+
iportalServiceProxyUrlPrefix: iportalServiceProxyUrl,
2062+
tileTransformRequest: (url) => {
2063+
if (url.includes(iportalServiceProxyUrl)) {
2064+
return { headers: tileCustomRequestHeaders };
2065+
}
2066+
}
2067+
});
2068+
datavizWebmap.on('mapcreatesucceeded', ({ map }) => {
2069+
expect(map).not.toBeUndefined();
2070+
let mockTileUrl =
2071+
'http://localhost:8195/portalproxy/7c851958ab40a5e0/iserver/services/map_world1_y6nykx3f/rest/maps/World1/tileimage.png?scale=6.760654286410619e-9&x=1&y=0&width=256&height=256&transparent=true&redirect=false&cacheEnabled=true&origin=%7B%22x%22%3A-180%2C%22y%22%3A90%7D';
2072+
let transformed = map.options.transformRequest(mockTileUrl, 'Tile');
2073+
expect(transformed.credentials).toBe('include');
2074+
expect(transformed.headers).toEqual(tileCustomRequestHeaders);
2075+
mockTileUrl = 'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark';
2076+
transformed = map.options.transformRequest(mockTileUrl, 'Tile');
2077+
expect(transformed.credentials).toBeUndefined();
2078+
expect(transformed.headers).toBeUndefined();
2079+
done();
2080+
});
2081+
});
2082+
20502083
it('layerFilter', (done) => {
20512084
spyOn(FetchRequest, 'get').and.callFake((url) => {
20522085
if (url.indexOf('web/datas/1920557079/content.json') > -1) {

‎test/mapboxgl/mapping/WebMapV3Spec.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -733,20 +733,29 @@ describe('mapboxgl-webmap3.0', () => {
733733
});
734734
const spyTest = spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
735735
const mapInfo = JSON.parse(mapstudioWebMap_raster);
736+
const iportalServiceProxyUrl = 'http://localhost:8195/portalproxy';
737+
const tileCustomRequestHeaders = { 'Authorization': 'test token' };
736738
mapstudioWebmap = new WebMap(mapInfo, {
737739
server: server,
738740
target: 'map',
739-
iportalServiceProxyUrl: 'http://localhost:8195/portalproxy'
741+
iportalServiceProxyUrl,
742+
tileTransformRequest: (url) => {
743+
if (url.includes(iportalServiceProxyUrl)) {
744+
return { headers: tileCustomRequestHeaders };
745+
}
746+
}
740747
});
741748
mapstudioWebmap.on('mapinitialized', ({ map }) => {
742749
expect(map).not.toBeUndefined();
743750
let mockTileUrl =
744751
'http://localhost:8195/portalproxy/7c851958ab40a5e0/iserver/services/map_world1_y6nykx3f/rest/maps/World1/tileimage.png?scale=6.760654286410619e-9&x=1&y=0&width=256&height=256&transparent=true&redirect=false&cacheEnabled=true&origin=%7B%22x%22%3A-180%2C%22y%22%3A90%7D';
745752
let transformed = map.options.transformRequest(mockTileUrl, 'Tile');
746753
expect(transformed.credentials).toBe('include');
754+
expect(transformed.headers).toEqual(tileCustomRequestHeaders);
747755
mockTileUrl = 'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark';
748756
transformed = map.options.transformRequest(mockTileUrl, 'Tile');
749757
expect(transformed.credentials).toBeUndefined();
758+
expect(transformed.headers).toBeUndefined();
750759
spyTest.calls.reset();
751760
done();
752761
});

0 commit comments

Comments
 (0)