Cesium 后台返回的图片如何在代码里生成路径

需求

Cesium 中给地球加皮肤，但是皮肤是后台接口返回的图片，是动态值

分析

我们平常所了解到的贴图，路径只能是静态目录下的图片，而去请求后台的图片时出现了跨域，所以这个方法不可行，智能通过ajax请求将图片请求回来之后做一次处理，转成流后的URL才可以实现需求

解决

1. 在接口中添加流文件传输。此处 request 是二次封装 Axios ，export 出来的方法

export function getImgDownloadApi(data) {
    
    
  return request({
    
    
    url: "/dev-api/situationDisplay/img/download",
    method: "get",
    responseType: "blob",
    baseURL: "",
    params: data,
  });
}

2. 当我们想要在页面上加载一张从后台拿到的数据时，是这样的

const img = document.createElement("img");
let blob = new window.Blob([res], {
    
     type: "image/png" });
let url = window.URL.createObjectURL(blob);
img.src = url;
console.log(1001,img)
img.onload = function () {
    
    
  window.URL.revokeObjectURL(url);
};
const imgDiv = document.querySelector("img");
imgDiv?.appendChild(img);

3. 因此从中获取到的灵感是我们可以拿到这个URL
   
4. 既然我们拿到了这个转换后的 URL ，那么就可以实现动态的 URL

/**
 * 获取图片渲染
 */
function getImgDownload(data: string) {
    
    
  const tempData = {
    
    
    fileName: data,
  };
  getImgDownloadApi(tempData).then((res) => {
    
    
    if (res) {
    
    
      const img = document.createElement("img");
      let url = window.URL.createObjectURL(res);
      img.src = url;
      console.log(1001, img);
      viewer.value.entities.add({
    
    
        rectangle: {
    
    
          coordinates: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
          material: new Cesium.ImageMaterialProperty({
    
    
            image: url,
          }),
        },
      });
      ElMessage.success("加载完成");
    }
  });
}