【update】ol webmap 支持 arcgis vectortile 并style 请求带上 baseUrl 参数 review by luox

Author: xilanhuaweidapao

src/openlayers/mapping/WebMap.js

@@ -4818,11 +4818,24 @@ export class WebMap extends Observable {
         const envelope = this.getEnvelope(indexbounds, layerInfo.bounds);
         const styleResolutions = this.getStyleResolutions(envelope);
         // const origin = [envelope.left, envelope.top];
-        let baseUrl = layerInfo.url && layerInfo.url.split('?')[0];
+        let baseUrl = layerInfo.url;
+        let paramUrl = baseUrl.split('?')[1];
         let spriteUrl = styles.sprite;
         if (!CommonUtil.isAbsoluteURL(styles.sprite)) {
           spriteUrl = CommonUtil.relative2absolute(styles.sprite, baseUrl);
         }
+        if (layerInfo.dataSource.type === 'ARCGIS_VECTORTILE') {
+          Object.keys(styles.sources).forEach(function (key) {
+            Object.keys(styles.sources[key]).forEach(function(fieldName) {
+              if (fieldName === 'url') {
+                if (typeof styles.sources[key][fieldName] === 'string' && !CommonUtil.isAbsoluteURL(styles.sources[key][fieldName])) {
+                  styles.sources[key][fieldName] = CommonUtil.relative2absolute(styles.sources[key][fieldName], baseUrl);
+                }
+                styles.sources[key][fieldName] = styles.sources[key][fieldName] + (paramUrl ? '?' + paramUrl + '&f=json' : '?f=json');
+              }
+            });
+          });
+        }
         let withCredentials = this.isIportalProxyServiceUrl(spriteUrl);
         // 创建MapBoxStyle样式
         let mapboxStyles = new MapboxStyles({

src/openlayers/overlay/VectorTileSuperMapRest.js

@@ -323,11 +323,15 @@ export class VectorTileSuperMapRest extends VectorTile {
         }
         if (style.sources && style.sources[source]) {
           let newUrl;
+          let paramUrl = this.baseUrl && this.baseUrl.split('?')[1];
           if (style.sources[source].tiles) {
               newUrl = style.sources[source].tiles[0];
               if (!CommonUtil.isAbsoluteURL(newUrl)) {
                   newUrl = CommonUtil.relative2absolute(newUrl, this.baseUrl);
               }
+              if (paramUrl) {
+                  newUrl = CommonUtil.urlAppend(newUrl, paramUrl);
+              }
           } else if (style.sources[source].url) {
               let tiles = style.sources[source].url;
               if (!CommonUtil.isAbsoluteURL(tiles)) {
@@ -340,6 +344,9 @@ export class VectorTileSuperMapRest extends VectorTile {
                   tileUrl = CommonUtil.relative2absolute(tileUrl, tiles);
               }
               newUrl = SecurityManager.appendCredential(tileUrl);
+              if (paramUrl) {
+                newUrl = CommonUtil.urlAppend(newUrl, paramUrl);
+              }
           }
           this._tileUrl = SecurityManager.appendCredential(newUrl);
         }

src/openlayers/overlay/vectortile/MapboxStyles.js

@@ -377,26 +377,34 @@ export class MapboxStyles extends Observable {
         return parts ? parts[1] + extension + (parts.length > 2 ? parts[2] : '') : url + extension;
     }
 
-    _handleRelativeUrl(styles, baseUrl) {
-      if (!baseUrl) {
+    _handleRelativeUrl(styles, url) {
+      if (!url) {
           return styles;
       }
+      const baseUrl = url.split('?')[0];
+      const paramUrl = url.split('?')[1] || '';
       Object.keys(styles).forEach((fieldName) => {
           if (fieldName === 'sources') {
               Object.keys(styles[fieldName]).forEach((sourceName) => {
-                  this._handleRelativeUrl(styles[fieldName][sourceName], baseUrl);
+                  this._handleRelativeUrl(styles[fieldName][sourceName], url);
               })
           }
           if (fieldName === 'sprite' || fieldName === 'glyphs' || fieldName === 'url') {
               if (typeof styles[fieldName] === 'string' && !CommonUtil.isAbsoluteURL(styles[fieldName])) {
                   styles[fieldName] = CommonUtil.relative2absolute(styles[fieldName], baseUrl);
               }
+              if (paramUrl && !styles[fieldName].includes(paramUrl)) {
+                styles[fieldName] = styles[fieldName] + (paramUrl ? (styles[fieldName].includes('?') ? '&' + paramUrl : '?' + paramUrl) : '');
+              }
           }
           if (fieldName === 'tiles' && Array.isArray(styles[fieldName])) {
               styles[fieldName].forEach((tile) => {
                   if (!CommonUtil.isAbsoluteURL(tile)) {
                       tile = CommonUtil.relative2absolute(tile, baseUrl);
                   }
+                  if (paramUrl && !tile.includes(paramUrl)) {
+                    tile = tile + (paramUrl ? (styles[fieldName].includes('?') ? '&' + paramUrl : '?' + paramUrl) : '');
+                  }
               })
           }
       })

test/openlayers/overlay/vectortile/MapboxStylesSpec.js

@@ -309,4 +309,58 @@ describe("openlayers_MapboxStyles", () => {
           }
       });
   });
+
+  it("handle relative url with param", done => {
+    spyOn(XMLHttpRequest.prototype, 'send').and.callThrough();
+    spyOn(XMLHttpRequest.prototype, 'setRequestHeader').and.callThrough();
+    var style = {
+        "version" : 8,
+        "sprite" : "../sprites/sprite",
+        "glyphs" : "../fonts/{fontstack}/{range}.pbf",
+        "sources": {
+            "esri": {
+                "type": "vector",
+                "url": "../../"
+            }
+        },
+        "layers" : [{
+                "id" : "Contour_11_main/0",
+                "type" : "line",
+                "source" : "esri",
+                "source-layer" : "Contour",
+                "filter" : ["all", ["==", "Index3", 1], ["==", "Index5", 1]],
+                "minzoom" : 11,
+                "maxzoom" : 12,
+                "paint" : {
+                    "line-color" : "#61674a",
+                    "line-opacity" : 0.5,
+                    "line-width" : {
+                        "base" : 1.2,
+                        "stops" : [[11, 0.7], [16, 1.1]]
+                    }
+                }	
+        }]
+    }
+    mapboxStyles = new MapboxStyles({
+        style: style,
+        baseUrl: 'http://localhost:9876?tkk=ddddssss',
+        map: map,
+        source: "California",
+        headers:{'appToken':'test'}
+    });
+    mapboxStyles.on("styleloaded", () => {
+        try {
+            style = mapboxStyles.getStyleFunction();
+            expect(style).not.toBeNull();
+            expect(mapboxStyles._mbStyle.glyphs).toBe('http://localhost:9876/fonts/{fontstack}/{range}.pbf?tkk=ddddssss');
+            expect(mapboxStyles._mbStyle.sprite).toBe('http://localhost:9876/sprites/sprite?tkk=ddddssss');
+            expect(mapboxStyles._mbStyle.sources['esri']['url']).toBe('http://localhost:9876/?tkk=ddddssss');
+            done();
+        } catch (e) {
+            console.log("'init_Style_headers'案例失败" + e.name + ":" + e.message);
+            expect(false).toBeTruthy();
+            done();
+        }
+    });
+});
 });