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

xilanhuaweidapao · xilanhuaweidapao · commit 81b7bdb7b781 · 2025-02-14T16:10:34.000+08:00
diff --git a/src/common/mapping/WebMapV2.js b/src/common/mapping/WebMapV2.js
@@ -363,6 +363,19 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
             style.layers.forEach(layer => {
               layer.layout && (layer.layout.visibility = this._getVisibility(layerInfo.visible));
             });
+            if (layerInfo.dataSource.type === 'ARCGIS_VECTORTILE') {
+              let paramUrl = url.split('?')[1];
+              Object.keys(style.sources).forEach((key) => {
+                Object.keys(style.sources[key]).forEach((fieldName) => {
+                  if (fieldName === 'url') {
+                    if (typeof style.sources[key][fieldName] === 'string' && !this.isAbsoluteURL(style.sources[key][fieldName])) {
+                      style.sources[key][fieldName] = this.relative2absolute(style.sources[key][fieldName], url);
+                    }
+                    style.sources[key][fieldName] = style.sources[key][fieldName] + (paramUrl ? '?' + paramUrl + '&f=json' : '?f=json');
+                  }
+                });
+              });
+            }
             this.map.addStyle(style, undefined, undefined, undefined, url);
             const layerIds = [];
             style.layers.forEach((item) => {
@@ -3068,5 +3081,22 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
       const visibility = visible === true || visible === 'visible' ? 'visible' : 'none';
       return visibility;
     }
+
+    isAbsoluteURL(url) {
+      try {
+        const res = new URL(url);
+        return !!res;
+      } catch (_) {
+        return false;
+      }
+    }
+
+    relative2absolute(url, base) {
+      let newUrl = new URL(url, base);
+      if (newUrl && newUrl.href) {
+        return decodeURIComponent(newUrl.href);
+      }
+      return null;
+    }
   };
 }
diff --git a/src/openlayers/mapping/WebMap.js b/src/openlayers/mapping/WebMap.js
@@ -5126,11 +5126,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);
     const requestParameters = this.tileRequestParameters && this.tileRequestParameters(spriteUrl);
     // 创建MapBoxStyle样式
diff --git a/src/openlayers/overlay/VectorTileSuperMapRest.js b/src/openlayers/overlay/VectorTileSuperMapRest.js
@@ -338,11 +338,15 @@ export class VectorTileSuperMapRest extends VectorTile {
       //ToDo 支持多个tiles地址
         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)) {
@@ -355,6 +359,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);
         }
diff --git a/src/openlayers/overlay/vectortile/MapboxStyles.js b/src/openlayers/overlay/vectortile/MapboxStyles.js
@@ -397,26 +397,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) : '');
+                  }
               })
           }
       })
diff --git a/test/openlayers/overlay/vectortile/MapboxStylesSpec.js b/test/openlayers/overlay/vectortile/MapboxStylesSpec.js
@@ -334,4 +334,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();
+        }
+    });
+});
 });

Original file line number	Diff line number	Diff line change
`@@ -397,26 +397,34 @@ export class MapboxStyles extends Observable {`
`397`	`397`	`return parts ? parts[1] + extension + (parts.length > 2 ? parts[2] : '') : url + extension;`
`398`	`398`	`}`
`399`	`399`
`400`		`- _handleRelativeUrl(styles, baseUrl) {`
`401`		`- if (!baseUrl) {`
	`400`	`+ _handleRelativeUrl(styles, url) {`
	`401`	`+ if (!url) {`
`402`	`402`	`return styles;`
`403`	`403`	`}`
	`404`	`+ const baseUrl = url.split('?')[0];`
	`405`	`+ const paramUrl = url.split('?')[1] \|\| '';`
`404`	`406`	`Object.keys(styles).forEach((fieldName) => {`
`405`	`407`	`if (fieldName === 'sources') {`
`406`	`408`	`Object.keys(styles[fieldName]).forEach((sourceName) => {`
`407`		`- this._handleRelativeUrl(styles[fieldName][sourceName], baseUrl);`
	`409`	`+ this._handleRelativeUrl(styles[fieldName][sourceName], url);`
`408`	`410`	`})`
`409`	`411`	`}`
`410`	`412`	`if (fieldName === 'sprite' \|\| fieldName === 'glyphs' \|\| fieldName === 'url') {`
`411`	`413`	`if (typeof styles[fieldName] === 'string' && !CommonUtil.isAbsoluteURL(styles[fieldName])) {`
`412`	`414`	`styles[fieldName] = CommonUtil.relative2absolute(styles[fieldName], baseUrl);`
`413`	`415`	`}`
	`416`	`+ if (paramUrl && !styles[fieldName].includes(paramUrl)) {`
	`417`	`+ styles[fieldName] = styles[fieldName] + (paramUrl ? (styles[fieldName].includes('?') ? '&' + paramUrl : '?' + paramUrl) : '');`
	`418`	`+ }`
`414`	`419`	`}`
`415`	`420`	`if (fieldName === 'tiles' && Array.isArray(styles[fieldName])) {`
`416`	`421`	`styles[fieldName].forEach((tile) => {`
`417`	`422`	`if (!CommonUtil.isAbsoluteURL(tile)) {`
`418`	`423`	`tile = CommonUtil.relative2absolute(tile, baseUrl);`
`419`	`424`	`}`
	`425`	`+ if (paramUrl && !tile.includes(paramUrl)) {`
	`426`	`+ tile = tile + (paramUrl ? (styles[fieldName].includes('?') ? '&' + paramUrl : '?' + paramUrl) : '');`
	`427`	`+ }`
`420`	`428`	`})`
`421`	`429`	`}`
`422`	`430`	`})`