如何将Openlayer6中Heatmap.js的渲染元素从圆形修改为方形

开发者阿泽

2026-9-28

OpenLayers 6 修改Heatmap.js热力点为方形的实现方案

核心原理

Heatmap.js默认使用径向圆形渐变绘制每个热力点，仅需替换原有圆形绘制逻辑为方形绘制，无需改动核心计算逻辑即可实现效果。

方案1：使用OpenLayers 6内置Heatmap图层（推荐）

OpenLayers 6的内置Heatmap图层已经封装了heatmap.js的能力，仅需调整配置即可快速实现方形热力点：

// 初始化热力图层
const heatLayer = new ol.layer.Heatmap({
  source: new ol.source.Vector({
    features: yourHeatFeatures // 替换为你自己的热力点要素集合
  }),
  radius: 12, // 方形边长的1/2，和原有圆形半径参数通用
  blur: 0, // 关闭边缘羽化模糊，去掉圆形的渐变过渡效果
  gradient: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] // 自定义热力配色
});

如果调整后仍然出现圆形热力点，说明你使用的OpenLayers版本硬编码了圆形绘制逻辑，直接重写热力图层原型中的点绘制方法，将arc()圆形绘制替换为fillRect()方形绘制即可，参数和原有逻辑保持一致。

方案2：项目单独引入原生Heatmap.js使用

如果你没有使用OpenLayers内置的Heatmap图层，而是自行集成heatmap.js叠加在地图上，直接在初始化时覆盖默认的点渲染方法：

const heatmapInstance = h337.create({
  container: document.querySelector('#heatmap-container'), // 你的热力图容器
  radius: 12,
  maxOpacity: 0.8,
  // 覆盖默认圆形绘制逻辑
  renderer: {
    drawPoint: function (x, y, radius, value, ctx) {
      ctx.fillStyle = `rgba(0, 0, 0, ${value})`;
      // 绘制方形，x y是方形中心坐标
      ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
    }
  }
});