【feature】mapboxgl出图支持传自定义的requestParameters; review by luox

Author: xiongjiaojiao

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;
 }

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

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();
   });
 

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();
+    });
+  });
 });