Openlayers 3 Remplacer un carreau défectueux

Question

Nous utilisons Open Layers 3.15. Parfois, nous obtenons une tuile abandonnée ou échouée. Actuellement, il n'affiche rien (ce qui peut être déroutant pour nos utilisateurs), nous aimerions donc remplacer cela par un carreau qui dit «pas de données» ou quelque chose comme ça. J'ai essayé ramasser l'événement et le remplacement de la source de la tuile par exemple

  source.on('tileloaderror', function(){ 
       source.setUrl('./images/map/failureTile.png'); 
      }); 

mais le problème est, au lieu de le faire sur 1 tuile, il le fait pour toute la couche, nous n » Je veux ça. Quelqu'un sait-il comment nous pouvons faire cela pour seulement la tuile qui a échoué et pas la couche entière?

Answer 1

Une vignette qui a échoué à charger doit avoir une classe distincte (.olImageLoadError). Vous pouvez définir une règle CSS ne pas afficher ces éléments.

.olImageLoadError { 
    display: none !important; 
} 

Answer 2

Vous pouvez essayer ceci:

source.on('tileloaderror', function(event) { 
    event.tile.getImage().src = './images/map/failureTile.png'; 
}); 

Vous devez le paramètre event, que pouvez-vous obtenir la tuile qui a échoué, de sorte que vous pouvez changer l'image de la tuile.

Avertissement: J'ai testé le code ci-dessus en utilisant tileloadend au lieu de tileloaderror, car mes tuiles ne tombent jamais sur moi. :) J'ai utilisé un taux d'échec simulé en utilisant Math.random() et certaines tuiles aléatoires ont été remplacées par l'image spécifiée. Je ne peux pas penser à une raison pour laquelle le code ci-dessus ne fonctionnerait pas. Si vous vérifiez que cela fonctionne, je vais supprimer cet avertissement de ma réponse. Je l'ai testé sur OpenLayers 3.14.2 et sur une source OSM.