Cesium label设置圆角

在 Cesium 中，`Label` 本身并不直接支持设置圆角背景样式。要实现标签的圆角样式效果，通常需要通过结合 `Canvas` 或 `billboard` 自定义绘制带有圆角背景的标签。 以下是一个使用 `Canvas` 绘制带有圆角背景并将其作为 `billboard` 图像添加到标签中的示例方法： ```javascript // 创建一个带圆角背景的 canvas 元素 function createRoundedLabelCanvas(text, bgColor) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = 160; canvas.height = 40; // 绘制圆角矩形背景 const radius = 10; // 圆角半径 ctx.beginPath(); ctx.moveTo(radius, 0); ctx.lineTo(canvas.width - radius, 0); ctx.quadraticCurveTo(canvas.width, 0, canvas.width, radius); ctx.lineTo(canvas.width, canvas.height - radius); ctx.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height); ctx.lineTo(radius, canvas.height); ctx.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius); ctx.lineTo(0, radius); ctx.quadraticCurveTo(0, 0, radius, 0); ctx.closePath(); ctx.fillStyle = bgColor; ctx.fill(); // 绘制文本 ctx.fillStyle = '#ffffff'; ctx.font = '16px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2); return canvas; } // 将 canvas 转换为 base64 数据 URL function canvasToDataUrl(canvas) { return canvas.toDataURL(); } // 添加实体并设置带有圆角背景的标签 const viewer = new Cesium.Viewer('cesiumContainer'); const labelCanvas = createRoundedLabelCanvas('区域A', 'rgba(38, 139, 210, 0.8)'); const labelImageUrl = canvasToDataUrl(labelCanvas); viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), billboard: { image: labelImageUrl, width: 160, height: 40, pixelOffset: new Cesium.Cartesian2(0, -30) } }); ``` ### 实现说明： 1. **创建 Canvas**：首先创建一个 `canvas` 元素，并在其上绘制一个具有圆角的矩形作为背景。 2. **绘制文本**：在圆角矩形中心绘制文本内容。 3. **转换为图像**：将 `canvas` 转换为数据 URL 格式，以便用作 `billboard.image` 属性值。 4. **添加 Entity**：通过 `Entity` 的 `billboard` 属性将自定义的圆角背景图像显示在地图上 [^4]。 此方法利用了 HTML5 Canvas API 来实现复杂的图形绘制，并借助 Cesium 提供的 `billboard` 支持来展示定制化的标签样式。