使用 Vue.js 在 OpenLayers 中显示 geotiff 图像（组合 API）

Question

感谢您阅读我的问题！

我正在尝试显示来自网址的 geotiff 图像，如下例所示： OpenLayers 研讨会

但我希望它能够在 Vue.js 3 中使用组合 API 工作。 在我的代码示例中，显示了地图，但没有显示图像层。 没有错误消息。 看起来数据没有正确加载，或者仍然是一个承诺。

有人知道我的错误在哪里吗？

<script setup>
import { ref, onMounted } from "vue";
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import GeoTIFF from "ol/source/GeoTIFF";
import TileLayer from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import OSM from 'ol/source/OSM.js';
import WebGLTile from 'ol/layer/WebGLTile.js';

const map = ref(null);

const source = new GeoTIFF({
    sources: [
        {
            url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/32/U/NA/2022/9/S2B_32UNA_20220923_0_L2A/TCI.tif',
        },
    ],
});

const OSMlayer = new TileLayer({
    source: new OSM(),
});

async function addTileLayer() {
    const ImageLayer = new TileLayer({
        source: source,
    });
    map.value.addLayer(ImageLayer);
}

onMounted(async () => {
    map.value = new Map({
        target: "map",
        layers: [OSMlayer],
        view: new View({
            center: fromLonLat([9.93, 49.78]),
            zoom: 9,
        }),
    });
    await addTileLayer();
});
</script>

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

<style>
#map {
    height: 600px;
    margin: 0px;
    padding: 0px;
}
</style>

Answer 1

请您发布解决方案（代码）