Skip to content

Commit 0d1a486

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feature】mapboxgl出图支持传自定义的requestParameters; review by luox
1 parent c722836 commit 0d1a486

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
@@ -43,7 +43,8 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
4343
url: proxy ? `${proxy}${encodeURIComponent(url)}` : url,
4444
credentials: this.webMapService.handleWithCredentials(proxy, url, this.options.withCredentials || false)
4545
? 'include'
46-
: undefined
46+
: undefined,
47+
...(this.options.tileTransformRequest && this.options.tileTransformRequest(url))
4748
};
4849
};
4950
}

‎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, DataF
4747
this._cacheLayerId = new Map();
4848
this._layerTimerList = [];
4949
this._appendLayers = false;
50+
this._tileTransformRequest = options.tileTransformRequest;
5051
}
5152

5253
initializeMap(mapInfo, map) {
@@ -332,7 +333,8 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
332333
const proxy = this.webMapService.handleProxy('image');
333334
return {
334335
url: url,
335-
credentials: this.webMapService.handleWithCredentials(proxy, url, false) ? 'include' : undefined
336+
credentials: this.webMapService.handleWithCredentials(proxy, url, false) ? 'include' : undefined,
337+
...(this._tileTransformRequest && this._tileTransformRequest(url))
336338
};
337339
}
338340
return { url };

‎src/common/mapping/WebMapV3.js‎

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

311+
_getTransformRequest() {
312+
if (this.mapOptions.transformRequest) {
313+
return this.mapOptions.transformRequest;
314+
}
315+
return (url, resourceType) => {
316+
if (resourceType === 'Tile') {
317+
const withCredentials = this.options.iportalServiceProxyUrl && url.indexOf(this.options.iportalServiceProxyUrl) >= 0;
318+
return {
319+
url: url,
320+
credentials: withCredentials ? 'include' : undefined,
321+
...(this.options.tileTransformRequest && this.options.tileTransformRequest(url))
322+
};
323+
}
324+
return { url };
325+
}
326+
}
327+
326328
_setBaseProjection() {
327329
let crs = this._mapInfo.crs;
328330
let baseProjection = crs;
@@ -441,16 +443,8 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
441443
});
442444
const l7Layers = layers.filter((layer) => l7LayerUtil.isL7Layer(layer));
443445
if (l7Layers.length > 0) {
444-
await l7LayerUtil.addL7Layers({
445-
map: this.map,
446-
webMapInfo: { ...this._mapInfo, layers, sources },
447-
l7Layers,
448-
spriteDatas: this._spriteDatas,
449-
options: {
450-
...this.options,
451-
emitterEvent: this.fire.bind(this)
452-
}
453-
});
446+
const params = this._getAddL7LayersParams(layers, sources, l7Layers);
447+
await l7LayerUtil.addL7Layers(params);
454448
}
455449
this._createLegendInfo();
456450
this._sendMapToUser();
@@ -460,6 +454,20 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
460454
}
461455
}
462456

