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