Включение CORS в OpenLayers

Можно ли включить перекрестное совместное использование ресурсов (CORS) в OpenLayers? Если так, то как?

У меня есть веб-карта в OpenLayers, и я использую холст HTML, чтобы отобразить его как изображение PNG. Мой сценарий работает отлично, но из-за политики браузера того же происхождения я могу конвертировать холст в изображение только в том случае, если все фрагменты карты, которые я нарисовал, принадлежат одному и тому же хосту (например sub.domain.com).

Для того, чтобы увеличить скорость загрузки моей карты, я тянуть плитки из массива подобласти: a.domain.com, b.domain.comи т.д. Это значительно повышает производительность, работая вокруг предела браузера четырех одновременных соединений с одного хоста, но мешает мне когда - либо преобразование моего холста к изображению, а плитки приходят от нескольких хостов.

Я пытаюсь использовать CORS, чтобы обойти эту проблему. Я установил соответствующий Access-Control-Allow-Originзаголовок ответа для набора плиток, который я использую с PHP, но это не дает никакого эффекта. Я подозреваю, что это связано с отсутствием Originзаголовка в запросе (как показано в примере на странице Wiki). Казалось бы, требуется некоторая конфигурация OpenLayers. Но что? Кто-нибудь еще сделал это успешно?

После долгих поисков в исходном коде OpenLayers я нашел это! Проблема заключалась не в отсутствующем заголовке запроса, а в отсутствующем атрибуте imgэлементов, составляющих слой, в частности crossorigin. См MDN для деталей этого атрибута, а также документации для слоев OpenStreetMap для того, как использовать его с OpenLayers ( Update: Вот немного больше официальной документации в более разумном месте).

Чтобы ваши OpenLayers imgимели этот элемент, установите crossOriginKeywordпараметр в tileOptionsзначении в параметрах слоя:

tileOptions: {crossOriginKeyword: 'anonymous'}

Вы можете установить его на:

• "anonymous"- Сделайте « простой » запрос CORS.
• "use-credentials"- Сделайте « проверенный » запрос CORS с куки-файлами и HTTP-аутентификацией, как требуется.
• null- Не включайте crossoriginатрибут и, следовательно, не используйте CORS. По умолчанию для большинства классов OpenLayers Layer и источник моих проблем.

И наконец, для полноты, вот упрощенный пример того, как использовать его со слоем WMS. Работа с другими классами слоев аналогична.

var layer = new OpenLayers.Layer.WMS('My Layer', 'http://my.server.com', {
    format: 'image/png',
    layers: 'my:layer'
}, {
    tileOptions: {crossOriginKeyword: 'anonymous'},
    transitionEffect: null
});

Я надеюсь, что это помогает кому-то еще!

Примечание: кажется, что если вы используете этот метод / атрибут, ваш сервер плиток должен отправить соответствующий Access-Control-Allow-Originзаголовок. Использование его с сервером, который не отправляет этот заголовок, приводит к тому, что плитки не отображаются. Теперь, чтобы GeoServer подыгрывал ...

сразу после

var layer =new OpenLayers.Layer.WMS(...

добавлять

layer.tileOptions.crossOriginKeyword = null;