Leaflet: 타일 ​​요청에 대한 헤더 정보를 변경할 수 있습니까?

흠... HTML에서 그렇게 할 수 있는 방법이 있나요? 내 말은, Leaflet에 대해 이야기하지 않고 일반적으로 사용자 정의 헤더가 있는 이미지를 로드하는 방법은 무엇입니까?

좋은 지적! 더 깊이 파고들면 무슨 일이 일어나고 있는지 알 수 있습니다. 그리고 네 맞습니다. AJAX 요청을 하지 않는 한 헤더를 수정하는 방법이 없다고 생각합니다. 대부분의 API는 액세스 토큰을 쿼리 매개변수로 URL에 전달할 수도 있습니다. 더 자세히 살펴보겠습니다.

제 경우에는 매개변수로 전달할 수 있다면 필요한 매개변수 정보를 전달하도록 TileLayer를 확장할 수 있다고 생각합니다. 기본적으로 TileLayer(TileLayerQueryParam 또는 기타)에 쿼리 매개변수를 추가하는 확장을 만들 수 있습니다. TileLayer가 쿼리 매개변수를 전달해야 하는 상황을 경험한 적이 있습니까? IE 확장은 괜찮지만 이것이 TileLayer의 일부여야 하는지 궁금합니다.

예, 쿼리 매개변수를 추가하는 것이 훨씬 쉽습니다. :)

쿼리 매개변수로 추가하는 것은 괜찮지만 요청 URL에 토큰이 노출됩니다. OAuth 2.0을 구현할 때 제안은 헤더에 토큰을 쓰는 것입니다. 이 문제는 새로운 pull 요청이어야 합니다.

이 기능은 OAuth 2.0이 인증 헤더를 추가하는 데 유용합니다.

@zhenyanghua @rrameshkumar76 위에서 언급했듯이 TileLayer 는 img 태그일 뿐이며 이미지 태그에 대한 사용자 정의 헤더를 설정할 수 있는 방법이 없습니다.

하지만 GridLayer 를 확장하면 원하는 방식으로 타일을 로드할 수 있습니다(AJAX 사용 등). Extending Leaflet, New Layers 튜토리얼에서 이와 같은 작업을 수행하는 방법에 대한 몇 가지 좋은 예가 있습니다.

답변과 설명에 대해 @perliedman 에게 감사드립니다.
L.TileLayer.WMS를 확장하고 헤더가 있는 타일 이미지를 가져오기 위해 ajax 호출을 수행한 createTile 메서드를 재정의할 수 있었습니다.

안녕하세요 Ramesh Kumar님, 참조용으로 확장된 WMS 클래스를 공유할 수 있습니까?
감사합니다

@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 도움이

@rrameshkumar76wser를 기반으로 아주 간단한 플러그인을 만들었습니다.
당신이 그것을 즐길 수 있기를 바랍니다.

어느 하나에 헤더를 추가하고자하는 경우 L.TileLayer 대신 L.TileLayer.WMS ,이 @ ticinum - 항공 우주의 간단한 수정에 의해 가능하다 플러그인 . 기본 클래스를 L.TileLayer.WMS 에서 L.TileLayer 로 변경하고 새 클래스와 함수의 이름을 적절하게 변경합니다.

에 대한 내가 ticinum - 항공 우주 @ 수정 한의 플러그인 L.TileLayer 대신 L.TileLayer.WMS 여기 : https://github.com/jaq316/leaflet-header/blob/master/index.js