基本上熱區圖是換到對應的API即可使用ol.layer.Heatmap
以下是官網的範例，我只是抽出來我認為重要的部分，其他參數的調整或設定就依照專案需求調整控制即可。
https://openlayers.org/en/latest/examples/heatmap-earthquakes.html

JS

const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: "https://wmts.nlsc.gov.tw/wmts/EMAP5/default/EPSG:3857/{z}/{y}/{x}.png",
        crossOrigin: "anonymous",
        minZoom: 6,
        maxZoom: 20,
      }),
    }),
  ],
  target: "map",
  view: new ol.View({
    projection: "EPSG:3857",
    center: ol.proj.fromLonLat([120.846642, 23.488793]),
    zoom: 7.5,
    maxZoom: 20,
    minZoom: 5,
    enableRotation: false,
  }),
  controls: [],
});

// 設定layer Heatmap
const HeatmapLayer = new ol.layer.Heatmap({
  source: new ol.source.Vector({
    url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",
    format: new ol.format.KML({
      extractStyles: false,
    }),
  }),
  // 其中兩個參數是需要設定的，依照需求調整blur, radius
  blur: 10,
  radius: 10
});

map.addLayer(HeatmapLayer)

參考

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day14