Leaflet: Possibilité de modifier les informations d'en-tête pour la demande de tuile ?

Créé le 11 oct. 2013  ·  13Commentaires  ·  Source: Leaflet/Leaflet

J'ai besoin d'accéder à des serveurs de tuiles qui nécessitent la transmission d'un jeton. Existe-t-il un moyen d'intercepter la demande de tuile afin que je puisse ajouter quelque chose à l'en-tête avant que la demande ne soit faite. C'est-à-dire que ce serait bien si je pouvais écouter une demande de pré-tuile, via un événement, jouer avec les en-têtes et envoyer la demande sur son chemin.

Commentaire le plus utile

@SunnyMittal J'ai utilisé un superagent pour ajax, remplacez-le au besoin.

L.TileLayer.WMS_Headers = L.TileLayer.WMS.extend({
  createTile(coords, done) {
    const url = this.getTileUrl(coords);
    const img = document.createElement('img');
    superagent
      .get(url)
      .set(‘header’, ‘header value’)
      .responseType('blob')
      .then((response) => {
        img.src = URL.createObjectURL(response.body);
        done(null, img);
      });
    return img;
  }
});

L.tileLayer.wms_headers = (url, options) => new L.TileLayer.WMS_Headers(url, options);

Tous les 13 commentaires

Hmm... Existe-t-il un moyen de le faire en HTML ? Je veux dire, comment chargeriez-vous une image avec des en-têtes personnalisés en général, sans parler de Leaflet ?

Bon point! En creusant plus profondément, je vois ce qui se passe. Et oui, vous avez raison, je ne pense pas qu'il existe un moyen de modifier les en-têtes à moins que vous ne fassiez une demande AJAX. La plupart des API permettent aux jetons d'accès d'être également transmis dans l'URL en tant que paramètre de requête. Je vais me pencher davantage là-dessus.

Si possible de passer en tant que paramètres dans mon cas, je pense que je peux simplement étendre TileLayer pour transmettre les informations de paramètre dont j'ai besoin. Je peux créer une extension qui ajoute essentiellement des paramètres de requête au TileLayer (TileLayerQueryParam ou quelque chose). Avez-vous rencontré des situations dans lesquelles TileLayer aurait besoin de transmettre des paramètres de requête ? L'extension IE est bien, mais je me demande si cela devrait faire partie de TileLayer.

Oui, l'ajout de paramètres de requête est beaucoup plus facile. :)

l'ajout en tant que paramètres de requête est correct, mais il expose le jeton dans l'URL de la requête. lors de la mise en œuvre d'un OAuth 2.0, la suggestion est d'écrire le jeton dans l'en-tête. Ce problème devrait être une nouvelle demande d'extraction.

Cette fonctionnalité serait idéale pour OAuth 2.0 pour ajouter l'en-tête d'autorisation.

@zhenyanghua @rrameshkumar76 comme mentionné ci-dessus, TileLayer n'est qu'une balise img , et à notre connaissance, il n'y a aucun moyen de définir des en-têtes personnalisés pour une balise d'image.

Cela dit, vous pouvez charger les tuiles comme vous le souhaitez (comme en utilisant AJAX) si vous étendez GridLayer . Il y a de très bons exemples sur la façon de faire des choses comme ça dans le tutoriel Extending Leaflet, New Layers .

Merci @perliedman pour la réponse et l'explication.
J'ai pu étendre L.TileLayer.WMS et remplacer la méthode createTile où j'ai effectué un appel ajax pour obtenir l'image de la tuile avec les en-têtes.

Salut Ramesh Kumar, est-il possible pour vous de partager la classe WMS étendue pour référence ?
Merci beaucoup

@SunnyMittal J'ai utilisé un superagent pour ajax, remplacez-le au besoin.

L.TileLayer.WMS_Headers = L.TileLayer.WMS.extend({
  createTile(coords, done) {
    const url = this.getTileUrl(coords);
    const img = document.createElement('img');
    superagent
      .get(url)
      .set(‘header’, ‘header value’)
      .responseType('blob')
      .then((response) => {
        img.src = URL.createObjectURL(response.body);
        done(null, img);
      });
    return img;
  }
});

L.tileLayer.wms_headers = (url, options) => new L.TileLayer.WMS_Headers(url, options);

@rrameshkumar76 merci ça

basé sur @rrameshkumar76 anwser, j'ai construit un plugin super simple.
J'espère que vous apprécierez.

Si quelqu'un veut ajouter des en- têtes à L.TileLayer au lieu de L.TileLayer.WMS , cela est possible par une modification simple @ de Ticinum-aérospatiale plug - L.TileLayer.WMS à L.TileLayer et renommez la nouvelle classe et la nouvelle fonction de manière appropriée.

J'ai modifié le plugin de @ticinum-aerospace pour L.TileLayer au lieu de L.TileLayer.WMS ici : https://github.com/jaq316/leaflet-header/blob/master/index.js

Cette page vous a été utile?
0 / 5 - 0 notes