如何使用OpenLayers 3访问MapGuide平铺地图

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