canvas cesium marker

export function createRect(ctx, opts = {}) {
  // 圆角矩形的参数
  var x = 2; // 左上角x坐标
  var y = 2; // 左上角y坐标
  var width = opts.width; // 宽度
  var height = opts.height; // 高度
  var radius =opts.height / 2; // 圆角半径

  // 开始路径
  ctx.beginPath();

  // 左上角圆弧
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + height, radius);

  // 右上角圆弧
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x, y + height, radius);

  // 右下角圆弧
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y, radius);

  // 左下角圆弧
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);

  // 关闭路径并填充
  ctx.closePath();
  ctx.fillStyle = opts.backgroundColor || "#c88400";
  ctx.fill();

  // 如果需要描边，可以添加以下代码
  ctx.strokeStyle = opts.borderColor || "#7c4b00";
  ctx.lineWidth = opts.borderWidth || 1;
  ctx.stroke();
}

export function createText(ctx, opts = {}) {
  var text = opts.text;
  var textSize = opts.textSize || 12;
  var color = opts.color || "#fff";
  var x = opts.x || 0;
  var y = opts.y || 0;
  ctx.font = textSize + "px Arial"; // 设置字体样式和大小
  ctx.fillStyle = color; // 文本颜色
  ctx.fillText(text, x, y);
}

export function createImage(text) {
  var ramp = document.createElement("canvas");
  var ctx = ramp.getContext("2d");
  var textSize = 15;
  var textWidth = text.length * textSize;
  var padding = 10;
  var width = textWidth + padding * 2;
  var height = 32;
  var textX = width / 2 - textWidth / 2;
  var textY = height / 2 + textSize / 3;
  createRect(ctx, { width, height, borderWidth: 2, borderColor: "#7c4b00", backgroundColor: "#c88400" });
  createText(ctx, { text, textSize, color: "#fff", x: textX, y: textY });
  return ramp;
}

export function addMarker(viewer, options = {}) {
  var name = options.name || "Marker";
  var longitude = options.longitude || 121.444409;
  var latitude = options.latitude || 31.247417;
  var height = options.height || 0;
  var image = createImage(name);
  viewer.entities.add({
    name: name,
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
    billboard: {
      image,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    },
    properties: options,
  });
}