自定义leaflet heatmap.js渲染矩形热力图时矩形间隙如何解决

矩形间隙本质是Canvas亚像素渲染、浮点坐标对齐偏差导致的，以下方案可在不产生混合色的前提下彻底消除间隙：

• 方案1：整数坐标强制对齐（无任何重叠风险，优先使用）
  Canvas渲染带浮点坐标的图形时，会自动触发亚像素抗锯齿，即使手动关闭抗锯齿开关也会残留半透明缝隙。绘制矩形时将x、y坐标、宽高全部取整，同步关闭画布平滑，从根源避免亚像素间隙：

  const ctx = canvas.getContext('2d');
  // 全局关闭画布抗锯齿
  ctx.imageSmoothingEnabled = false;
  // 绘制时所有参数强制取整
  ctx.fillRect(
    Math.round(rectX),
    Math.round(rectY),
    Math.round(rectWidth),
    Math.round(rectHeight)
  );
  

  该方案不会产生任何矩形重叠，完全不会出现混合色问题，适配绝大多数缩放场景。
• 方案2：亚像素扩展+权重截断（适配极端缩放场景）
  如果整数对齐后在特定地图缩放等级下仍存在细缝隙，可以给每个矩形加0.5px的亚像素扩展覆盖缝隙，同时调整heatmap.js的渲染逻辑避免混色：
  1. 保留heatmap.js原生的离屏权重层渲染逻辑，不要直接在最终彩色层绘制矩形
  2. 权重层绘制矩形时，给四边各扩展0.5px，刚好覆盖亚像素缝隙，不会产生整数级的大面积重叠
  3. 颜色映射前对权重层做像素截断，把重叠区域叠加的多余alpha值切掉，避免权重过高产生混色
     关键代码示例：

  // 离屏权重层初始化
  const offscreen = document.createElement('canvas');
  const weightCtx = offscreen.getContext('2d', { willReadFrequently: true });
  weightCtx.fillStyle = `rgba(0,0,0, ${weightAlpha})`;
  // 绘制时扩展0.5px覆盖亚像素间隙
  weightCtx.fillRect(
    rectX - 0.5,
    rectY - 0.5,
    rectWidth + 1,
    rectHeight + 1
  );
  // 颜色映射前做权重截断
  const imgData = weightCtx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imgData.data;
  for (let i = 3; i < pixels.length; i += 4) {
    // 单像素最大权重不超过单个矩形的最大alpha值，截断叠加值
    pixels[i] = Math.min(pixels[i], singleRectMaxAlpha);
  }
  // 后续执行原有色阶映射逻辑即可
  

避坑提示：不要给矩形设置大于1px的偏移重叠，也不要直接在彩色绘制层叠矩形，否则必然出现颜色叠加混色的问题。

内容的提问来源于stack exchange，提问作者Chuong Lac