在前面的文章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();
}