SuperMap二维iClient客户端如何添加自定义请求头(二）

本文已同步更新于简书文章

在前面的文章已经介绍了和iServer有交互的功能接口如何单个以及全局设置请求头，但是地图瓦片请求相对特殊一点，不走之前的设置，下面就具体看看各个地图框架里面如何设置的 ####1.Leaflet

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.OpenLayers

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.Classic

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