如何在OpenLayers中按指定经纬度范围加载KMZ热力图

我有一个Base64编码的KMZ文件（对应变量washb64），内部包含华盛顿特区的热力图数据，完整的washb64取值可在我的代码示例中获取。由于OpenLayers支持KML但不支持GroundOverlay，我尝试通过OpenLayers的Image Layer配合自定义投影来定位静态图片，但代码无法正常运行。

提取自KML文件的经纬度范围 #

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Folder>
    <GroundOverlay>
      <Icon>
        <href>wash-dc.png</href>
      </Icon>
      <LatLonBox>
        <north>38.9098677066083098</north>
        <south>38.8880492619716591</south>
        <east>-77.0492054375858260</east>
        <west>-77.0124290658545902</west>
        <rotation>0</rotation>
      </LatLonBox>
    </GroundOverlay>
  </Folder>
</kml>

预期显示效果 #

最终需实现与谷歌地球加载该KMZ文件一致的显示效果：

我的代码 #

JavaScript代码

const washb64 = ''

const north = 38.9098629826801456;
const south = 38.8880073821501711;
const east = -77.0497762322933539;
const west = -77.0120905091252439;

async function loadHeatmapData() {
  const zipFile = new JSZip();

  await zipFile.loadAsync(washb64, { base64: true });

  const imageFile = zipFile.file("wash-dc.png");
  const data = await imageFile.async("arraybuffer");
  const url = URL.createObjectURL(new Blob([data]));

  const projection = new ol.proj.Projection({
    code: "heatmap",
    units: "degrees",
    extent: [west, south, east, north]
  });

  const imageLayer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
      attributions: "wash dc",
      url: url,
      projection: projection,
      imageExtent: [0, 0, 1024, 1024]
    })
  });

  const map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      imageLayer
    ],
    view: new ol.View({
      projection: "EPSG:4326",
      center: [-77.05, 38.9],
      zoom: 15
    })
  });
}

loadHeatmapData();

CSS代码

#map {
  height: 512px;
  width: 1024px;
}

HTML代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<div id="map"></div>

内容的提问来源于stack exchange，提问作者Eric G