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

我在使用OpenLayers库加载图像时遇到问题。我正在尝试加载动态存储在设备上的图像。如果我手动声明选项，一切都会按预期工作。如果我尝试使用

file://...

我发现以下错误：

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

为了解决这个错误，我使用了路径转换器：

window.Ionic.WebView.convertFileSrc（）

但这给了我另一个错误，现在与CORS有关，考虑到访问方法现在使用HTTP GET，这一点我非常不理解，因为我尝试加载本地映像而不是远程映像：

CORS策略已阻止从源“”访问“”处的映像：请求的资源上不存在“访问控制允许源”标头。 获取网络：：ERR_失败

如果我将该文件包括在assets文件夹中并尝试上载它，一切都会按预期进行，但这不是我希望它的工作方式

---

工作代码（手动配置）：

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

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

不工作代码（在for循环内进行数字配置）：

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

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进行调试造成的，但如果我不使用它，同样的问题也会发生。

您可以使用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);

---

您可以使用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);

---

根据@Mike comment，如果我从

Static

中删除

crossOrigin:“

选项，问题就解决了

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

---

根据@Mike comment，如果我从

Static

中删除

crossOrigin:“

选项，问题就解决了

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

---

您需要访问画布数据吗？如果污染的画布不是问题，您可以删除

crossOrigin:“，

好的，这就解决了问题。我最终把注意力放在了其他事情上，而忽略了这个选择。我发誓，在问这个问题之前，我心里想：在这个问题上，会不会是迈克再次启发我？再次非常感谢您！您需要访问画布数据吗？如果污染的画布不是问题，您可以删除

crossOrigin:“，

好的，这就解决了问题。我最终把注意力放在了其他事情上，而忽略了这个选择。我发誓，在问这个问题之前，我心里想：在这个问题上，会不会是迈克再次启发我？再次非常感谢您！谢谢你的回答，但是在问题评论中你可以看到@Mike已经发现了这个问题。基本上，问题的出现是因为

交叉源

选项。感谢您的回答，但在问题注释中，您可以看到@Mike已经发现了问题。基本上，问题的出现是因为

交叉源

选项。