MapGuide与Google Maps集成(Integrate Google Maps into MapGuide Enterprise Fusion viewer)

As you know, Google Maps is more and more popular around the world. Is it possible to integrate Google Maps into my MapGuide Enterprise Fusion viewer as base map? Yes, it is!

As MapGuide Fusion viewer uses a subset of OpenLayers, it allows us to access to the underlying OpenLayers API. In this article, we will show you how to integrate Google Maps into our existing Fusion Viewer template. Of cause, you can do that similarly to integrate Yahoo Maps or Virtual Earth Maps as well.

 

Firstly, we need to make a copy of our existing Fusion template, such as Slate.

Copy and rename C:\Program Files\Autodesk\MapGuideEnterprise2010\WebServerExtensions\www\fusion\templates\mapguide\slate as GoogleSlate at the same fold with slate.

And copy and rename C:\Program Files\Autodesk\MapGuideEnterprise2010\WebServerExtensions\www\fusion\templates\mapguide\slate.xml as GoogleSlate.xml at the same folder with slate.xml (Please note that the filename of xml should be same with the template folder).

 

Secondly, we will make some changes in the GoogleSlate.xml. Open it in notepad or any other text editor you like, change the lines like this:

<Name>GoogleSlate</Name>

<LocationUrl>fusion/templates/mapguide/GoogleSlate/index.html</LocationUrl>

<Description>GoogleSlate template</Description>

<PreviewImageUrl>fusion/templates/mapguide/GoogleSlate/preview.png</PreviewImageUrl> 

 

Now, we need to add Google Maps in to this new template. To do that, we need to apply a Google Map API key. The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. A single Maps API key is valid for a single "directory" or domain. You must have a Google Account to get a Maps API key, and your API key will be connected to your Google Account. You can refer to http://code.google.com/apis/maps/ for more information. When you are done with that, you will get a JavaScript library like this:

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>

 

Let's open the index.html in GoogleSlate folder using notepad, add the Google Maps API library before the fusion script library.

<!-- Add the Google Map API Javascript llibrary-->

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>

<script type="text/javascript" src="http://www.cnblogs.com/../lib/fusionSF-compressed.js"></script> 

We need to register a MAP_LOADED event for the map when fusion is initialized:

var fusionInitialized = function() {

$('AppContainer').resize({forceResize: true});

$('AppContainer').style.visibility = 'visible';    

    //Register the MAP_LOADED event to load Google base map when map is loaded

    // Firstly, we need to get the map widget object

    Fusion.getWidgetById('Map').registerForEvent(Fusion.Event.MAP_LOADED, addGoogleBaseMap);    

} 

Create the Map_LOADED event handler to the add Google Maps as base map:

// Add the google map as base map

var addGoogleBaseMap = function()

{

    var mapWidget = Fusion.getWidgetById('Map');

    var map = mapWidget.oMapOL;

    mapWidget.fractionalZoom = false;

    map.setOptions({fractionalZoom: false, numZoomLevels: 20});

    

    var googleStreetsLayer = new OpenLayers.Layer.Google('Google Streets',{type : G_NORMAL_MAP, isBaseLayer:true, sphericalMercator:true});

    map.addLayer(googleStreetsLayer);

    map.setBaseLayer(googleStreetsLayer);

      

     var mgLayers = map.getLayersByClass('OpenLayers.Layer.MapGuide');

     if(mgLayers.length!=0)

     {

         var mgLayer = mgLayers[0];

         if(mgLayer.isBaseLayer)

         {

             map.setBaseLayer(googleStreetsLayer);

             mgLayer.setIsBaseLayer(false);

             mgLayer.setVisibility(true);

         }

     }    

} 

If you changed the preview.pgn and refresh in MapGuide Studio, you will find a new Fusion template(GoogleSlate) available now. If Studio is already running, the list of available templates can be refreshed by right-clicking in the display of templates, and selecting "Refresh".

OK, we are almost there. You can put a map into this new template and try. But before that, there is still a one more thing we should pay attention to. As the Google Maps use EPSG:3785 (Popular Visualisation CRS / Mercator) coordinate system, in order to make your map match with Google Maps perfectly, you should use EPSG:3785 in your map as well. You can change the WKT of coordinate system by editing the XML of MapDefiniation. The OpenSource tool Meastro can do that conveniently.

You can change the value of <CoordinateSystem> as below:

<CoordinateSystem>PROJCS["Popular Visualisation CRS / Mercator", GEOGCS["Popular Visualisation CRS", DATUM["Popular Visualisation Datum", SPHEROID["Popular Visualisation Sphere", 6378137, 0, AUTHORITY["EPSG",7059]], TOWGS84[0, 0, 0, 0, 0, 0, 0], AUTHORITY["EPSG",6055]], PRIMEM["Greenwich", 0, AUTHORITY["EPSG", "8901"]], UNIT["degree", 0.0174532925199433, AUTHORITY["EPSG", "9102"]], AXIS["E", EAST], AXIS["N", NORTH], AUTHORITY["EPSG",4055]], PROJECTION["Mercator"], PARAMETER["False_Easting", 0], PARAMETER["False_Northing", 0], PARAMETER["Central_Meridian", 0], PARAMETER["Latitude_of_origin", 0], UNIT["metre", 1, AUTHORITY["EPSG", "9001"]], AXIS["East", EAST], AXIS["North", NORTH], AUTHORITY["EPSG",3785]]</CoordinateSystem> 

Now, select the new template and set the map, and review, you should see the Google Maps is integrated into your map allocation as base map. Is it cool? Try it now J