Geek asks and answers

Use Bing Maps Tiles with a Sheet

I am trying to integrate Bing Maps tiles into a Flyer. All the plugins that I found for this did not help, since they do not have information about their use. I could write a script in PHP to get the X, Y, and Z coordinates from the Leaflet (just set the script as the tile server url), but I need a way to convert them to Quadkey. The answer would be acceptable. I have a Bing Maps API key if that helps.

+5
source share
2 answers

I don’t think you need to use the php module for this, since you can directly generate the quad key from X / Y / Zoom in the Leaflet and integrate Bing Maps tiles into your client application. To convert your X / Y / zoom to a quad key using JavaScript, you can do this as follows:

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; 
}

Here is a possible implementation of the Bing layer in the flyer: https://gist.github.com/1221998

Here you will find interesting information about the tile pattern that Bing uses: http://msdn.microsoft.com/en-us/library/bb259689.aspx

, , -, - . Imagery Service, , ( URI Bing tile), MSDN: http://msdn.microsoft.com/en-us/library/ff701716.aspx

+3

GitHub user shramov leaflet-plugins ( , ) Bing , , . Bing.js JS 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>

, Bing . Bing.js, 4, type 'Aerial'. 'Road' 'AerialWithLabels' .

+2

More articles:


All Articles