Włączanie CORS w OpenLayers

Czy można włączyć udostępnianie zasobów między źródłami (CORS) w OpenLayers? Jeśli tak to jak?

Mam mapę internetową w OpenLayers i używam kanwy HTML do renderowania jej jako obrazu PNG. Mój skrypt działa świetnie, ale ze względu na zasady tego samego pochodzenia przeglądarki mogę przekonwertować płótno na obraz tylko wtedy, gdy wszystkie kafelki mapy, które narysowałem, pochodzą od tego samego hosta (np sub.domain.com.).

Aby zwiększyć szybkość ładowania moja mapa jest, ja ciągnąć płytek z tablicy subdomen: a.domain.com, b.domain.com, itd. To znacznie poprawia wydajność, pracując wokół granicy przeglądarki czterech jednoczesnych połączeń na hoście, ale powstrzymuje mnie od zawsze konwersji moje płótna na obrazie, jak płytki pochodzą od wielu hostów.

Próbuję użyć CORS do obejścia tego problemu. Access-Control-Allow-OriginUstawiłem odpowiedni nagłówek odpowiedzi dla zestawu klocków, który obsługuję z PHP, ale to nie ma efektu. Podejrzewam, że jest to spowodowane brakiem Originnagłówka w żądaniu (jak pokazano w przykładzie na stronie Wiki). Wydaje się, że wymagana jest pewna konfiguracja OpenLayers. Ale co? Czy ktoś jeszcze zrobił to pomyślnie?

Po wielu przeszukiwaniu źródła OpenLayers znalazłem go! Problemem nie był brakujący nagłówek żądania, ale brakujący atrybut imgelementów tworzących warstwę crossorigin. Zobacz MDN, aby uzyskać szczegółowe informacje na temat tego atrybutu, oraz dokumentację dla warstw OpenStreetMap, aby dowiedzieć się, jak go używać z OpenLayers ( aktualizacja: Oto nieco bardziej oficjalna dokumentacja w bardziej rozsądnym miejscu).

Aby upewnić się, że Twoje OpenLayers imgmają ten element, ustaw crossOriginKeywordopcję w tileOptionswartości w opcjach warstwy:

tileOptions: {crossOriginKeyword: 'anonymous'}

Możesz ustawić na:

• "anonymous"- Złóż „ proste ” żądanie CORS.
• "use-credentials"- Złóż „ poświadczone ” żądanie CORS, z wymaganymi plikami cookie i uwierzytelnianiem HTTP.
• null- Nie dołączaj crossoriginatrybutu, a zatem nie używaj CORS. Domyślne dla większości klas OpenLayers Layer i źródło moich problemów.

Wreszcie, dla kompletności, oto uproszczony przykład tego, jak używać go z warstwą WMS. Praca z innymi klasami warstw jest podobna.

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

Mam nadzieję, że to pomaga komuś innemu!

Uwaga: Wydaje się, że jeśli użyjesz tej metody / atrybutu, twój serwer kafelków jest zobowiązany do wysłania odpowiedniego Access-Control-Allow-Originnagłówka. Używanie go z serwerem, który nie wysyła tego nagłówka powoduje, że kafelki nie są wyświetlane. Teraz, aby GeoServer mógł grać razem ...

zaraz po

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

Dodaj

layer.tileOptions.crossOriginKeyword = null;