【update】ol 支持加载包含相对地址的style review by luox

xilanhuaweidapao · xilanhuaweidapao · commit 6cdc2afa2229 · 2025-01-24T10:03:35.000+08:00
diff --git a/src/common/commontypes/Util.js b/src/common/commontypes/Util.js
@@ -1086,6 +1086,34 @@ const Util = {
       }
       return encodeURIComponent(value);
     });
+  },
+  /**
+    * @description 是否是绝对地址。
+    * @private
+    * @param {string} url - 验证地址。
+    * @returns {boolean} 是否是绝对地址。
+    */
+  isAbsoluteURL(url) {
+    try {
+      const res = new URL(url);
+      return !!res;
+    } catch (_) {
+      return false;
+    }
+  },
+   /**
+    * @description 相对地址转绝对地址。
+    * @private
+    * @param {string} url - 相对地址。
+    * @param {string} base - 基础地址。
+    * @returns {string} 完整地址。
+    */
+  relative2absolute(url, base) {
+    let newUrl = new URL(url, base);
+    if (newUrl && newUrl.href) {
+      return decodeURIComponent(newUrl.href);
+    }
+    return;
   }
 };
 
diff --git a/src/openlayers/mapping/WebMap.js b/src/openlayers/mapping/WebMap.js
@@ -4818,9 +4818,15 @@ export class WebMap extends Observable {
         const envelope = this.getEnvelope(indexbounds, layerInfo.bounds);
         const styleResolutions = this.getStyleResolutions(envelope);
         // const origin = [envelope.left, envelope.top];
-        let withCredentials = this.isIportalProxyServiceUrl(styles.sprite);
+        let baseUrl = layerInfo.url && layerInfo.url.split('?')[0];
+        let spriteUrl = styles.sprite;
+        if (!CommonUtil.isAbsoluteURL(styles.sprite)) {
+          spriteUrl = CommonUtil.relative2absolute(styles.sprite, baseUrl);
+        }
+        let withCredentials = this.isIportalProxyServiceUrl(spriteUrl);
         // 创建MapBoxStyle样式
         let mapboxStyles = new MapboxStyles({
+            baseUrl,
             style: styles,
             source: styles.name,
             resolutions: styleResolutions,
@@ -4835,6 +4841,7 @@ export class WebMap extends Observable {
                     //设置避让参数
                     declutter: true,
                     source: new VectorTileSuperMapRest({
+                        baseUrl,
                         style: styles,
                         withCredentials,
                         projection: layerInfo.projection,
diff --git a/src/openlayers/overlay/VectorTileSuperMapRest.js b/src/openlayers/overlay/VectorTileSuperMapRest.js
@@ -25,6 +25,7 @@ import TileGrid from 'ol/tilegrid/TileGrid';
  * @modulecategory Overlay
  * @param {Object} options - 参数。
  * @param {(string|undefined)} options.url - 服务地址。
+ * @param {string} [options.baseUrl] - 当传入 style 对象且 style 中包含了相对路径时，需要传入 baseUrl 来拼接资源路径。
  * @param {(string|Object|undefined)} options.style - Mapbox Style JSON 对象或获取 Mapbox Style JSON 对象的 URL。当 `options.format` 为 {@link ol.format.MVT} 且 `options.source` 不为空时有效，优先级高于 `options.url`。
  * @param {(string|undefined)} options.source - Mapbox Style JSON 对象中的source名称。当 `options.style` 设置时有效。当不配置时，默认为 Mapbox Style JSON 的 `sources` 对象中的第一个。
  * @param {(string|Object)} [options.attributions='Tile Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>'] - 版权信息。
@@ -58,8 +59,7 @@ export class VectorTileSuperMapRest extends VectorTile {
             projection: options.projection,
             state:
                 options.format instanceof MVT &&
-                options.style &&
-                Object.prototype.toString.call(options.style) == '[object String]'
+                options.style
                     ? 'loading'
                     : options.state,
             tileClass: options.tileClass,
@@ -74,22 +74,9 @@ export class VectorTileSuperMapRest extends VectorTile {
         var me = this;
         me.withCredentials = options.withCredentials;
         me._tileType = options.tileType || 'ScaleXY';
+        me.baseUrl = options.baseUrl;
         this.vectorTileStyles = new VectorTileStyles();
-        if (options.format instanceof MVT && options.style) {
-            if (Object.prototype.toString.call(options.style) == '[object String]') {
-                var url = SecurityManager.appendCredential(options.style);
-                FetchRequest.get(url, null, { withCredentials: options.withCredentials })
-                    .then((response) => response.json())
-                    .then((mbStyle) => {
-                        this._fillByStyleJSON(mbStyle, options.source);
-                        this.setState('ready');
-                    });
-            } else {
-                this._fillByStyleJSON(options.style, options.source);
-            }
-        } else {
-            this._fillByRestMapOptions(options.url, options);
-        }
+        this._initialized(options);
 
         function tileUrlFunction(tileCoord, pixelRatio, projection) {
             if (!me.tileGrid) {
@@ -313,13 +300,48 @@ export class VectorTileSuperMapRest extends VectorTile {
             });
         }
     }
-    _fillByStyleJSON(style, source) {
+
+    async _initialized(options) {
+      if (options.format instanceof MVT && options.style) {
+        let style = options.style;
+          if (Object.prototype.toString.call(options.style) == '[object String]') {
+            var url = SecurityManager.appendCredential(options.style);
+            const response = await FetchRequest.get(url, null, {
+              withCredentials: options.withCredentials
+            });
+            style = await response.json();
+          }
+          await this._fillByStyleJSON(style, options.source);
+      } else {
+        this._fillByRestMapOptions(options.url, options);
+      }
+      this.setState('ready');
+    }
+    async _fillByStyleJSON(style, source) {
         if (!source) {
             source = Object.keys(style.sources)[0];
         }
         if (style.sources && style.sources[source]) {
-            //ToDo 支持多个tiles地址
-            this._tileUrl = SecurityManager.appendCredential(style.sources[source].tiles[0]);
+          let newUrl;
+          if (style.sources[source].tiles) {
+              newUrl = style.sources[source].tiles[0];
+              if (!CommonUtil.isAbsoluteURL(newUrl)) {
+                  newUrl = CommonUtil.relative2absolute(newUrl, this.baseUrl);
+              }
+          } else if (style.sources[source].url) {
+              let tiles = style.sources[source].url;
+              if (!CommonUtil.isAbsoluteURL(tiles)) {
+                  tiles = CommonUtil.relative2absolute(tiles, this.baseUrl);
+              }
+              const response = await FetchRequest.get(tiles, {}, { withoutFormatSuffix: true });
+              const sourceInfo = await response.json();
+              let tileUrl = sourceInfo.tiles[0];
+              if (!CommonUtil.isAbsoluteURL(tileUrl)) {
+                  tileUrl = CommonUtil.relative2absolute(tileUrl, tiles);
+              }
+              newUrl = SecurityManager.appendCredential(tileUrl);
+          }
+          this._tileUrl = SecurityManager.appendCredential(newUrl);
         }
         if (style.metadata && style.metadata.indexbounds) {
             const indexbounds = style.metadata.indexbounds;
diff --git a/src/openlayers/overlay/vectortile/MapboxStyles.js b/src/openlayers/overlay/vectortile/MapboxStyles.js
@@ -25,6 +25,7 @@ import Text from 'ol/style/Text';
  * @param {Object} options - 参数。
  * @param {(string|undefined)} [options.url] - SuperMap iServer 地图服务地址，例如'http://localhost:8090/iserver/services/map-mvt-test/rest/maps/test'，与options.style互斥，优先级低于options.style。
  * @param {(Object|string|undefined)} [options.style] - Mapbox Style JSON 对象或获取 Mapbox Style JSON 对象的 URL。与 options.url 互斥，优先级高于 options.url。
+ * @param {string} [options.baseUrl] - 当传入 style 对象且 style 中包含了相对路径时，需要传入 baseUrl 来拼接资源路径。
  * @param {Array.<number>} [options.resolutions] - 地图分辨率数组，用于映射 zoom 值。通常情況与地图的 {@link ol.View} 的分辨率一致。</br>
  * 默认值为：[78271.51696402048,39135.75848201024, 19567.87924100512,9783.93962050256,4891.96981025128,2445.98490512564, 1222.99245256282,611.49622628141,305.748113140705,152.8740565703525, 76.43702828517625,38.21851414258813,19.109257071294063,9.554628535647032, 4.777314267823516,2.388657133911758,1.194328566955879,0.5971642834779395, 0.29858214173896974,0.14929107086948487,0.07464553543474244]。
  * @param {(string|Array.<string>|undefined)} [options.source] - Mapbox Style 'source'的 key 值或者 'layer' 的 ID 数组。
@@ -101,6 +102,7 @@ export class MapboxStyles extends Observable {
                 });
             };
         this.layersBySourceLayer = {};
+        this.baseUrl = options.baseUrl;
         olExtends(this.map);
         this._loadStyle(this.styleTarget);
     }
@@ -246,13 +248,15 @@ export class MapboxStyles extends Observable {
     }
     _loadStyle(style) {
         if (Object.prototype.toString.call(style) == '[object Object]') {
+            this._handleRelativeUrl(style, this.baseUrl);
             this._mbStyle = style;
             this._resolve();
         } else {
             var url = SecurityManager.appendCredential(style);
             FetchRequest.get(url, null, { withCredentials: this.withCredentials })
                 .then(response => response.json())
                 .then(mbStyle => {
+                    this._handleRelativeUrl(mbStyle, url);
                     this._mbStyle = mbStyle;
                     this._resolve();
                 });
@@ -372,4 +376,29 @@ export class MapboxStyles extends Observable {
         const parts = url.match(this.spriteRegEx);
         return parts ? parts[1] + extension + (parts.length > 2 ? parts[2] : '') : url + extension;
     }
+
+    _handleRelativeUrl(styles, baseUrl) {
+      if (!baseUrl) {
+          return styles;
+      }
+      Object.keys(styles).forEach((fieldName) => {
+          if (fieldName === 'sources') {
+              Object.keys(styles[fieldName]).forEach((sourceName) => {
+                  this._handleRelativeUrl(styles[fieldName][sourceName], baseUrl);
+              })
+          }
+          if (fieldName === 'sprite' || fieldName === 'glyphs' || fieldName === 'url') {
+              if (typeof styles[fieldName] === 'string' && !CommonUtil.isAbsoluteURL(styles[fieldName])) {
+                  styles[fieldName] = CommonUtil.relative2absolute(styles[fieldName], baseUrl);
+              }
+          }
+          if (fieldName === 'tiles' && Array.isArray(styles[fieldName])) {
+              styles[fieldName].forEach((tile) => {
+                  if (!CommonUtil.isAbsoluteURL(tile)) {
+                      tile = CommonUtil.relative2absolute(tile, baseUrl);
+                  }
+              })
+          }
+      })
+  }
 }
diff --git a/test/openlayers/overlay/VectorTileSuperMapRestSpec.js b/test/openlayers/overlay/VectorTileSuperMapRestSpec.js
@@ -113,6 +113,74 @@ describe('openlayers_VectorTileSuperMapRest', () => {
         });
 
     });
+
+    it('handle relative url', (done) => {
+      spyOn(FetchRequest, 'get').and.callFake((url) => {
+                  if (url.indexOf('fake') > -1) {
+                    return Promise.resolve(new Response(JSON.stringify({
+                      tiles: ['tile/{z}/{y}/{x}.pbf']
+                    })));
+                  } 
+                  return Promise.resolve();
+      });
+      new MapService(url).getMapInfo((serviceResult) => {
+        map = new Map({
+          target: 'map',
+          view: new View({
+            center: [12957388, 4853991],
+            zoom: 11
+          })
+        });
+        vectorTileOptions = VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
+        vectorTileOptions.tileLoadFunction = (tile) => {
+          tile.setLoader(() => {
+            tile.setFeatures([]);
+          });
+        };
+        vectorTileOptions.format = new MVT();
+        vectorTileOptions.baseUrl = 'http://fake/iportal/services';
+        vectorTileOptions.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]]
+                      }
+                  }	
+          }]
+      }
+        vectorTileSource = new VectorTileSuperMapRest(vectorTileOptions);
+        vectorTileSource.once('tileloadend', () => {
+          expect(vectorTileOptions).not.toBeNull();
+          expect(vectorTileOptions.crossOrigin).toBe('anonymous');
+          expect(vectorTileSource).not.toBeNull();
+          done();
+        });
+        vectorLayer = new VectorTileLayer({
+          source: vectorTileSource
+        });
+        map.addLayer(vectorLayer);
+      });
+    });
+
     it('custom_tileLoadFunction', (done) => {
         var spy = jasmine.createSpy('test')
         var tileLoadFunction = (tile) => {
diff --git a/test/openlayers/overlay/vectortile/MapboxStylesSpec.js b/test/openlayers/overlay/vectortile/MapboxStylesSpec.js
@@ -254,4 +254,59 @@ describe("openlayers_MapboxStyles", () => {
             }
         });
     });
