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 :,如需转载请自行联系原作者
相关文章
|
3月前
|
编译器 API Android开发
Android经典实战之Kotlin Multiplatform 中,如何处理不同平台的 API 调用
本文介绍Kotlin Multiplatform (KMP) 中使用 `expect` 和 `actual` 关键字处理多平台API调用的方法。通过共通代码集定义预期API,各平台提供具体实现,编译器确保正确匹配,支持依赖注入、枚举类处理等,实现跨平台代码重用与原生性能。附带示例展示如何定义跨平台函数与类。
106 0
|
13天前
|
JSON BI API
商城上货API接口的实战案例
在商城上货过程中,API接口扮演着至关重要的角色。以下是对商城上货API接口的实战分析,涵盖其主要功能、类型、安全性以及实战案例等方面。
|
10天前
|
XML 数据可视化 API
商品详情数据实战案例,API接口系列
淘宝商品详情数据在电商领域具有广泛的应用价值,而淘宝商品详情API接口则为开发者提供了获取这些数据的重要途径。通过合理利用这些接口和数据,可以提升业务效率、优化用户体验,为电商行业的发展注入新的活力。
|
15天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
30 1
|
20天前
|
存储 JSON API
淘宝API接口实战:高效获取商品标题、分类及店铺名称
在淘宝API接口实战中,通过以下步骤高效获取商品标题、分类及店铺名称:1. 准备工作:了解淘宝开放平台文档,注册开发者账号,选择开发语言和工具。2. 获取API访问权限:申请相应权限,提供应用场景说明。3. 调用API接口:构建HTTP请求,提供必要参数。4. 解析响应数据:提取JSON数据中的所需信息。5. 数据处理和存储:进一步处理并存储数据。6. 注意事项:遵守使用规范,注意调用频率和数据安全。示例代码使用Python调用淘宝API。
|
1月前
|
前端开发 API
Context API 实战应用
【10月更文挑战第8天】在 React 应用开发中,状态管理至关重要。本文介绍了 `Context API` 的基础概念、基本用法,以及常见问题和易错点的解决方法。通过代码示例,详细讲解了如何在组件间高效共享状态,优化性能,处理嵌套 Context 和副作用。
20 1
|
1月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
162 0
|
2月前
|
Rust API Go
API 网关 OpenID Connect 实战:单点登录(SSO)如此简单
单点登录(SSO)可解决用户在多系统间频繁登录的问题,OIDC 因其标准化、简单易用及安全性等优势成为实现 SSO 的优选方案,本文通过具体步骤示例对 Higress 中开源的 OIDC Wasm 插件进行了介绍,帮助用户零代码实现 SSO 单点登录。
|
2月前
|
存储 前端开发 API
告别繁琐,拥抱简洁!Python RESTful API 设计实战,让 API 调用如丝般顺滑!
在 Web 开发的旅程中,设计一个高效、简洁且易于使用的 RESTful API 是至关重要的。今天,我想和大家分享一次我在 Python 中进行 RESTful API 设计的实战经历,希望能给大家带来一些启发。
39 3
|
3月前
|
缓存 API 数据库
打造高性能后端API:从设计到部署的实战之旅
【8月更文挑战第31天】在数字化时代的浪潮中,后端API成为了连接用户、数据与服务的桥梁。本文将带领读者踏上一段从API设计、开发到部署的旅程,通过实际案例分析,揭示如何构建一个高性能的后端系统。我们将探讨现代后端架构的关键要素,包括RESTful API设计原则、数据库优化技巧、缓存策略、以及容器化部署的实践。文章旨在为开发者提供一套实用的方法论,帮助他们在面对复杂业务需求时,能够设计出既高效又可扩展的后端服务。