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

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

你可能感兴趣的:(SuperMap二维iClient客户端如何添加自定义请求头(二))