cesium使用canvas自定義廣告牌標注


可用於cesium中添加個性化的標注,非常的好用~

// 創建二維畫布
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

...繪制所需圖案...

// 將畫布轉化成圖片
let image = new Image();
image.src = canvas.toDataURL("image/jpg")

// 使用cesium創建實體
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(params.tgySjJcxx.jcxxJd, params.tgySjJcxx.jcxxWd,78),
  name: 'roadLine',
  billboard: {
    // 圖像地址,URI或Canvas的屬性
    image: image,
    // 逆時針旋轉
    rotation: 0,
    // 大小是否以米為單位
    sizeInMeters: false,
    // 相對於坐標的垂直位置
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    // 相對於坐標的水平位置
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    // 該屬性指定標簽在屏幕空間中距此標簽原點的像素偏移量
    pixelOffset: new Cesium.Cartesian2(-50, 0),
    // 應用於圖像的統一比例。比例大於會1.0放大標簽,而比例小於會1.0縮小標簽。
    scale: 1,
    // 是否顯示
    show: true,
    zIndex: 11,
    eyeOffset: new Cesium.Cartesian3(0, 0, -10),//z設為負值,離眼睛更近,防止被其它標注物遮擋
    // scaleByDistance: new Cesium.NearFarScalar(40000, 1.5, 95568, 1) // 根據高度顯示對應的縮放比例大小
  }
});

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM