MapGuide Fusion Viewer API 实战-- 程序切换Google Map/Yahoo Map/Bing Map 地图

前面的文章写过如果在MapGuide Studio中为MapGuide添加Google Map、Yahoo Map、Bing Map作为底图,今天就有人给我出了个难题。我知道在MapGuide Fusion Viewer界面上可以用External Provider菜单来切换地图类型,用程序怎么实现呢?

 

说实话,这个问题我也不会,呵呵。不过经过一番研究还是找到了办法。这里就把我的研究过程写出来供大家参考,以后再遇上类似情况,大家也可以自己来研究了。“授之以渔”吧。

 

Fusion Viewer和MapGuide Ajax Viewer基本网络布局不太一样,不再采用Ajax Viewer的Frameset的框架模式,而是采用的现在更流行的<Div>+CSS的的布局方式。自然Fusion Viewer的 API自然也有Ajax Viewer基本网络布局的API有所不同。由于Fusion Viewer API里没有公开的方法众多,文档又相对缺乏,估计大家也和我一样,开发过程中常为没有文档而苦恼。首先还是先给大家介绍一下关于Fusion Viewer现有的API,在MapGuide developer Guide里面有一章内容专门介绍了Fusion Viewer的基本API,如果你还没有看过,推荐您首先去看一下,这个文档可以在MapGuide的安装目录下找到。 "C:\Program Files\Autodesk\MapGuideEnterprise2011\WebServerExtensions\Help\DevGuide.pdf"。 如果你以前做过Ajax Viewer基本网络布局开发,肯定想知道AjaxViewer中的API在Fusion Viewer中是否还能不能用,实际上MapGuide Fusion viewer中也提供了一套模拟API,功能和Ajax Viewer API的一致。峻祁连以前也写过相关文章,你可以参考:

Digitize using Fusion Viewer API in MapGuide Enterprise 2011

To Implement ZoomToSelection in Fusion Viewer MapGuide Enterprise 2011

 

言归正传,现在开始来编程实现底图的切换。首先我想应该有个界面来触发我的程序,这里我新建一个iInvoke Script的自定义命令,命名为SwitchBaseMap,并把他添加到ToolBar上。

image

 

下面就开始在Script To invoke框里来写我的实现代码了,当然为了方便编辑,我一般是先在文本编辑器里写好了,再贴进去。怎么写呢?这个需求是切换底图BaseMap,就想Fusion Viewer界面上一样。貌似developer guide文档中没有介绍相关的方法,也许是我忘了,那干脆看Fusion的源码吧。MapGuide的好处就在这里,不知道了就去啃源码 :)

 

找个好用的文本编辑器,我用notepad++,打开Fusion的源码文件fusionSF.js。这个文件包涵了Fusion的所有相关的东西,位于C:\Program Files\Autodesk\MapGuideEnterprise2011\WebServerExtensions\www\fusion\lib\目录下。同样的目录还有Fusion,js和其他一些分开的js文件,每个文件对应一个模块。我也不太清楚basemap相关的东西放在那个模块下了,干脆就打开这个全的fusionSF.js一通搜。

 

功夫不负有心人,通过搜索“basemap”关键字,还真让我有所发现,我发现有个函数名叫setBasemap,嘿,这名字不错,貌似就是我要找的东东。

image

 

看看他的实现,应该是八九不离十了,上面列出的估计就是可以用的参数了,比如Aerial,Hybrid等等。先试试再说。再往上看一眼,这个setBasemap是Fusion.Widget.BasemapSwitcher类的一个方法,嗯,这下更高兴了。现在看看怎么用这个函数吧。

 

通过读Developer’s Guide文档,我知道Fusion Viewer中有个全局变量Fusion是老大,找到这个Fusion对象应该就不难找到他下面的小兄弟。如何获取Fusion对象,文档中应该有些示例代码,不过我有点懒,想起来C:\Program Files\Autodesk\MapGuideEnterprise2011\WebServerExtensions\www\fusion\layers\MapGuide\MapGuideViewerApi.js里面已经做过相关的实现了,我就拿过来吧,哈哈! 先alert()测试一下看看Fusion取不取得到。

 

var mgApiMapWidgetId = 'Map';
var MainFusionWindow = GetFusionWindow();

var OpenLayers = MainFusionWindow.OpenLayers;
var Fusion = MainFusionWindow.Fusion;

/* locate the Fusion window */
function GetFusionWindow() {
    var curWindow = window;
    while (!curWindow.Fusion) {
        if (curWindow.parent && curWindow != curWindow.parent) {
            curWindow = curWindow.parent;
        } else if(curWindow.opener) {
            curWindow = curWindow.opener;
        } else {
            alert('Could not find Fusion instance');
            break;
        }
    }
    return curWindow;
}

function GetFusionMapWidget() {
    return Fusion.getWidgetById(mgApiMapWidgetId);
}

alert(Fusion);

经测试没问题,已经成功取到Fusion对象了,下面就是要找这个Fusion.Widget.BasemapSwitcher对象,然后就用他的setBasemap应该就差不多了。怎么找到Fusion.Widget.BasemapSwitcher对象呢?这时我想到了Developer Guide文档上好像说过获取Widget的方法GetWidgetById,实际上前面的代码获取Map的时候也用过了。但是这个BasemapSwitcher的ID是什么呢?找了半天不得其解。算了,不和它耗了,不是还有另外一个很像的方法getWidgetsByType吗?按类型找就可以了。不过需要注意的是同样类型的widget可能有多个,所以这里是返回了一个数组。我的地图上只有一个BasemapSwitcher,所以取第0个就行了。于是有了下面的代码:

var basemapSwitcher = Fusion.getWidgetsByType('BasemapSwitcher')[0];
alert(basemapSwitcher);

通过alert方法测试返回[object],可见已经找到了,然后调用BasemapSwitcher的setBasemap方法就是顺理成章的事了,测试一下,工作正常,哈哈,打完收工。

全部代码就这样,也很简单:

var mgApiMapWidgetId = 'Map';
var MainFusionWindow = GetFusionWindow();

var OpenLayers = MainFusionWindow.OpenLayers;
var Fusion = MainFusionWindow.Fusion;

/* locate the Fusion window */
function GetFusionWindow() {
    var curWindow = window;
    while (!curWindow.Fusion) {
        if (curWindow.parent && curWindow != curWindow.parent) {
            curWindow = curWindow.parent;
        } else if(curWindow.opener) {
            curWindow = curWindow.opener;
        } else {
            alert('Could not find Fusion instance');
            break;
        }
    }
    return curWindow;
}

function GetFusionMapWidget() {
    return Fusion.getWidgetById(mgApiMapWidgetId);
}



var basemapSwitcher = Fusion.getWidgetsByType('BasemapSwitcher')[0];
//close base map
//basemapSwitcher.setBasemap('None');
// siwth to Bing Map Aerial
basemapSwitcher.setBasemap('Aerial');

 

好了,总之呢,MapGuide Fusion现在是文档简单,但源代码丰富啊,想要什么东西没文档的话,那就源代码里面刨去吧,呵呵。

 

Cheers,

峻祁连

 


Related Posts Plugin for WordPress, Blogger...