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,

峻祁连

 

作者: 峻祁连
邮箱:junqilian@163.com 
出处: http://junqilian.cnblogs.com 
转载请保留此信息。




本文转自峻祁连. Moving to Cloud/Mobile博客园博客,原文链接http://www.cnblogs.com/junqilian/archive/2011/02/22/1961619.html :,如需转载请自行联系原作者
相关文章
|
15天前
|
监控 前端开发 JavaScript
实战篇:商品API接口在跨平台销售中的有效运用与案例解析
随着电子商务的蓬勃发展,企业为了扩大市场覆盖面,经常需要在多个在线平台上展示和销售产品。然而,手工管理多个平台的库存、价格、商品描述等信息既耗时又容易出错。商品API接口在这一背景下显得尤为重要,它能够帮助企业在不同的销售平台之间实现商品信息的高效同步和管理。本文将通过具体的淘宝API接口使用案例,展示如何在跨平台销售中有效利用商品API接口,以及如何通过代码实现数据的统一管理。
|
26天前
|
人工智能 Java API
Google Gemini API 接口调用方法
Google 最近发布的 Gemini 1.0 AI 模型通过其升级版,Gemini,标志着公司迄今为止最为强大和多功能的人工智能技术的突破。
|
28天前
|
数据采集 JSON API
如何实现高效率超简洁的实时数据采集?——Python实战电商数据采集API接口
你是否曾为获取重要数据而感到困扰?是否因为数据封锁而无法获取所需信息?是否因为数据格式混乱而头疼?现在,所有这些问题都可以迎刃而解。让我为大家介绍一款强大的数据采集API接口。
|
1月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
90 0
|
3月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
37 3
|
2月前
Google Earth Engine(GEE)——从列表中少选所需要的数字不用map函数,还能如何实现?简单方法介绍
Google Earth Engine(GEE)——从列表中少选所需要的数字不用map函数,还能如何实现?简单方法介绍
17 0
|
2月前
|
存储 负载均衡 API
部署大模型API的实战教程
部署大模型API的实战教程可以分为以下步骤:
|
2月前
|
API 网络架构
Amazon API Gateway CORS 实战
Amazon API Gateway CORS 实战
15 0
|
2月前
|
API 网络架构
解释 RESTful API,以及如何使用它构建 web 应用程序。
解释 RESTful API,以及如何使用它构建 web 应用程序。
87 0
|
2月前
|
定位技术 API
Google Earth Engine(GEE)——如何给地图添加一个不同底图
Google Earth Engine(GEE)——如何给地图添加一个不同底图
38 0

热门文章

最新文章