Проблема разрешения доступа к изображениям с использованием OpenLayers - PullRequest
Новая
       7

Проблема разрешения доступа к изображениям с использованием OpenLayers

1 голос
/ 08 января 2020

У меня проблема с загрузкой изображения с использованием библиотеки OpenLayers. Я пытаюсь загрузить изображение, которое хранится на устройстве динамически. Если я объявляю параметры вручную, все работает как положено. Если я пытаюсь загрузить изображение по пути, используя file://..., я получаю следующую ошибку:

Не разрешается загружать локальный ресурс: файл: /// storage / emulated / 0 / Android / data / io.ioni c .starter / files / projects / 1 / Layers / volume.png

Чтобы устранить эту ошибку, я использовал конвертер путей Ioni c Web View : window.Ionic.WebView.convertFileSrc().

Но это дает мне еще одну ошибку, теперь связанную с CORS, учитывая, что метод доступа теперь использует HTTP GET, чего я совершенно не понимаю, так как я пытаюсь загрузить локальное изображение, а не удаленный:

Доступ к изображению в 'http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png' из источника 'http://localhost: 8100 ' был заблокирован политикой CORS: В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». 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);

Не рабочий код (динамически сконфигурированный внутри a для l oop): 

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, но та же проблема возникает, если я не использую ее.

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Согласно комментарию @Mike, проблема решается, если я уберу опцию crossOrigin: '' из Static. 

let layerImage = new ImageLayer({
    source: new Static({
        url: filePath,
        projection: 'EPSG:31982',
        imageExtent: layerExtent
    }),
    name: "layerImage",
    visible: true,
});
0 голосов
/ 08 января 2020

Вы можете использовать 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);
...