如何将此图像添加到以度数指定的范围延伸的地图中？

Question

我有一个 codepen https://codepen.io/ericg_off/pen/gOqmpEE

虽然我希望将此代码作为工作片段提供，但它超出了这些限制。 Washb64的值可以在codepen中找到。

washb64 是一个base64 编码的kmz 文件。其中的数据代表华盛顿特区的热图。我需要能够获取这些数据并将其显示在 OpenLayers 中。虽然 OpenLayers 确实支持 kml，但它不支持 GroundOverlay。我的想法是使用带有自定义投影的 OpenLayer 图像层，并将静态图像放置在正确的位置。但是，我的代码不起作用。

项目中使用的度数是从 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>

最终结果应与加载到 Google 地球时 kmz 文件的外观类似。

我确信代码有很多问题，但我不确定什么或如何修复它。

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();

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

<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>

Answer 1

投影应为 EPSG:4326，图像范围应以度为单位

  const imageLayer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
      attributions: "wash dc",
      url: url,
      projection: "EPSG:4326",
      imageExtent: [west, south, east, north]
    })
  });