Le tessere mappa non vengono mostrate (tutte in rosa) in Firefox utilizzando OpenLayers e il proprio server OSM

Question

Ho impostato il mio server OSM per fornire le tile della mappa da utilizzare in un'applicazione. Per l'applicazione utilizzo OpenLayers e ho riscontrato uno strano problema quando ho trasferito il codice da slippymap alla mia applicazione. Fondamentalmente uso lo stesso codice e per i tiles locali ho impostato l'url del mio server tile.

Il problema è che quando si passa al livello locale vedo solo il livello rosa della mappa, ma l'attributo src del tag immagine carica il riquadro effettivo. Ho provato con Firebug per rimuovere il livello rosa, ma dietro non c'è immagine lì! Copiando l'url dall'attributo src del tag img si apre la tessera come immagine.

Ho provato questo a Chrome e il livello locale funziona, anche in IE 7,8,9. Il problema è solo con FF e sospetto qualcosa con OpenLayers, ma non sono sicuro di cosa. Il livello Mapnik funziona e mostra le tessere su tutti i browser. Usando HTML5 a proposito.

Qualsiasi idea o suggerimento è apprezzato.

Answer 1

C'è un'altra soluzione che non richiede l'aggiunta di intestazioni CORS lato server. È necessario fornire un'opzione "tileOptions" al config livello, in questo modo:

var layer = new OpenLayers.Layer.OSM("layer name", [urls], { 
    "tileOptions": { 
     "crossOriginKeyword": null 
    } 
}); 

I OpenLayers Documenti per Layer.OSM e Tile.Image dite come fare questo, ma non c'è alcuna menzione del fatto che il valore predefinito può causare problemi in Firefox.

Answer 2

Hm, ho quasi indovinato. Era un'impostazione dell'intestazione di Apache che abilita la richiesta interdominio per le risorse fornite. Qui è più informazioni per i curiosi https://developer.mozilla.org/en/http_access_control

Questa è l'impostazione di intestazione, includerlo in < Directory>, < Posizione> o il file .htaccess e verificare che si è mod_headers abilitato.

Header set Access-Control-Allow-Origin *