457+
_getAddL7LayersParams(layers, sources, l7Layers) {
458+
return {
459+
map: this.map,
460+
webMapInfo: { ...this._mapInfo, layers, sources },
461+
l7Layers,
462+
spriteDatas: this._spriteDatas,
463+
options: {
464+
...this.options,
465+
emitterEvent: this.fire.bind(this),
466+
transformRequest: this._getTransformRequest()
467+
}
468+
}
469+
}
470+
463471
/**
464472
* @private
465473
* @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
@@ -1334,4 +1334,53 @@ describe('mapboxgl_WebMap', () => {
13341334
};
13351335
datavizWebmap.once('mapcreatesucceeded', callback);
13361336
});
1337+
1338+
it('test transformRequest when url includes iportalproxy', (done) => {
1339+
const iportalServiceProxyUrl = 'http://localhost:8195/portalproxy';
1340+
const tileCustomRequestHeaders = { 'Authorization': 'test token' };
1341+
const commonOption = {
1342+
server: 'http://fack:8190/iportal/',
1343+
target: 'map',
1344+
withCredentials: false,
1345+
iportalServiceProxyUrlPrefix: iportalServiceProxyUrl,
1346+
tileTransformRequest: (url) => {
1347+
if (url.includes(iportalServiceProxyUrl)) {
1348+
return { headers: tileCustomRequestHeaders };
1349+
}
1350+
}
1351+
};
1352+
const mapOptions = {
1353+
style: {
1354+
version: 8,
1355+
sources: {
1356+
baseLayer: {
1357+
type: 'raster',
1358+
tiles: ['https://test'],
1359+
tileSize: 256
1360+
}
1361+
},
1362+
layers: [{ id: 'baseLayer', type: 'raster', source: 'baseLayer' }]
1363+
},
1364+
center: [107.7815, 39.9788],
1365+
zoom: 5,
1366+
renderWorldCopies: false,
1367+
crs: 'EPSG:3857',
1368+
minzoom: 0,
1369+
maxzoom: 22
1370+
};
1371+
datavizWebmap = new WebMap('', { ...commonOption }, { ...mapOptions });
1372+
datavizWebmap.on('mapinitialized', ({ map }) => {
1373+
let mockTileUrl =
1374+
'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';
1375+
let transformed = datavizWebmap._handler.mapOptions.transformRequest(mockTileUrl, 'Tile');
1376+
expect(transformed.credentials).toBe('include');
1377+
expect(transformed.headers).toEqual(tileCustomRequestHeaders);
1378+
expect(transformed.url).toBe(mockTileUrl);
1379+
mockTileUrl = 'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark';
1380+
transformed = map.options.transformRequest(mockTileUrl, 'Tile');
1381+
expect(transformed.credentials).toBeUndefined();
1382+
expect(transformed.headers).toBeUndefined();
1383+
done();
1384+
});
1385+
});
13371386
});

‎test/mapboxgl/mapping/WebMapV2Spec.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2077,6 +2077,39 @@ describe('mapboxgl_WebMapV2', () => {
20772077
});
20782078
});
20792079

2080+
it('transformRequest when url includes iportalproxy', (done) => {
2081+
spyOn(FetchRequest, 'get').and.callFake((url) => {
2082+
if (url.indexOf('web/datas/1920557079/content.json') > -1) {
2083+
return Promise.resolve(new Response(layerData_CSV));
2084+
}
2085+
return Promise.resolve(new Response(JSON.stringify({})));
2086+
});
2087+
const iportalServiceProxyUrl = 'http://localhost:8195/portalproxy';
2088+
const tileCustomRequestHeaders = { 'Authorization': 'test token' };
2089+
datavizWebmap = new WebMap(vectorLayer_line, {
2090+
...commonOption,
2091+
iportalServiceProxyUrlPrefix: iportalServiceProxyUrl,
2092+
tileTransformRequest: (url) => {
2093+
if (url.includes(iportalServiceProxyUrl)) {
2094+
return { headers: tileCustomRequestHeaders };
2095+
}
2096+
}
2097+
});
2098+
datavizWebmap.on('mapcreatesucceeded', ({ map }) => {
2099+
expect(map).not.toBeUndefined();
2100+
let mockTileUrl =
2101+
'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';
2102+
let transformed = map.options.transformRequest(mockTileUrl, 'Tile');
2103+
expect(transformed.credentials).toBe('include');
2104+
expect(transformed.headers).toEqual(tileCustomRequestHeaders);
2105+
mockTileUrl = 'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark';
2106+
transformed = map.options.transformRequest(mockTileUrl, 'Tile');
2107+
expect(transformed.credentials).toBeUndefined();
2108+
expect(transformed.headers).toBeUndefined();
2109+
done();
2110+
});
2111+
});
2112+
20802113
it('layerFilter', (done) => {
20812114
spyOn(FetchRequest, 'get').and.callFake((url) => {
20822115
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
@@ -735,20 +735,29 @@ describe('mapboxgl-webmap3.0', () => {
735735
});
736736
const spyTest = spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
737737
const mapInfo = JSON.parse(mapstudioWebMap_raster);
738+
const iportalServiceProxyUrl = 'http://localhost:8195/portalproxy';
739+
const tileCustomRequestHeaders = { 'Authorization': 'test token' };
738740
mapstudioWebmap = new WebMap(mapInfo, {
739741
server: server,
740742
target: 'map',
741-
iportalServiceProxyUrl: 'http://localhost:8195/portalproxy'
743+
iportalServiceProxyUrl,
744+
tileTransformRequest: (url) => {
745+
if (url.includes(iportalServiceProxyUrl)) {
746+
return { headers: tileCustomRequestHeaders };
747+
}
748+
}
742749
});
743750
mapstudioWebmap.on('mapinitialized', ({ map }) => {
744751
expect(map).not.toBeUndefined();
745752
let mockTileUrl =
746753
'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';
747754
let transformed = map.options.transformRequest(mockTileUrl, 'Tile');
748755
expect(transformed.credentials).toBe('include');
756+
expect(transformed.headers).toEqual(tileCustomRequestHeaders);
749757
mockTileUrl = 'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark';
750758
transformed = map.options.transformRequest(mockTileUrl, 'Tile');
751759
expect(transformed.credentials).toBeUndefined();
760+
expect(transformed.headers).toBeUndefined();
752761
spyTest.calls.reset();
753762
done();
754763
});

0 commit comments

Comments
 (0)