Abilitazione di CORS in OpenLayers

È possibile abilitare la condivisione delle risorse tra le origini (CORS) in OpenLayers? Se é cosi, come?

Ho una mappa web in OpenLayers e sto usando un canvas HTML per renderlo come immagine PNG. La mia sceneggiatura funziona alla grande, ma a causa della stessa politica del browser , posso convertire la mia tela in un'immagine solo se tutte le tessere della mappa che ho disegnato provengono dallo stesso host (ad es sub.domain.com.).

Per incrementare la mia carta velocità di caricamento, tiro piastrelle da un array di sottodomini: a.domain.com, b.domain.com, ecc Questo migliora notevolmente le prestazioni, lavorando attorno limite del browser di quattro connessioni simultanee per host, ma impedisce mi da sempre la conversione di mia tela a un'immagine, come le tessere provengono da più host.

Sto cercando di utilizzare CORS per aggirare questo problema. Ho impostato l' Access-Control-Allow-Originintestazione di risposta appropriata per il tileset che offro con PHP, ma questo non ha effetto. Sospetto che ciò sia dovuto al fatto di non avere l' Originintestazione nella richiesta (come mostrato nell'esempio nella pagina Wiki). Sembrerebbe che sia necessaria una configurazione OpenLayers. Ma cosa? Qualcun altro l'ha fatto con successo?

Dopo aver sfogliato molto la fonte OpenLayers , l'ho trovato! Il problema non era un'intestazione di richiesta mancante, ma un attributo mancante sugli imgelementi che compongono il layer, in particolare crossorigin. Vedi MDN per i dettagli di quell'attributo e la documentazione per i livelli OpenStreetMap su come usarlo con OpenLayers ( Aggiornamento: ecco un po 'più di documentazione ufficiale in un posto più ragionevole).

Per assicurarti che i tuoi OpenLayer imgabbiano quell'elemento, imposta l' crossOriginKeywordopzione nel tileOptionsvalore nelle opzioni del tuo livello:

tileOptions: {crossOriginKeyword: 'anonymous'}

Puoi impostarlo su:

• "anonymous"- Fai una richiesta " semplice " CORS.
• "use-credentials"- Effettuare una richiesta CORS "con credenziali ", con cookie e autenticazione HTTP come richiesto.
• null- Non includere l' crossoriginattributo e quindi non utilizzare CORS. L'impostazione predefinita per la maggior parte delle classi OpenLayers Layer e l'origine dei miei problemi.

Infine, per completezza, ecco un esempio ridotto di come usarlo con un livello WMS. Lavorare con altre classi di livelli è simile.

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

Spero che questo aiuti qualcun'altro!

Nota: se si utilizza questo metodo / attributo, è necessario che il proprio server tile invii Access-Control-Allow-Originun'intestazione appropriata . Usandolo con un server che non invia quell'intestazione, i riquadri non vengono visualizzati. Ora per far giocare GeoServer ...

subito dopo

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

Inserisci

layer.tileOptions.crossOriginKeyword = null;