前言

工作有个需求，需要通过 openlayers 加载三方发布的瓦片地图服务，这个服务的瓦片在请求时请求头里需要带有一些验证信息，比如 token、signature这些，第一次遇到，记录一下方法

解决办法

openlayers 加载瓦片服务常用XYZ 作为 source，而 XYZ创建时有一个参数tileLoadFunction 可以给请求添加自定义操作：

const tileArcGISXYZ = new XYZ({
      // tileGrid: tileGrid,
      projection: 'EPSG:3857',
      url: baseUrl,
      tileLoadFunction: function (imageTile, src) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', src);
        let data = JSON.parse(localStorage.getItem("apiToken"))
        xhr.setRequestHeader('cd-token', data["cd-token"]); // 设置自定义的 Header 参数
        xhr.setRequestHeader('signature', data.signature); // 设置自定义的 Header 参数
        xhr.setRequestHeader('timestamp', data.timestamp); // 设置自定义的 Header 参数
        xhr.onload = function () {
          imageTile.getImage().src = URL.createObjectURL(xhr.response);
        };
        xhr.responseType = 'blob';
        xhr.send();
      },
    });