当前位置：首页 > article >正文

cesium中label样式修改为圆角

article 2025/3/30 15:53:11

label自带的样式如下，无法对边框进行圆滑处理，但是使用canvas元素进行绘制缺轻而易举

修改之后效果如下所示：

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(x, y, z), // 航点位置
  billboard: {
    image: customLabel('自定义label'),
    pixelOffset: new Cesium.Cartesian2(0, -20) // 文字偏移量
  }
});
function customLabel(text) {
  // 创建一个canvas元素，用于绘制圆形背景和文字
  let canvas = document.createElement('canvas');
  // 使用 measureText 获取文本宽度
  let ctx = canvas.getContext('2d');
  let textWidth = ctx.measureText(text).width;
  // 根据文本宽度调整画布大小
  canvas.width = textWidth + 10; // 在文本长度之外加上一些额外的空间
  canvas.height = 30; // 设置一个合适的高度

  // 开始绘制圆形背景
  ctx.beginPath();
  ctx.roundRect(0, 0, canvas.width, canvas.height, 10); // 圆角半径为10像素
  ctx.fillStyle = '#268bd2'; // 设置填充颜色为半透明的蓝色
  ctx.fill(); // 使用fill方法填充圆形

  // 开始绘制文字
  ctx.font = '22px sans-serif';
  ctx.fillStyle = 'black'; // 设置文字颜色为黑色
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2 + 2); // 在中间位置绘制文字

  // 将绘制好的canvas内容转换为dataURL格式的图片
  return canvas.toDataURL();
}

代码解析

创建 Canvas 元素

我们首先创建了一个 Canvas 元素，并获取了其绘图上下文（context）。Canvas 是 HTML5 提供的一个绘图元素，允许我们在网页上绘制图形、图像和文字等内容。

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

获取文本宽度

为了确保画布的大小能够适应文本内容，我们使用了 measureText 方法来获取文本的宽度。这一步非常关键，因为它决定了画布的宽度是否足够容纳文字，并且能够根据文字长度动态调整画布大小，从而实现灵活的标签布局。

let textWidth = ctx.measureText(text).width;

调整画布大小

根据获取到的文本宽度，我们设置了画布的宽度和高度。宽度在文本宽度的基础上增加了 20 像素（左右各 10 像素），以确保文字周围有足够的空间。高度设置为 30 像素，可以根据实际需求进行调整。

canvas.width = textWidth + 20;
canvas.height = 30;

绘制圆形背景

使用 roundRect 方法绘制了一个圆角矩形作为背景。roundRect 方法的参数分别是左上角坐标（0, 0）、宽度（canvas.width）、高度（canvas.height）和圆角半径（15 像素）。通过设置 fillStyle 属性，我们可以指定背景的颜色和透明度。在这里，我们选择了一个半透明的蓝色背景，以便与地图元素更好地融合。

ctx.beginPath();
ctx.roundRect(0, 0, canvas.width, canvas.height, 15);
ctx.fillStyle = 'rgba(38, 139, 210, 0.8)';
ctx.fill();

绘制文字

接下来，我们设置了文字的字体、颜色、对齐方式等样式，并使用 fillText 方法在画布中间位置绘制文字。通过设置 textAlign 和 textBaseline 属性，我们确保了文字在画布中水平和垂直居中显示。

ctx.font = 'bold 16px sans-serif';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);