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

Author: xilanhuaweidapao

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

src/openlayers/mapping/WebMap.js

@@ -5168,10 +5168,16 @@ 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);
-    const requestParameters = this.tileRequestParameters && this.tileRequestParameters(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);
+    const requestParameters = this.tileRequestParameters && this.tileRequestParameters(spriteUrl);
     // 创建MapBoxStyle样式
     let mapboxStyles = new MapboxStyles({
+      baseUrl,
       style: styles,
       source: styles.name,
       resolutions: styleResolutions,
@@ -5187,6 +5193,7 @@ export class WebMap extends Observable {
           //设置避让参数
           declutter: true,
           source: new VectorTileSuperMapRest({
+            baseUrl,
             style: styles,
             withCredentials,
             projection: layerInfo.projection,

src/openlayers/overlay/VectorTileSuperMapRest.js

@@ -29,6 +29,7 @@ import decryptTileUtil from '@supermapgis/tile-decryptor';
  * @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>'] - 版权描述信息。
@@ -80,6 +81,7 @@ export class VectorTileSuperMapRest extends VectorTile {
         me.withCredentials = options.withCredentials;
         me.headers = options.headers || {};
         me._tileType = options.tileType || 'ScaleXY';
+        me.baseUrl = options.baseUrl;
         this.vectorTileStyles = new VectorTileStyles();
         this._initialized(options);
 
@@ -317,7 +319,7 @@ export class VectorTileSuperMapRest extends VectorTile {
             });
             style = await response.json();
           }
-          this._fillByStyleJSON(style, options.source);
+          await this._fillByStyleJSON(style, options.source);
       } else {
           this._fillByRestMapOptions(options.url, options);
       }
@@ -329,13 +331,32 @@ export class VectorTileSuperMapRest extends VectorTile {
       }
     }
 
-    _fillByStyleJSON(style, source) {
+    async _fillByStyleJSON(style, source) {
         if (!source) {
             source = Object.keys(style.sources)[0];
         }
+        //ToDo 支持多个tiles地址
         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;

src/openlayers/overlay/vectortile/MapboxStyles.js

@@ -24,6 +24,7 @@ import Text from 'ol/style/Text';
  * @category  Visualization VectorTile
  * @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 {string} [options.baseUrl] - 当传入 style 对象且 style 中包含了相对路径时，需要传入 baseUrl 来拼接资源路径。
  * @param {(Object|string|undefined)} [options.style] - Mapbox Style JSON 对象或获取 Mapbox Style JSON 对象的 URL。与 options.url 互斥，优先级高于 options.url。
  * @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]。
@@ -103,6 +104,7 @@ export class MapboxStyles extends Observable {
                 });
             };
         this.layersBySourceLayer = {};
+        this.baseUrl = options.baseUrl;
         olExtends(this.map);
         this._loadStyle(this.styleTarget);
     }
@@ -248,6 +250,7 @@ export class MapboxStyles extends Observable {
     }
     _loadStyle(style) {
         if (Object.prototype.toString.call(style) == '[object Object]') {
+            this._handleRelativeUrl(style, this.baseUrl);
             this._mbStyle = style;
             setTimeout(() => {
                 this._resolve();
@@ -257,6 +260,7 @@ export class MapboxStyles extends Observable {
             FetchRequest.get(url, null, { withCredentials: this.withCredentials, headers: this.headers })
                 .then(response => response.json())
                 .then(mbStyle => {
+                    this._handleRelativeUrl(mbStyle, url);
                     this._mbStyle = mbStyle;
                     this._resolve();
                 });
@@ -288,7 +292,7 @@ export class MapboxStyles extends Observable {
                 xhr.responseType = 'blob';
                 xhr.addEventListener('loadend',(e) => {
                   var data = e.target.response;
-                  if (data !== undefined) {
+                  if (data !== undefined && data !== null) {
                     const img = new Image();
                     img.src = URL.createObjectURL(data);
                     this._spriteImage = img;
@@ -392,4 +396,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);
+                  }
+              })
+          }
+      })
+  }
 }

test/openlayers/overlay/VectorTileSuperMapRestSpec.js

@@ -225,4 +225,71 @@ 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);
+    });
+  });
 });

test/openlayers/overlay/vectortile/MapboxStylesSpec.js

@@ -279,4 +279,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();
+          }
+      });
+  });
 });

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": {