使用 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,
});