前言

在地图、大屏、无人机调度、任务管理这类项目里我们经常需要展示各种点位图标。

如果只是普通点位，直接使用一张 PNG 就够了：

billboard: { image: "/marker.png"}

但真实业务里点位图标往往不是这么简单。

使用者痛点：单纯的 PNG 无法满足业务对视觉层级、状态指示和交互反馈的需求。

比如产品希望地图上的事件点位长这样：

外层是蓝色圆角背景，中间展示一张业务图片。底部有一个小箭头指向真实坐标，图片加载失败时使用默认图

这个图标已经不是一张普通图片，而是一个小型 UI 组件。不过，

如果在普通页面中。可以用 HTML + CSS 写：

但在 Cesium 这类地图场景里点位通常不是普通 DOM，而是地图引擎渲染的对象。

以 Cesium 为例，点位图标一般通过 Billboard 展示：

viewer.entities.add({
position。billboard: {
image,width,height,},});不过，

这里的 image 更适合接收一张图片、一个 Canvas、一个 dataURL。而不是一段 HTML，

这篇文章只解决一个主要问题：

如何把一张普通图片，处理成带圆角背景、边框、箭头的自定义 UI 图标？

注意。这篇文章只讲单张图片的处理流程，不展开多张图片批量渲染、缓存、并发调整。怎么说呢，那些可以作为下一篇继续讲。

最终效果

我们希望把一张普通图片：

event.png

加工成这种结构：

• 圆角背景
• 内部业务图片
• 底部箭头
• 加载失败兜底默认图

处理后的图标可以直接作为 Cesium Billboard 的图片使用：

billboard: {
至于image。markerIcon.image,width: markerIcon.width,height: markerIcon.height,}

为什么不用 DOM

If you're building a regular web page,using DOM + CSS is most comfortable way.

使用者痛点：D​OM 元素在 WebGL 场景中会产生额外的渲染开销，而且难以保证与地图引擎的对齐精度。其实，

The point icons in Cesium are rendered by engine itself. We prefer to give engine a ready‑made image rar than let it cooperate with an overlaying DOM element.

The solution is to:

Canvas 绘制复杂 UI → 导出为图片 → 提供给地图引擎渲染

Canvas 的优势

• 可以用代码绘制圆角、箭头等形状；
• 绘制完成后得到的是一张纯粹的 PNG，直接交给 Cesium 使用；
• 无需考虑 DOM 与 WebGL 的层级冲突。怎么说呢，

整体实现思路

• . 加载原始图片；
• . 创建 Canvas；
\
• . 计算图标尺寸；
\
• . 绘制圆角背景；
\
• . 绘制底部箭头；
\
• . 绘制内部业务图片；怎么说呢，
\
• . 导出结果为 dataURL。
\

代码结构概览

async function createMarkerIcon {
const img = await loadImage;const canvas = document.createElement;const ctx = canvas.getContext;按理说，// 绘制背景
// 绘制箭头
// 绘制内部图片
return {
再看image。canvas.toDataURL,width: canvas.width,height: canvas.height,};}

第一步先这方面，加载图片

使用者痛点：: 图片跨域或加载失败会导致后续 Canvas 绘制出错。

function loadImage {
return new Promise => {
const img = new Image;
怎么说呢，img.crossOrigin = "anonymous";// 防止跨域污染
img.onload = => resolve;img.onerror = reject;
img.src = src;
})，}

接下来这方面。准备 Canvas 尺寸

使用者痛点：KPI 要求图标尺寸保持统一，否则在大屏上会出现错位或模糊。老实说，

// 假设宽度固定为 width
const markerWidth = options.width || 80;// 高度
const aspectRatio = img.width / img.height;const imageHeight = markerWidth / aspectRatio;// 内边距和箭头高度一样可配置
const padding = options.padding || 6;const arrowHeight = options.arrowHeight || 12;// 最终 Canvas 大小
const canvasWidth = markerWidth + padding * 2;const canvasHeight = imageHeight + padding * 2 + arrowHeight;// 创建离线 Canvas
const canvas = document.createElement;其实，canvas.width = canvasWidth;canvas.height = canvasHeight;const ctx = canvas.getContext;

：绘制圆角背景

// 圆角矩形工具函数
function drawRoundRect {
const r = Math.min;ctx.beginPath;ctx.moveTo，ctx.lineTo;ctx.quadraticCurveTo;ctx.lineTo，ctx.quadraticCurveTo(x + width。y + height,x + width - r,y + height);ctx.lineTo，话说回来，ctx.quadraticCurveTo(x。y + height,x,y + height - r);ctx.lineTo，ctx.quadraticCurveTo(x,y,x + r,y);ctx.closePath;}
// 背景颜色和边框宽度可配置
ctx.fillStyle = options.background || "#1D90FA";说起来，ctx.strokeStyle = options.borderColor || "#1D90FA";ctx.lineWidth = options.borderWidth || 0;// 实际绘制
drawRoundRect(
ctx,padding - ctx.lineWidth / 2,padding - ctx.lineWidth / 2。markerWidth + ctx.lineWidth,imageHeight + ctx.lineWidth,options.radius || 8
);ctx.fill，if ctx.stroke;

---

---

---

---

---

---

---