From b179eb82d24497eab1be28b3f6bdb2d741ef40e6 Mon Sep 17 00:00:00 2001 From: xiongjj Date: Thu, 19 Dec 2024 11:41:20 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90feature=E3=80=91mapboxgl=E5=87=BA?= =?UTF-8?q?=E5=9B=BE=E6=94=AF=E6=8C=81=E4=BC=A0=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=9A=84requestParameters;=20review=20by=20luox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mapboxgl/mapping/utils/L7LayerUtil.js | 14 ++-- src/mapboxgl/mapping/webmap/v3/WebMap.js | 64 ++++++++------- test/mapboxgl/mapping/WebMapV3Spec.js | 11 ++- .../mapboxgl/mapping/utils/L7LayerUtilSpec.js | 78 ++++++++++++++++++- 4 files changed, 131 insertions(+), 36 deletions(-) diff --git a/src/mapboxgl/mapping/utils/L7LayerUtil.js b/src/mapboxgl/mapping/utils/L7LayerUtil.js index ea19d33a3..3033db8d9 100644 --- a/src/mapboxgl/mapping/utils/L7LayerUtil.js +++ b/src/mapboxgl/mapping/utils/L7LayerUtil.js @@ -638,12 +638,14 @@ function vectorSourceToL7Source(source, sourceLayer, options) { sourceLayer } }; - if (isIportalProxyServiceUrl(result.data, options)) { - Object.assign(result.parser, { - requestParameters: { - credentials: 'include' - } - }); + const requestParameters = options.transformRequest(result.data, 'Tile'); + if (requestParameters) { + if (requestParameters.credentials) { + result.parser.requestParameters = { credentials: requestParameters.credentials }; + } + if (requestParameters.headers) { + result.parser.requestParameters = { ...result.parser.requestParameters, headers: requestParameters.headers }; + } } return result; } diff --git a/src/mapboxgl/mapping/webmap/v3/WebMap.js b/src/mapboxgl/mapping/webmap/v3/WebMap.js index 85e6b841f..b75fc23d2 100644 --- a/src/mapboxgl/mapping/webmap/v3/WebMap.js +++ b/src/mapboxgl/mapping/webmap/v3/WebMap.js @@ -231,13 +231,8 @@ export class WebMap extends mapboxgl.Evented { const copyLayer = { ...matchLayer, ...layerInfo, id: copyLayerId }; if (isL7Layer(copyLayer)) { const layers = [copyLayer]; - await addL7Layers({ - map: this.map, - webMapInfo: { ...this._mapInfo, layers, sources: this._mapInfo.sources }, - l7Layers: layers, - spriteDatas: this._spriteDatas, - options: this.options - }); + const params = this._getAddL7LayersParams(layers, this._mapInfo.sources, layers); + await addL7Layers(params); return; } if (typeof copyLayer.source === 'object') { @@ -327,18 +322,8 @@ export class WebMap extends mapboxgl.Evented { const fontFamilys = this._getLabelFontFamily(); // 初始化 map const mapOptions = { - transformRequest: (url, resourceType) => { - const res = { url }; - if ( - resourceType === 'Tile' && - this.options.iportalServiceProxyUrl && - url.indexOf(this.options.iportalServiceProxyUrl) >= 0 - ) { - res.credentials = 'include'; - } - return res; - }, ...this.mapOptions, + transformRequest: this._getTransformRequest(), container: this.options.target, crs: this._baseProjection, center, @@ -364,6 +349,23 @@ export class WebMap extends mapboxgl.Evented { }); } + _getTransformRequest() { + if (this.mapOptions.transformRequest) { + return this.mapOptions.transformRequest; + } + return (url, resourceType) => { + if (resourceType === 'Tile') { + const withCredentials = this.options.iportalServiceProxyUrl && url.indexOf(this.options.iportalServiceProxyUrl) >= 0; + return { + url: url, + credentials: withCredentials ? 'include' : undefined, + ...(this.options.tileTransformRequest && this.options.tileTransformRequest(url)) + }; + } + return { url }; + } + } + _setBaseProjection() { let crs = this._mapInfo.crs; let baseProjection = crs; @@ -480,16 +482,8 @@ export class WebMap extends mapboxgl.Evented { }); const l7Layers = layers.filter((layer) => isL7Layer(layer)); if (l7Layers.length > 0) { - await addL7Layers({ - map: this.map, - webMapInfo: { ...this._mapInfo, layers, sources }, - l7Layers, - spriteDatas: this._spriteDatas, - options: { - ...this.options, - emitterEvent: this.fire.bind(this) - } - }); + const params = this._getAddL7LayersParams(layers, sources, l7Layers); + await addL7Layers(params); } this._createLegendInfo(); this._sendMapToUser(); @@ -499,6 +493,20 @@ export class WebMap extends mapboxgl.Evented { } } + _getAddL7LayersParams(layers, sources, l7Layers) { + return { + map: this.map, + webMapInfo: { ...this._mapInfo, layers, sources }, + l7Layers, + spriteDatas: this._spriteDatas, + options: { + ...this.options, + emitterEvent: this.fire.bind(this), + transformRequest: this._getTransformRequest() + } + } + } + /** * @private * @function WebMap.prototype._setUniqueId diff --git a/test/mapboxgl/mapping/WebMapV3Spec.js b/test/mapboxgl/mapping/WebMapV3Spec.js index c79872047..be9c8bf38 100644 --- a/test/mapboxgl/mapping/WebMapV3Spec.js +++ b/test/mapboxgl/mapping/WebMapV3Spec.js @@ -615,18 +615,27 @@ describe('mapboxgl-webmap3.0', () => { }); spyOn(mapboxgl, 'Map').and.callFake(mbglmap); const mapInfo = JSON.parse(mapstudioWebMap_raster); + const iportalServiceProxyUrl = 'http://localhost:8195/portalproxy'; + const tileCustomRequestHeaders = { 'Authorization': 'test token' }; mapstudioWebmap = new WebMapV3(mapInfo, { server: server, - iportalServiceProxyUrl: 'http://localhost:8195/portalproxy' + iportalServiceProxyUrl, + tileTransformRequest: (url) => { + if (url.includes(iportalServiceProxyUrl)) { + return { headers: tileCustomRequestHeaders }; + } + } }); mapstudioWebmap.initializeMap(mapInfo); expect(mapstudioWebmap.map).not.toBeUndefined(); let mockTileUrl = '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'; let transformed = mapstudioWebmap.map.options.transformRequest(mockTileUrl, 'Tile'); expect(transformed.credentials).toBe('include'); + expect(transformed.headers).toEqual(tileCustomRequestHeaders); mockTileUrl = 'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark'; transformed = mapstudioWebmap.map.options.transformRequest(mockTileUrl, 'Tile'); expect(transformed.credentials).toBeUndefined(); + expect(transformed.headers).toBeUndefined(); done(); }); diff --git a/test/mapboxgl/mapping/utils/L7LayerUtilSpec.js b/test/mapboxgl/mapping/utils/L7LayerUtilSpec.js index fe083c539..12934dba3 100644 --- a/test/mapboxgl/mapping/utils/L7LayerUtilSpec.js +++ b/test/mapboxgl/mapping/utils/L7LayerUtilSpec.js @@ -20,7 +20,8 @@ describe('L7LayerUtil', () => { const options = { withCredentials: true, server: 'http://localhost:8190/iportal/', - emitterEvent: function() {} + emitterEvent: function() {}, + transformRequest: function() {} }; const addOptions = { @@ -481,6 +482,7 @@ describe('L7LayerUtil', () => { webMapInfo: { ...mapstudioWebMap_L7LayersRes, layers, sources }, l7Layers: layers, options: { + ...addOptions.options, withCredentials: false, server: '/iportal/', iportalServiceProxyUrl: 'http://localhost:8195/portalproxy' @@ -571,4 +573,78 @@ describe('L7LayerUtil', () => { expect(result.field).toEqual(['smpid', '新建字段']); expect(result.values).not.toBeUndefined(); }); + + it('add mvt source and requestParameters', (done) => { + const layers = [ + { + filter: ['all', ['==', 'smpid', 1]], + layout: { + 'text-z-offset': 200000, + 'text-letter-spacing': 0, + visibility: 'visible', + 'text-field': '{smpid}', + 'text-anchor': 'center', + 'text-size': 36, + 'text-allow-overlap': true + }, + metadata: { + MapStudio: { + title: 'ms_label_县级行政区划_1719818803020_5' + } + }, + maxzoom: 24, + paint: { + 'text-halo-color': '#242424', + 'text-halo-blur': 2, + 'text-color': '#FFFFFF', + 'text-halo-width': 1, + 'text-opacity': 0.9, + 'text-translate': [0, 0] + }, + source: 'ms_label_县级行政区划_1719818803020_5_source', + 'source-layer': '932916417$geometry', + id: 'ms_label_县级行政区划_1719818803020_5', + type: 'symbol', + minzoom: 0 + } + ]; + const sources = { + ms_label_县级行政区划_1719818803020_5_source: { + tiles: [ + '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' + ], + bounds: [102.98962307000005, 30.090978575000065, 104.89626180000005, 31.437765225000078], + type: 'vector' + } + }; + const tileCustomRequestHeaders = { 'Authorization': 'test token' }; + const nextOptions = { + ...addOptions, + webMapInfo: { ...mapstudioWebMap_L7LayersRes, layers, sources }, + l7Layers: layers, + options: { + ...addOptions.options, + transformRequest: function() { + return { + credentials: 'include', + headers: tileCustomRequestHeaders + } + } + } + }; + const spy1 = spyOn(nextOptions.map, 'addLayer').and.callThrough(); + const spy2 = spyOn(L7, 'PointLayer').and.callFake(mockL7.PointLayer); + addL7Layers(nextOptions).then(() => { + expect(nextOptions.map.addLayer.calls.count()).toEqual(1); + expect(layerMaplist['ms_label_县级行政区划_1719818803020_5']).toBeTruthy(); + const matchLayer = layerMaplist['ms_label_县级行政区划_1719818803020_5'].getLayer(); + expect(matchLayer.featureId).toBe('smpid'); + expect(matchLayer.l7layer.layerSource.parser.requestParameters).not.toBeUndefined(); + expect(matchLayer.l7layer.layerSource.parser.requestParameters.credentials).toBe('include'); + expect(matchLayer.l7layer.layerSource.parser.requestParameters.headers).toEqual(tileCustomRequestHeaders); + spy1.calls.reset(); + spy2.calls.reset(); + done(); + }); + }); });