本文共 4002 字，大约阅读时间需要 13 分钟。
作者：刘大
本文已同步更新于简书文章
在前面的文章已经介绍了和iServer有交互的功能接口如何单个以及全局设置请求头，但是地图瓦片请求相对特殊一点，不走之前的设置，下面就具体看看各个地图框架里面如何设置的
####1.LeafletL.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(); } 转载地址：http://mspxi.baihongyu.com/