How to access MapGuide tiled map using OpenLayers 3 - openlayers-3

Question

Openlayer3 does provide MapGuide untiled example:
var mdf = 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
var agentUrl =
'http://data.mapguide.com/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous';
var bounds = [
-87.865114442365922,
43.665065564837931,
-87.595394059497067,
43.823852564430069
];
var map = new ol.Map({
layers: [
new ol.layer.Image({
extent: bounds,
source: new ol.source.ImageMapGuide({
projection: 'EPSG:4326',
url: agentUrl,
useOverlay: false,
metersPerUnit: 111319.4908, //value returned from mapguide
params: {
MAPDEFINITION: mdf,
FORMAT: 'PNG'
},
ratio: 2
})
})
],
target: 'map',
view: new ol.View({
center: [-87.7302542509315, 43.744459064634],
projection: 'EPSG:4326',
zoom: 12
})
});
, but not MapGuide tiled example. Please help me accessing tiled mapguide map using ol3

Answer 1

not sure if you have found your way, but i used the following example to display a Mapguide tiled map: http://jsfiddle.net/ynaatpaq/
var projection = ol.proj.get('EPSG:4326');
var urlTemplate = 'http://data.mapguide.com/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous&mapdefinition=Library%3A%2F%2FSamples%2FSheboygan%2FMapsTiled%2FSheboygan.MapDefinition&basemaplayergroupname=Base%20Layer%20Group&operation=GETTILEIMAGE&version=1.2.0&tilecol={x}&tilerow={y}&scaleindex={z}';
var metersPerUnit = 111319.4908;
var dpi = 96;
var tileSize = [300, 300];
var extent = [-87.764987, 43.691398, -87.695522, 43.797520];
var scales = [100000, 51794.74679, 26826.95795, 13894.95494, 7196.85673, 3727.59372, 1930.69773, 1000];
var inPerUnit = 39.37 * metersPerUnit;
var len = scales.length;
var resolutions = new Array(len);
for (var i = 0; i < len; ++i) {
resolutions[i] = scales[i] / inPerUnit / dpi;
}
var tileGrid = new ol.tilegrid.TileGrid({
origin: ol.extent.getTopLeft(extent),
resolutions: resolutions,
tileSize: tileSize
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
source: new ol.source.TileImage({
tileGrid: tileGrid,
projection: projection,
tileUrlFunction: function (tileCoord) {
return urlTemplate.replace('{z}', (7 - tileCoord[0]).toString())
.replace('{x}', tileCoord[1].toString())
.replace('{y}', (-tileCoord[2] - 1).toString());
},
wrapX: false
})
})],
view: new ol.View({
projection: projection,
center: [-87.764987, 43.691398],
resolutions: resolutions,
zoom: 1
})
});