彩票走势图

JavaScript地图工具FusionMaps与快逸报表的集成

原创|使用教程|编辑:龚雪|2014-04-15 16:10:21.000|阅读 556 次

概述:本文以快逸报表为例,详细介绍如何实现报表与FusionMaps的集成,轻松实现地域统计图。 

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

FusionMaps v3.0能够帮助你给动态网页添加动画的、交互的以及数据驱动的 Flash Maps这些图片是由XML数据源驱动,并且可以被整合到任何脚本技术 (ASP.NET, ASP, PHP, JSP, CF等)以及数据库中。

随着信息化的高度发展,地域统计图成为了一个重要需求。很多报表目前没有地域统计图,但幸好,FusionMaps提供了优秀的flash统计图,以快逸报表为例,它可以很容易的集成FusionMaps,轻松实现地域统计图。 

快逸报表集成FusionMaps的原理与FusionCharts一致。 

准备工作 

1:首先从官方网站下载swf文件(Ready to use maps),以及FusionMaps.js文件 

2:准备xml文件,可参考FusionMaps介绍及常用功能文章 

集成工作 

以快逸demo应用为例 

1:首先复制swf文件到demo目录下 

Fusionmaps,fusionmaps案例,教程,Flash地图

2:复制所需要的js到demo应用下 

Fusionmaps,fusionmaps案例,教程,
Flash地图

3:创建raq文件fc.raq,集成中国地图 

Fusionmaps,fusionmaps案例,教程,
Flash地图

内容为:

div id=”mapdiv” align=”center”> 

China map 

</div> 

<script type=”text/javascript”> 

// FCMap_China2.swf为包含台湾在内的中国地图 

var map = new FusionMaps(“../FusionMap/FCMap_China2.swf”, “Map1Id”, “500″, “360″, “0″, “0″); 

map.setDataURL(“china.xml”); 

map.render(“mapdiv”); 

</script> 

China.xml内容为: 

<map showShadow=’1′ showBevel=’1′ showMarkerLabels=’1′ fillColor=’F0FAFF’ borderColor=’330000′ baseFont=’Verdana’ baseFontSize=’12′ markerBorderColor=’000000′ markerBgColor=’FF5904′ markerRadius=’6′ legendPosition=’bottom’ useHoverColor=’1′ showMarkerToolTip=’1′ showCanvasBorder=’0′ canvasBorderColor=’f1f1f1′ canvasBorderThickness=’2′ borderColor=’00324A’ hoverColor=’C0D2F8′>  

<entityDef> 

            <entity internalId=’CN.BJ’ newId=’BJ’ sName=’北京‘ lName=’中国北京‘/>      

</entityDef> 


<data> 

        <entity id=’BJ’ displayValue=’北京‘ color=’FEFFFF’ link=”n-../reportJsp/showReport.jsp?raq=ordersinfo.raq&city=北京“/>  

        <entity id=’CN.AH’ displayValue=’安徽‘ color=’EFFFFF’/>  

        <entity id=’CN.CQ’ displayValue=’重庆‘ color=’FFEFFF’ />  

        <entity id=’CN.FJ’ displayValue=’福建‘ color=’FFFEFF’ />  

        <entity id=’CN.GS’ displayValue=’甘肃‘ color=’FFFFFF’ />  

        <entity id=’CN.GD’ displayValue=’广东‘ color=’FFFFFF’ />  

        <entity id=’CN.GX’ displayValue=’广西‘ color=’FFFFFF’ />  

        <entity id=’CN.GZ’ displayValue=’贵州‘ color=’FFFFFF’ />  

        <entity id=’CN.HA’ displayValue=’海南‘ color=’FFFFFF’ />  

        <entity id=’CN.HB’ displayValue=’河北‘ color=’FFFFFF’ />  

        <entity id=’CN.HE’ displayValue=’河南‘ color=’FFFFFF’ />  

        <entity id=’CN.HU’ displayValue=’湖北‘ color=’FFFFFF’ />  

        <entity id=’CN.HL’ displayValue=’黑龙江‘ color=’FFFFFF’ />  

        <entity id=’CN.HN’ displayValue=’湖南‘ color=’FFFFFF’ />  

        <entity id=’CN.JS’ displayValue=’江苏‘ color=’FFFFFF’ />  

        <entity id=’CN.JX’ displayValue=’江西‘ color=’FFFFFF’ />  

        <entity id=’CN.JL’ displayValue=’吉林‘ color=’FFFFFF’ />  

        <entity id=’CN.LN’ displayValue=’辽宁‘ color=’FFFFFF’ />  

        <entity id=’CN.NM’ displayValue=’内蒙古‘ color=’FFFFFF’ />  

        <entity id=’CN.NX’ displayValue=’宁夏‘ color=’FFFFFF’ />  

        <entity id=’CN.QH’ displayValue=’青海‘ color=’FFFFFF’ />  

        <entity id=’CN.SA’ displayValue=’山西‘ color=’FFFFFF’ />  

        <entity id=’CN.SD’ displayValue=’山东‘ color=’FFFFFF’ />  

        <entity id=’CN.SH’ displayValue=’上海‘ color=’FFFFFF’ />  

        <entity id=’CN.SX’ displayValue=’陕西‘ color=’FFFFFF’ />  

        <entity id=’CN.SC’ displayValue=’四川‘ color=’FFFFFF’ />  

        <entity id=’CN.TJ’ displayValue=’天津‘ color=’FFFFFF’ />  

        <entity id=’CN.XJ’ displayValue=’新疆‘ color=’FFFFFF’ />  

        <entity id=’CN.XZ’ displayValue=’西藏‘ color=’FFFFFF’ />  

        <entity id=’CN.YN’ displayValue=’云南‘  color=’FFFFFF’ />  

        <entity id=’CN.ZJ’ displayValue=’浙江‘ color=’FFFFFF’ />  

        <entity id=’CN.MA’ displayValue=’澳门‘ color=’FFFFFF’ />  

        <entity id=’CN.HK’ displayValue=’香港‘ color=’FFFFFF’ />  

        <entity id=’CN.TA’ displayValue=’台湾‘ color=’FFFFFF’ />  

</data> 

</map>  

4:修改showReport.jsp文件,引入fusionmaps.js 

Fusionmaps,fusionmaps案例,教程,
Flash地图

5:效果图 

Fusionmaps,fusionmaps案例,教程,
Flash地图

点击北京地区,新弹出一个页面,内容如下: 

Fusionmaps,fusionmaps案例,教程,
Flash地图

总结: 

整体来看,快逸报表集成FusionMaps非常简单,如果需要更加灵活的在统计图中显示地区的某些统计值,只需要在展示之前,后台修改xml灵活赋值即可。 

 


标签:JavaScript HTML5GIS数据可视化地图地图工具FusionMaps

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP