Rico Suter's blog.
 


The following code shows how to add the Bing Maps Traffic layer to your OpenLayers 3 map.

First, we have to implement the computeQuadKey function which takes the tile coordinates and calculates a quadkey identifier which is required for the Bing API request:

var computeQuadKey = function(x, y, z) {
    var quadKeyDigits = [];
    for (var i = z; i > 0; i--) {
        var digit = 0;
        var mask = 1 << (i - 1);

        if ((x & mask) != 0)
            digit++;
        if ((y & mask) != 0)
            digit = digit + 2;

        quadKeyDigits.push(digit);
    }
    return quadKeyDigits.join('');
};

With this quadkey computation function and the Bing Traffic tile URL, create a OpenLayers 3 Tile layer:

var quadKeyLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        maxZoom: 19,
        tileUrlFunction(tileCoord, pixelRatio, projection) {
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = -tileCoord[2] - 1;
            return "http://t0.tiles.virtualearth.net/tiles/t" + computeQuadKey(x, y, z) + ".png";
        }
    })
});

And finally, add the created layer to your map:

map.addLayer(quadKeyLayer);

You should check the Bing AGBs whether you are allowed to use this layer on your website and whether you have to add a source citation.



SOFTWARE ENGINEERING EDIT
Geo  GIS  JavaScript  OpenLayers  OpenLayers 3 

Discussion