Cesium结合Canvas画布创建Billboard

效果图

在Billboard中使用canvas 画布 ~思路

1、了解billboard实体中的image属性是 可以设置指定图像和纹理的
2、创建canvas画布标签
3、将图片作为背景，使用drawImage进行绘制
4、字体可以根据画布
5、使用Image方法转换画布内容及返回，赋值billboard实体中的image属性即可

实现方式如下：

①、使用原型链进行封装

var canvas = new canvasTopopups({
			width:300,
			height:140,
			font:"35px 楷体"
		});

②、创建画布

//图片对象
		this.style.imageUrl = obj.imageUrl==undefined?"./img/textures/textPnl.png":obj.imageUrl;
		this.style.width = obj.width==undefined?300:obj.width;
		this.style.height = obj.height==undefined?140:obj.height;
		this.style.font = obj.font==undefined?"55px 楷体":obj.font;
		this.style.text = "自定义文字";

		if (!this._canvas) {
			this._canvas = document.createElement("canvas");
			this._canvas.width = this.style.width;
			this._canvas.height = this.style.height;
		}

③、画布设置背景图和文字

        let ctx = canvas.getContext("2d");
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		//绘制图片
		ctx.drawImage(this._pngImage, 0, 0);

		//绘制文字
		ctx.fillStyle = "rgb(255, 255, 255)";
		ctx.font = this.style.font;
		ctx.textBaseline = "middle";
		ctx.textAlign="center"; 
		ctx.fillText(this.style.text, canvas.width/2, canvas.height / 2);

④、canvas转换为Image

        let newImg = new Image(canvas.width, canvas.height);
		newImg.src = canvas.toDataURL("image/png");

		//将图片赋予给矢量对象进行显示，this.image是父类的属性
		this.image = newImg;

⑤、创建billboard实体，并使用Image

        canvas.text = "绿色自定义图标"
		var entity = viewer.entities.add({
			name: "绿色自定义图标",
			position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 3),
			billboard: {
				image: canvas.image,
				scale: 1,
				pixelOffset: new Cesium.Cartesian2(0, -6), //偏移量 
				horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
				verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
				scaleByDistance: new Cesium.NearFarScalar(2000, 0.6, 12000, 0.2),
				distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
			}
		});

纹理图片

资源下载

根据以上思路无法正常使用的小伙伴，可参考以下资源
脚本资源下载