@supermapgis/iclient-ol 11.2.0 → 11.2.1

package/overlay/VectorTileSuperMapRest.js

@@ -34,6 +34,7 @@ import decryptTileUtil from '@supermapgis/tile-decryptor';
  * @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>'] - 版权描述信息。
  * @param {Object} [options.format] - 瓦片的要素格式化。
  * @param {boolean} [options.withCredentials] - 请求是否携带 cookie。
+ * @param {Object} [options.headers] - 请求头。
  * @param {boolean|Function} [options.decrypt] - 瓦片解密。如果是 true 表示用内置的解密方法， 如 decrypt: true；如果是function 则是自定义解密如 decrypt: function ({ key, bytes })。
  * @param {Function} [options.decryptCompletedFunction] - 解密完成后触发。如 decryptCompletedFunction(completeData)。
  * @extends {ol.source.VectorTile}
@@ -77,6 +78,7 @@ export class VectorTileSuperMapRest extends VectorTile {
         });
         var me = this;
         me.withCredentials = options.withCredentials;
+        me.headers = options.headers || {};
         me._tileType = options.tileType || 'ScaleXY';
         this.vectorTileStyles = new VectorTileStyles();
         this._initialized(options);
@@ -165,9 +167,9 @@ export class VectorTileSuperMapRest extends VectorTile {
             var regHeight = new RegExp('(^|\\?|&)' + 'height' + '=([^&]*)(\\s|&|$)');
             var width = Number(tileUrl.match(regWidth)[2]);
             var height = Number(tileUrl.match(regHeight)[2]);
-
+            var me = this;
             tile.setLoader(function (extent, resolution, projection) {
-                FetchRequest.get(tileUrl)
+                FetchRequest.get(tileUrl, null, {headers:me.headers})
                     .then(function (response) {
                         if (tile.getFormat() instanceof GeoJSON) {
                             return response.json();
@@ -251,45 +253,50 @@ export class VectorTileSuperMapRest extends VectorTile {
                     xhr.responseType = 'arraybuffer';
                 }
                 xhr.withCredentials = me.withCredentials;
+                for (const key in me.headers) {
+                  if (me.headers.hasOwnProperty(key)) {
+                    xhr.setRequestHeader(key, me.headers[key]);
+                  }
+                }
                 xhr.onload = function () {
-                    if (!xhr.status || (xhr.status >= 200 && xhr.status < 300)) {
-                        const type = format.getType();
-                        let source = void 0;
-                        if (type === 'json' || type === 'text') {
-                            source = xhr.responseText;
-                        } else if (type === 'xml') {
-                            source = xhr.responseXML;
-                            if (!source) {
-                                source = new DOMParser().parseFromString(xhr.responseText, 'application/xml');
-                            }
-                        } else if (type === 'arraybuffer') {
-                            source = xhr.response;
-                        }
-                        if (source) {
-                            source = me._decryptMvt(source);
-                            if (['4', '5'].indexOf(Util.getOlVersion()) > -1) {
-                              success.call(
-                                  this,
-                                  format.readFeatures(source, { featureProjection: projection }),
-                                  format.readProjection(source),
-                                  format.getLastExtent()
-                              );
-                            } else {
-                                success.call(
-                                    this,
-                                    format.readFeatures(source, {
-                                        extent: extent,
-                                        featureProjection: projection
-                                    }),
-                                    format.readProjection(source)
-                                );
-                            }
-                        } else {
-                            failure.call(this);
-                        }
+                  if (!xhr.status || (xhr.status >= 200 && xhr.status < 300)) {
+                    const type = format.getType();
+                    let source = void 0;
+                    if (type === 'json' || type === 'text') {
+                      source = xhr.responseText;
+                    } else if (type === 'xml') {
+                      source = xhr.responseXML;
+                      if (!source) {
+                        source = new DOMParser().parseFromString(xhr.responseText, 'application/xml');
+                      }
+                    } else if (type === 'arraybuffer') {
+                      source = xhr.response;
+                    }
+                    if (source) {
+                      source = me._decryptMvt(source);
+                      if (['4', '5'].indexOf(Util.getOlVersion()) > -1) {
+                        success.call(
+                          this,
+                          format.readFeatures(source, { featureProjection: projection }),
+                          format.readProjection(source),
+                          format.getLastExtent()
+                        );
+                      } else {
+                        success.call(
+                          this,
+                          format.readFeatures(source, {
+                            extent: extent,
+                            featureProjection: projection
+                          }),
+                          format.readProjection(source)
+                        );
+                      }
                     } else {
-                        failure.call(this);
+                      failure.call(this);
                     }
+                  } else {
+                    failure.call(this);
+                  }
                 }.bind(this);
                 xhr.onerror = function () {
                     failure.call(this);
@@ -304,7 +311,10 @@ export class VectorTileSuperMapRest extends VectorTile {
           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 })
+            const response = await FetchRequest.get(url, null, {
+              withCredentials: options.withCredentials,
+              headers: options.headers
+            });
             style = await response.json();
           }
           this._fillByStyleJSON(style, options.source);

package/overlay/vectortile/MapboxStyles.js

@@ -34,6 +34,7 @@ import Text from 'ol/style/Text';
  * @param {ol.Map} [options.map] - Openlayers 地图对象，仅用于面填充样式，若没有面填充样式可不填。
  * @param {ol.StyleFunction} [options.selectedStyle] -选中样式 Function。
  * @param {boolean} [options.withCredentials] - 请求是否携带 cookie。
+ * @param {Object} [options.headers] - 请求头。
  * @example
  *  var mbStyle = new MapboxStyles({
             url: url,
@@ -73,6 +74,7 @@ export class MapboxStyles extends Observable {
             );
         this.resolutions = options.resolutions;
         this.withCredentials = options.withCredentials;
+        this.headers = options.headers;
         this.selectedObjects = [];
         this.selectedStyle =
             options.selectedStyle ||
@@ -252,7 +254,7 @@ export class MapboxStyles extends Observable {
             }, 0);
         } else {
             var url = SecurityManager.appendCredential(style);
-            FetchRequest.get(url, null, { withCredentials: this.withCredentials })
+            FetchRequest.get(url, null, { withCredentials: this.withCredentials, headers: this.headers })
                 .then(response => response.json())
                 .then(mbStyle => {
                     this._mbStyle = mbStyle;
@@ -271,32 +273,48 @@ export class MapboxStyles extends Observable {
             this._mbStyle.sprite = this._mbStyle.sprite.replace('@2x', '');
             const spriteUrl = this._toSpriteUrl(this._mbStyle.sprite, this.path, sizeFactor + '.json');
             FetchRequest.get(SecurityManager.appendCredential(spriteUrl), null, {
-                withCredentials: this.withCredentials
+              withCredentials: this.withCredentials,
+              headers: this.headers
             })
-                .then(response => response.json())
-                .then(spritesJson => {
-                    this._spriteData = spritesJson;
-                    this._spriteImageUrl = SecurityManager.appendCredential(
-                        this._toSpriteUrl(this._mbStyle.sprite, this.path, sizeFactor + '.png')
-                    );
-                    this._spriteImage = null;
+              .then((response) => response.json())
+              .then((spritesJson) => {
+                this._spriteData = spritesJson;
+                this._spriteImageUrl = SecurityManager.appendCredential(
+                  this._toSpriteUrl(this._mbStyle.sprite, this.path, sizeFactor + '.png')
+                );
+                this._spriteImage = null;
+
+                var xhr = new XMLHttpRequest();
+                xhr.responseType = 'blob';
+                xhr.addEventListener('loadend',(e) => {
+                  var data = e.target.response;
+                  if (data !== undefined) {
                     const img = new Image();
-                    img.crossOrigin = this.withCredentials ? 'use-credentials' : 'anonymous';
-                    img.onload = () => {
-                        this._spriteImage = img;
-                        this._initStyleFunction();
-                    };
-                    img.onerror = () => {
-                        this._spriteImage = null;
-                        this._initStyleFunction();
-                    };
-                    img.src = this._spriteImageUrl;
-                })
-                .catch( err => {
-                    console.log(err);
+                    img.src = URL.createObjectURL(data);
+                    this._spriteImage = img;
+                  } else {
                     this._spriteImage = null;
-                    this._initStyleFunction();
+                  }
+                  this._initStyleFunction();
+                });
+                xhr.addEventListener('error', () => {
+                  this._spriteImage = null;
+                  this._initStyleFunction();
                 });
+                xhr.open('GET', this._spriteImageUrl);
+                for (const key in this.headers) {
+                  if (this.headers.hasOwnProperty(key)) {
+                    xhr.setRequestHeader(key, this.headers[key]);
+                  }
+                }
+                xhr.withCredentials = this.withCredentials;
+                xhr.send();
+              })
+              .catch((err) => {
+                console.log(err);
+                this._spriteImage = null;
+                this._initStyleFunction();
+              });
         } else {
             this._initStyleFunction();
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@supermapgis/iclient-ol",
   "description": "",
-  "version": "11.2.0",
+  "version": "11.2.1",
   "keywords": [
     "SuperMap",
     "OpenLayers"
@@ -15,7 +15,7 @@
   "author": "SuperMap",
   "license": "Apache-2.0",
   "dependencies": {
-    "@supermapgis/iclient-common": "11.2.0",
+    "@supermapgis/iclient-common": "11.2.1",
     "@supermapgis/tile-decryptor": "^1.0.0",
     "@turf/turf": "6.5.0",
     "mapv": "2.0.62",