Activation de CORS dans OpenLayers

Est-il possible d'activer le partage de ressources d'origine croisée (CORS) dans OpenLayers? Si c'est le cas, comment?

J'ai une carte Web dans OpenLayers et j'utilise un canevas HTML pour le rendre sous forme d'image PNG. Mon script fonctionne très bien, mais en raison de la politique d'origine du navigateur , je ne peux convertir mon canevas en image que si toutes les tuiles de carte que j'ai dessinées proviennent du même hôte (par exemple sub.domain.com).

Pour augmenter ma carte vitesse de chargement, je tire les tuiles d'un tableau de sous - domaines: a.domain.com, b.domain.com, etc. Cela améliore considérablement les performances, le travail autour de la limite du navigateur de quatre connexions simultanées par hôte, mais ne me permet pas de convertir jamais ma toile à une image, comme les tuiles proviennent de plusieurs hôtes.

J'essaie d'utiliser CORS pour contourner ce problème. J'ai défini l'en- Access-Control-Allow-Origintête de réponse approprié pour l'ensemble de tuiles que je sers avec PHP, mais cela n'a aucun effet. Je soupçonne que cela est dû au fait de ne pas avoir l'en- Origintête dans la demande (comme indiqué dans l'exemple sur la page Wiki). Il semblerait qu'une configuration OpenLayers soit requise. Mais quoi? Quelqu'un d'autre a-t-il réussi cela?

Après avoir beaucoup parcouru la source OpenLayers , je l'ai trouvée! Le problème n'était pas un en-tête de demande manquant, mais un attribut manquant sur les imgéléments qui composent la couche, en particulier crossorigin. Voir MDN pour les détails de cet attribut, et la documentation des couches OpenStreetMap pour savoir comment l'utiliser avec OpenLayers ( mise à jour: voici une documentation un peu plus officielle dans un endroit plus raisonnable).

Pour vous assurer que vos OpenLayers imgpossèdent cet élément, définissez l' crossOriginKeywordoption dans la tileOptionsvaleur de vos options de couche:

tileOptions: {crossOriginKeyword: 'anonymous'}

Vous pouvez le régler sur:

• "anonymous"- Faire une " simple " demande CORS.
• "use-credentials"- Faire une demande CORS " accréditée ", avec des cookies et une authentification HTTP selon les besoins.
• null- N'incluez pas l' crossoriginattribut et n'utilisez donc pas CORS. La valeur par défaut pour la plupart des classes OpenLayers Layer et la source de mes problèmes.

Enfin, pour être complet, voici un exemple simplifié de la façon de l'utiliser avec une couche WMS. L'utilisation d'autres classes de calques est similaire.

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

J'espère que ça aidera quelqu'un d'autre!

Remarque: Il semble que si vous utilisez cette méthode / cet attribut, votre serveur de tuiles doit envoyer un en- Access-Control-Allow-Origintête approprié . Si vous l'utilisez avec un serveur qui n'envoie pas cet en-tête, les vignettes ne s'afficheront pas. Maintenant, pour faire jouer GeoServer ...

juste après

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

ajouter

layer.tileOptions.crossOriginKeyword = null;