Wie Autorisierungsheader in getTileUrl für ImageMapType hinzufügen Javascript

Question

Ich möchte auf einige benutzerdefinierte Map Tiles, die auf dem anderen Host gehostet werden, die einen Benutzer/Pass benötigen, wenn Sie ein TileOverlay für Google Maps API erstellen.

Also das ist mein aktueller Code Javascript:

var carte = new google.maps.ImageMapType({ 
    getTileUrl: function (tileCoord, zoom) { 
     var url = "http://host.com/" + (zoom + 1) + "/" + (tileCoord.x + 1) + ":" + (tileCoord.y + 1) + "/tile.png"; 
     return url; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    minZoom: 8, 
    opacity: 0.6 
}); 
map.overlayMapTypes.push(carte); 

Da die Verbindung 401 Anauthorized zurückgibt, kann ich nicht die Fliesen zugreifen. Wie kann ich Autorisierungsheader in Javascript/Jquery übergeben, damit die URL weiß, dass ich berechtigt bin, auf diese Kacheln zuzugreifen?

Ich bin eine Lösung wie diese suchen, aber in Javascript: Adding an Authorization header in getTileUrl for Maps Tile Android

Answer 1

Ich habe eine Lösung von impementing den Proxy gefunden. Hier wird der Code implemeted:

var carte = new google.maps.ImageMapType({ 
     getTileUrl: function (tileCoord, zoom) { 
      return 'http://myhost/myController/getTile?url=http://externe_url/' + (zoom + 1) + "/" + (tileCoord.x + 1) + ":" + (tileCoord.y + 1) + "/tile.png"; 
     }, 
     tileSize: new google.maps.Size(256, 256), 
     minZoom: 8, 
     opacity: 0.6 
    }); 

-Code meines Controller:

def getTile() { 
def result 
try { 
    def http = new HTTPBuilder() 
    try { 
     http.setHeaders([Authorization: 'Basic ' + 'user:pass'.bytes.encodeBase64().toString()]) 
     http.request(params.url, Method.GET, ContentType.BINARY) { req -> 
      response.success = { resp, retour -> 
       result = retour.bytes 
      } 
     } 
    } catch (IOException | URISyntaxException e) { } 
} 

if(result) { 
    // on renvoie au navigateur le contenu de l'image 
    response.status = HttpServletResponse.SC_OK 
    response.contentType = 'image/x-png' 
    response.outputStream << result 
    response.outputStream.flush() 
} 
else { 
    response.status = HttpServletResponse.SC_NO_CONTENT 
} 
} 

Answer 2

Wenn der User-Agent will die Server-Authentifizierungsinformationen senden sie das Berechtigungsfeld verwenden.

Das Berechtigungsfeld ist wie folgt aufgebaut:

Der Benutzername und das Passwort mit einem einzigen Doppelpunkt kombiniert werden. Die resultierende Zeichenfolge wird mit der RFC2045-MIME-Variante von Base64 codiert, mit Ausnahme von 76 char/line. Die Autorisierungsmethode und ein Leerzeichen, d.h. "Basic", werden dann vor die codierte Zeichenkette gesetzt.

Quelle: Http Authentication

$.ajax({ 
     type: // POST OR GET, 
     url: //your url, 
     headers: { 
      Authorization:"Basic "+new Buffer(name+':'+pass).toString('base64'), 
      "Content-Type" : //according to you 
     } 
     }) 
     .done(function(data) { });