Utilizzare i pannelli di Bing Maps con il prospetto

Question

Sto tentando di integrare i pannelli di Bing Maps in Leaflet. Tutti i plugin che ho trovato per fare questo non sono stati d'aiuto anche se non hanno informazioni sul loro utilizzo. Potrei scrivere uno script in PHP per ricevere le coordinate X, Y e Z da Leaflet (basta impostare lo script come l'URL del server tile), ma avrei bisogno di un modo per convertirli in un Quadkey. Una risposta per entrambi sarebbe accettabile. Ho una chiave API di Bing Maps se questo aiuta.

Answer 1

Non penso che sia necessario utilizzare un modulo php per fare ciò poiché è possibile generare direttamente la quadkey da X/Y/Zoom in Leaflet e integrare i tile di Bing Maps nell'applicazione client. Per convertire il X/Y/zoom in una quadkey utilizzando JavaScript, potrebbe essere fatto in questo modo:

function TileXYToQuadKey(tileX, tileY, levelOfDetail) { 
    var quadKey = ''; 
    for (var i = levelOfDetail; i > 0; i--) { 
     var digit = '0'; 
     var mask = 1 << (i - 1); 
     if ((tileX & mask) != 0) { 
      digit++; 
     } 
     if ((tileY & mask) != 0) { 
      digit++; digit++; 
     } 
     quadKey += digit; 
    } //for i return quadKey; 
} 

Ecco una possibile implementazione di strato di Bing in foglio: https://gist.github.com/1221998

Qui troverete informazioni interessanti per quanto riguarda lo schema di piastrelle utilizzato da Bing: http://msdn.microsoft.com/en-us/library/bb259689.aspx

Si prega di tenere presente che questo uso non è qualcosa che dovrebbe essere fatto senza alcuna considerazione per quanto riguarda le licenze. È necessario integrarlo utilizzando le informazioni del Servizio immagini come utilizzato con il plug-in opuscolo (in modo da tenere traccia dell'utilizzo e avere un modo supportato per accedere agli URI di tile Bing), per ulteriori informazioni sul servizio immagini, ecco la documentazione MSDN: http://msdn.microsoft.com/en-us/library/ff701716.aspx

Answer 2

Il repository leaflet-plugins di GitHub dell'utente shramov (collegato a the gist condiviso nella risposta di Nicolas) include un esempio che utilizza un livello di tile Bing ed è stato abbastanza ben mantenuto per quanto posso dire. Avrete bisogno di includere il file Bing.js insieme al foglio JS e CSS:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> 
<script src="Bing.js"></script> 

<div id="map"></div> 

<script type='text/javascript'> 
    var map = new L.Map('map', {center: new L.LatLng(67.6755, 33.936), zoom: 10 }); 
    var bing = new L.BingLayer(YOUR_BING_API_KEY); 
    map.addLayer(bing); 
</script> 

Si noterà che i Bing posatore default immagini aeree. Se apri il file Bing.js, vedrai su Line 4 che la proprietà type è impostata su . Questo può essere modificato in 'Road' o 'AerialWithLabels' per le immagini Tile corrispondenti.