+
+    it("handle relative url", 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',
+          map: map,
+          source: "California",
+          headers:{'appToken':'test'}
+      });
+      mapboxStyles.on("styleloaded", () => {
+          try {
+              style = mapboxStyles.getStyleFunction();
+              expect(style).not.toBeNull();
+              console.log('mapboxStyles', mapboxStyles);
+              expect(mapboxStyles._mbStyle.glyphs).toBe('http://localhost:9876/fonts/{fontstack}/{range}.pbf');
+              expect(mapboxStyles._mbStyle.sprite).toBe('http://localhost:9876/sprites/sprite');
+              expect(mapboxStyles._mbStyle.sources['esri']['url']).toBe('http://localhost:9876/');
+              done();
+          } catch (e) {
+              console.log("'init_Style_headers'案例失败" + e.name + ":" + e.message);
+              expect(false).toBeTruthy();
+              done();
+          }
+      });
+  });
 });
diff --git a/test/resources/MapboxStyles.js b/test/resources/MapboxStyles.js
@@ -8,7 +8,7 @@ var  vectorstylesEscapedJson={
         }
     },
     "name": "California",
-    "sprite": "../../base/resources/img/sprite@2x",
+    "sprite": "http://localhost:9876/base/resources/img/sprite@2x",
     "layers": [
         {
             "paint": {

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ var vectorstylesEscapedJson={`
`8`	`8`	`}`
`9`	`9`	`},`
`10`	`10`	`"name": "California",`
`11`		`- "sprite": "../../base/resources/img/sprite@2x",`
	`11`	`+ "sprite": "http://localhost:9876/base/resources/img/sprite@2x",`
`12`	`12`	`"layers": [`
`13`	`13`	`{`
`14`	`14`	`"paint": {`