使用 OpenLayers 的图像访问权限问题

Question

我在使用 OpenLayers 库加载图像时遇到问题。我正在尝试加载动态存储在设备上的图像。如果我手动声明选项，一切都会按预期工作。如果我尝试使用 file://... 通过路径加载图像，我会收到以下错误：

Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png

为了解决这个错误，我使用了 Ionic Web View 路径转换器：window.Ionic.WebView.convertFileSrc() .

但这给了我另一个错误，现在与 CORS 相关，考虑到访问方法现在使用 HTTP GET，我很不明白，因为我试图加载本地图像而不是远程图像：

Access to image at 'http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. GET 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,
});

使用 OpenLayers 的图像访问权限问题

Image access permission issue using OpenLayers

openlayers

cors

ionic-framework