cesium自定义label样式

最新推荐文章于 2026-04-27 21:41:50 发布

原创

最新推荐文章于 2026-04-27 21:41:50 发布 · 1.1w 阅读

标签

#javascript #开发语言 #ecmascript

收录于

本文介绍如何使用 Cesium 在 3D 场景中自定义显示车辆信息标签，通过 canvas 绘制美观的文本框，并利用 billboard 展示，解决 cesium 默认 label 样式限制的问题。

项目需求：车辆按照轨迹移动，模型上方要有文本框显示车辆信息，但是cesium自带的label设置样式有限，不美观，所以采取canvas生成图片，用billboard加载的方法实现。

cesium官网例子，label样式：

处理后样式，可修改字体，边距等数据

代码如下：

（1）封装的js

let showLabelFun = (dataMcInfo) => {
    var c = document.createElement("canvas");
    var settings = {
		canvas:c,
		canvasWidth:150, //canvas的宽度
        canvasHeight:65, //canvas的高度
		drawStartX:15, //绘制字符串起始x坐标 距离左侧
		drawStartY:28, //绘制字符串起始y坐标 距离顶部
		font:"12px 'Microsoft Yahei'", //文字样式
		text:"请修改掉默认的配置", //需要绘制的文本
		color:"#ffffff",//"#000000", //文字的颜色
		backgroundColor:"rgba(38, 38, 38, 0.75)"//"#ffffff"//背景颜色
	};