Cómo agregar un encabezado de solicitud personalizado al cliente iClient de SuperMap 2D (2)

Autor: Liu

Este artículo se ha actualizado sincrónicamente en el artículo de libro breve https://www.jianshu.com/p/8a72c964022b

En el artículo anterior Cómo agregar encabezados de solicitud personalizados al cliente de iClient SuperMap 2D (1) He presentado cómo configurar los encabezados de solicitud de forma individual y global para la interfaz funcional que interactúa con iServer, pero la solicitud de mosaico de mapa es relativamente especial, no el anterior. Configuración, echemos un vistazo a cómo configurar en cada marco de mapa
#### 1.

L.TileLayer.include({
	createTile: function(coords, done) {
		var tile = document.createElement('img');
		L.DomEvent.on(tile, 'load', L.Util.bind(this._tileOnLoad, this, done, tile));
		L.DomEvent.on(tile, 'error', L.Util.bind(this._tileOnError, this, done, tile));
		if (this.options.crossOrigin || this.options.crossOrigin === '') {
			tile.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin;
		}
		tile.alt = '';
		tile.setAttribute('role', 'presentation');
		var xhr = new XMLHttpRequest();
		xhr.responseType = 'blob';
		xhr.addEventListener('loadend', function(evt) {
			var data = this.response;
			if (data !== undefined) {
				tile.src = URL.createObjectURL(data);
			} else {
				tile.setState('error');
			}
		   
		});
		xhr.addEventListener('error', function() {
			tile.setState('error');
		});
		xhr.open('GET', this.getTileUrl(coords));
		xhr.setRequestHeader('apptoken', 'aaaa');
		xhr.send();
		 return tile;
	}
});

L.supermap.tiledMapLayer(url).addTo(map);

#### 2.Capas abiertas

var layer = new ol.layer.Tile({
	source: new ol.source.TileSuperMapRest({
		url: url,
		wrapX: true,
		tileLoadFunction: function (tile, src) {
			var xhr = new XMLHttpRequest();
			xhr.responseType = 'blob';
			xhr.addEventListener('loadend', function (evt) {
				var data = this.response;
				if (data !== undefined) {
					tile.getImage().src = URL.createObjectURL(data);
				} else {
					tile.setState('error');
				}
			});
			xhr.addEventListener('error', function () {
				tile.setState('error');
			});
			xhr.open('GET', src);
			xhr.setRequestHeader('apptoken', 'aaaa');
			xhr.send();
		}
	}),
	projection: 'EPSG:4326'
});
map.addLayer(layer);

#### 3.MapboxGL

var map = new mapboxgl.Map({
	container: 'map', // container id
	style: {
		version: 8,
		sources: {
			'raster-tiles': {
				attribution: attribution,
				type: 'raster',
				tiles: [
					host +
						'/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
				],
				tileSize: 256
			}
		},
		layers: [
			{
				id: 'simple-tiles',
				type: 'raster',
				source: 'raster-tiles',
				minzoom: 0,
				maxzoom: 22
			}
		]
	},
	transformRequest: function (url, resourceType) {
		return {
			url: url,
			headers: { apptoken: 'aaaa' }
		};
	},
	center: [120.143, 30.236], // starting position
	zoom: 3 // starting zoom
});

#### 4.Clásico

SuperMap.Tile.CanvasImage.prototype.loadTileImage=function(){
        var me = this, 
            image = new Image();
        image.firstInView = true;
        me.lastImage = image;
        var context = { 
            image: image,
            tile: me,
            viewRequestID: me.layer.map.viewRequestID,
            newImgTag: me.newImgTag
        };
        
        var onLoadFunctionProxy = function() {
            if(this.tile.newImgTag === this.newImgTag){
                this.tile.onLoadFunction(this);    
            }
        };
        var onErrorFunctionProxy = function() {
            this.tile.onErrorFunction(this);
        };
        image.onerror = SuperMap.Function.bind(onErrorFunctionProxy, context);
        //跨域请求瓦片，暂时只支持非重定向的SUPERMAP_REST服务的地图
        if(this.layer.useCORS&&!SuperMap.Util.isInTheSameDomain(me.url)&&(me.url.indexOf("redirect=true")<0)&&((SuperMap.Layer.SimpleCachedLayer && me.layer instanceof SuperMap.Layer.SimpleCachedLayer)||
            (SuperMap.Layer.TiledDynamicRESTLayer && me.layer instanceof SuperMap.Layer.TiledDynamicRESTLayer))){
            image.crossOrigin="anonymous";
        }
        //添加请求头
		var xhr = new XMLHttpRequest();
		        xhr.responseType = 'blob';
		        xhr.open('GET', me.url);
		        xhr.setRequestHeader('apptoken', 'aaaa');
		        xhr.onreadystatechange = e => {
		            if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
		                image.src = URL.createObjectURL(xhr.response);
		                image.onload = SuperMap.Function.bind(onLoadFunctionProxy, context); 
		            }
		        };
		        xhr.send();
    }