有時我們會在同一個座標點疊加兩個圖片，但是Cesium中沒有z-index的概念，因為cesium中是利用深度來區分先後的，所以這兩個圖片的層級關係我們控制不了，會出現一個圖片被另一個遮擋的情況。

針對這種情況，我採用了canvas將兩個圖片合併成了一個，然後新增這新的圖片到地圖上即可。注意下，這個合併圖片的過程是非同步的，所以有些操作要在回撥裡寫。一下晒出程式碼及效果：

合併後如下：

程式碼如下：

// 合併圖片
drawAndShareImage(bgsrc, src, fun) {
      let canvas = document.createElement("canvas");
      canvas.width = 80;
      canvas.height = 178;
      let context = canvas.getContext("2d");
      context.rect(0, 0, canvas.width, canvas.height);
      let bgImg = new Image();
      bgImg.src = bgsrc; // 背景圖的url
      bgImg.crossOrigin = "Anonymous";
      bgImg.onload = () => {
        context.drawImage(bgImg, 0, 0, 80, 178);
        let img = new Image();
        img.src = src; // 需要合進去的圖片url
        img.crossOrigin = "Anonymous";
        img.onload = () => {
          context.drawImage(img, 16, 12, 48, 48);
          let base64 = canvas.toDataURL("image/png");
          if (fun) fun(base64);
        };
      };
    },
 

本地呼叫如下：

本文轉自 https://blog.csdn.net/caozl1132/article/details/124242614，如有侵權，請聯絡刪除。