使用 OpenLayers 的圖像訪問權限問題

Question

我在使用 OpenLayers 庫加載圖像時遇到問題。 我正在嘗試加載動態存儲在設備上的圖像。 如果我手動聲明選項，一切都會按預期工作。 如果我嘗試使用file://...通過路徑加載圖像file://...我收到以下錯誤：

不允許加載本地資源：file:///storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png

為了解決這個錯誤，我使用了Ionic Web 視圖路徑轉換器： window.Ionic.WebView.convertFileSrc() 。

但這給了我另一個錯誤，現在與 CORS 相關，考慮到訪問方法現在使用 HTTP GET，我很不明白，因為我試圖加載本地圖像而不是遠程圖像：

從源' http://localhost訪問' http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png '上的圖像： 8100 ' 已被 CORS 策略阻止：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 獲取http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png net::ERR_FAILED

如果我將文件包含在資產文件夾中並嘗試上傳它，一切都會按預期工作，但這不是我想要的工作方式。

---

工作代碼（手動配置）：

let layerImage = new ImageLayer({
    source: new Static({
        url: 'assets/layers/volume.png',
        crossOrigin: '',
        projection: 'EPSG:31982',
        imageExtent: layerExtent
    }),
    name: "layerImage",
    visible: true,
});
this.map.addLayer(layerImage);

不工作的代碼（在 for 循環中動態配置）：

let filePath = this.win.Ionic.WebView.convertFileSrc(this.file.externalDataDirectory + 'projects/' + this.projectId + '/layers/' + filename);
let layerImage = new ImageLayer({
    source: new Static({
        url: filePath,
        crossOrigin: '',
        projection: 'EPSG:31982',
        imageExtent: layerExtent
    }),
    name: "layerImage",
    visible: true,
});
this.map.addLayer(layerImage);

我在一些相關的問題中看到這可能是由 Chrome 調試引起的，但如果我不使用它也會出現同樣的問題。

Answer 1

您可以將 url 參數用作函數，也許會有所幫助。

const convertFileSrc = this.win.Ionic.WebView.convertFileSrc;
let layerImage = new ImageLayer({
    source: new Static({
        url: (extent) => {
            return convertFileSrc(this.file.externalDataDirectory + 'projects/' + this.projectId + '/layers/' + filename);
        },
        crossOrigin: '',
        projection: 'EPSG:31982',
        imageExtent: layerExtent
    }),
    name: "layerImage",
    visible: true,
});
this.map.addLayer(layerImage);

Answer 2

根據@Mike 的評論，如果我從Static刪除crossOrigin: ''選項，問題就解決了。

let layerImage = new ImageLayer({
    source: new Static({
        url: filePath,
        projection: 'EPSG:31982',
        imageExtent: layerExtent
    }),
    name: "layerImage",
    visible: true,
});