canvas 绘制广告牌

前言

熟悉cesium 的知道，框架提供的label配置就那么多，在真实的项目中这些样式并不能满足ui需求。那么我们就需要自定义或者画布绘制billboard来实现,本文介绍的是画布绘制方法。

label: {
    text: '显示的标注文字',
    font: '16px "微软雅黑", Arial, Helvetica, sans-serif, Helvetica',
    fillColor: Cesium.Color.WHITE,//文字的填充颜色
    outlineColor: Cesium.Color.BLACK,//文字的描边
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,//设置描边的风格，上面的参数才会起效果
    outlineWidth: 4.0,
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    showBackground: true,//显示背景颜色	
    backgroundColor:Cesium.Color.fromCssColorString('#24a4fe').withAlpha(0.6),
	scaleByDistance: new Cesium.NearFarScalar(1.0e2, 1, 1.0e3, 0.2),//随着距离改变标注尺寸
	pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.0e2, 1.0, 1.0e3, 0.2), //随着距离改变偏移量
},

---

一、canvasLabel是什么？

封装canvasLabel类，接受三个参数，viewer，position，option（text本文，color文本颜色），原理是，通过canvas画布提供的内置方法toDataUrl，canvas.toDataURL(“image/png”);转成图片，供billboard使用。canvas具体用法请查阅相关文档

export default class CanvasLabel {
  constructor(viewer, position,option) {
    this.viewer = viewer
    this.position = position
    this.image = require('./xxx.png')
    this.height = 50
    this.width = 120
    this.text = option.text
    this.color = option.color
    this.loadBillboard()
  }
  canvasImage(fun) {
    let canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
    let context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
    let bgImg = new Image();
    bgImg.src = this.image; // 背景图的url
    bgImg.crossOrigin = "Anonymous";
    bgImg.onload = () => {
      context.drawImage(bgImg, 0, 0,this.width,this.height);
      context.lineWidth = 1; //线宽
      context.strokeStyle = 'black'; //描边颜色
      context.font = '20px 宋体'
      context.fillStyle = this.color //文本填充颜色
      context.textAlign = "center"; //文本居中
      context.textBaseline = "middle";
      const xPos = canvas.width / 2; // 计算文本左边距
      const yPos = canvas.height / 2; // 计算文本基线位置
      context.fillText(this.text, xPos, yPos); //文字填充
      let base64 = canvas.toDataURL("image/png");
      if (fun) fun(base64);
    };
  }
  loadBillboard() {
    this.canvasImage((newImg) => {
    this.a = this.viewer.entities.add({
        position: this.position, //此处为广告牌的笛卡尔坐标
        billboard: {
            image: newImg, // 此处为广告牌图标
            scaleByDistance: new Cesium.NearFarScalar(1200, 1, 5200, 0.4), //设置随图缩放距离和比例
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000), //设置可见距离 10000米可见
            pixelOffset: new Cesium.Cartesian2(0,5),
            disableDepthTestDistance: 5000,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            disableDepthTestDistance: Number.POSITIVE_INFINITY, // 不进行遮挡检测
            show: true,
        }
      });
    })
  }
  remove() {
    this.viewer.entities.remove(this.a);
  }
}

billboard配置顺便贴一下

billboard: {
	id：id //获取或设置拾取广告牌时返回的用户定义对象
    image: ‘xxxx, // 此处为广告牌图标
    scale:1 //获取或设置与广告牌图像大小相乘的统一比例（以像素为单位）。 1.0 的比例不会改变广告牌的大小；大于 1.0 的比例会放大广告牌；小于 1.0 的正比例会缩小广告牌。
    scaleByDistance: new Cesium.NearFarScalar(1200, 1, 5200, 0.4), //设置随图缩放距离和比例
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000), //设置可见距离 10000米可见
    pixelOffset: new Cesium.Cartesian2(0,5), //获取或设置屏幕空间中相对于该广告牌原点的像素偏移量。这通常用于在同一位置对齐多个广告牌和标签，例如图像和文本。屏幕空间原点是画布的左上角； x 从左到右增加， y 从上到下增加。
    disableDepthTestDistance: 5000, //获取或设置与相机的距离，在该距离处禁用深度测试，例如，防止对地形进行裁剪。当设置为零时，始终应用深度测试。当设置为 Number.POSITIVE_INFINITY 时，永远不会应用深度测试。
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //获取或设置此广告牌的水平原点，确定广告牌是在其锚点位置的左侧、中心还是右侧。
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
   	rotation:60 //获取或设置以弧度为单位的旋转角度。
    show: true,
}

二、使用步骤

1.初始化

 let position2 = {x: -1573676.5756299559, y: 5327855.33868422, z: 3123014.496239442}
 let p2 = new CanvasLabel(viewer,position2,{
   text:"温度:10℃",
   color:'#34E073'
 });

2.删除实体

 p2,remove()

三.效果展示

总结

例如：自定义label也是项目中经常用到的功能，，主要涉及canvas的语法知识 ，有其他的想法的可以私信沟通，下文会介绍通过html 自定义label。这是更为常见的一种方式。