export function createRect(ctx, opts = {}) {
  // 圓角矩形的參數(shù)
  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);

  // 關(guān)閉路徑并填充
  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"; // 設(shè)置字體樣式和大小
  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,
  });
}