Leaflet: 可以更改磁贴请求的标头信息吗？

创建于 2013-10-11 · 13评论 · 资料来源: Leaflet/Leaflet

我需要访问需要传递令牌的磁贴服务器。有什么方法可以拦截 tile 请求，以便我可以在发出请求之前向标头添加一些内容。 IE 如果我可以通过事件侦听前平铺请求，弄乱标头并在途中发送请求，那就太好了。

资料来源

newmanw

最有用的评论

@SunnyMittal我为 ajax 使用了 superagent，根据需要替换它。

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 于 2017-05-19

👍9 🎉5

所有13条评论

嗯...有没有办法在 HTML 中做到这一点？我的意思是，您通常如何加载带有自定义标题的图像，而不是谈论 Leaflet？

mourner 于 2013-10-12

好点子！深入挖掘，我知道发生了什么。是的，您是对的，除非您发出 AJAX 请求，否则我认为没有办法修改标头。大多数 API 也允许访问令牌作为查询参数在 url 中传递。我会对此进行更多研究。

如果可能在我的情况下作为参数传递，我想我可以扩展 TileLayer 来传递我需要的参数信息。我可以创建一个扩展，基本上将查询参数添加到 TileLayer（TileLayerQueryParam 或其他东西）。您是否遇到过 TileLayer 需要传递查询参数的情况？ IE 扩展很好，但想知道这是否应该是 TileLayer 的一部分。

newmanw 于 2013-10-12

是的，添加查询参数要容易得多。 :)

mourner 于 2013-10-12

添加为查询参数很好，但它会在请求 url 中公开令牌。在实现 OAuth 2.0 时，建议将令牌写入标头。这个问题应该是一个新的拉取请求。

zhenyanghua 于 2016-10-04

👍9

此功能非常适合 OAuth 2.0 添加授权标头。

rrameshkumar76 于 2017-05-15

@zhenyanghua @rrameshkumar76如上所述， TileLayer只是一个img标签，据了解，无法为图像标签设置自定义标题。

话虽如此，如果您扩展GridLayer ，您可以以任何您想要的方式加载图块（例如使用 AJAX）。在Extending Leaflet, New Layers教程中

perliedman 于 2017-05-15

👍1

感谢@perliedman的回答和解释。
我能够扩展 L.TileLayer.WMS 并覆盖 createTile 方法，在该方法中我进行了 ajax 调用以获取带有标题的图块图像。

rrameshkumar76 于 2017-05-15

👍1

嗨，Ramesh Kumar，您可以分享扩展的 WMS 类以供参考吗？
谢谢堆

SunnyMittal 于 2017-05-19

@SunnyMittal我为 ajax 使用了 superagent，根据需要替换它。

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 于 2017-05-19

👍9 🎉5

@rrameshkumar76谢谢它的帮助:)

SunnyMittal 于 2017-05-23

基于@rrameshkumar76 anwser，我构建了一个超级简单的插件。
希望你会喜欢它。

ticinum-aerospace 于 2018-12-21

如果有人想将标题添加到L.TileLayer而不是L.TileLayer.WMS ，这可以通过对@ticinum-aerospace 的插件进行简单修改来实现。只需将基类从L.TileLayer.WMS更改L.TileLayer并适当地重命名新类和函数。

AB-Kent 于 2019-09-03

❤4

我在这里修改了 @ticinum-aerospace 的L.TileLayer插件而不是L.TileLayer.WMS ： https :

jaq316 于 2020-02-19

此页面是否有帮助？

0 / 5 - 0 等级

Leaflet: 可以更改磁贴请求的标头信息吗？

最有用的评论

所有13条评论

相关问题