Flash图表组件FusionCharts帮助文档六:在地图上作标记

原创|其它|编辑:郝浩|2012-11-12 16:08:52.000|阅读 3032 次

概述:在运用 FusionCharts 绘制地图时,我们常常需要在地图上作一些标记,这可以通过标记连接器(Marker Connectors)来实现。在地图上连接任意两个定义标记,你可以用标记连接器展示自定义标签,链接到外部URLs

相关链接:

在运用 FusionCharts 绘制地图时,我们常常需要在地图上作一些标记,这可以通过标记连接器(Marker Connectors)来实现。

标记连接器可在地图上连接任意两个已定义的标记,展示自定义标签,链接到外部URLs,展示连接器的工具条,并自定义所有的装扮。下面将为你讲解如何定义和使用标记连接器。

先给出示例代码:

<map showShadow='0' showBevel='0' showMarkerLabels='0' useHoverColor='0' 
      showLabels='0' showCanvasBorder='0' mapRightMargin='0' 
      fillColor='AFCED9' bordercolor='FFFFFF' markerBgColor='00577F' 
      animation='1' markerBorderColor='00577F' markerRadius='3' 
      showTooltip='0' showMarkerTooltip='1'> 
 ... Map Data here ... 
 
 <markers>
    <definition>
       <marker id='SE' x='35.34' y='50.56' label='Seattle' /> 
       <marker id='CO' x=' 525.85' y='172.94' label='Columbus' />
       <marker id='MA' x='444.94' y='119.34' label='Madison' />
       <marker id='LA' x='81.86' y=' 257.89' label='Los Angeles' />
       <marker id='SLC' x='163.79' y='156.76' label='Salt Lake City' />
       <marker id='KC' x='383.25' y='183.05 ' label='Kansas City' />
       <marker id='AT' x='508.66' y='267' label='Atlanta' />
       <marker id='CH' x='467.19' y='139.56' label='Chicago' /> 
       <marker id='OK' x='344.82' y='236.65' label='Oklahoma City' />
       <marker id='NO' x='432.81' y='314.53' label='New Orleans' /> 
    </definition> 
    <shapes>
       <shape id='Icon' type='image' URL='Resources/PlaneIcon.gif'/>
    </shapes>
    <application> 
       <marker id='SE' shapeId='Icon' /> 
       <marker id='SP' shapeId='Icon' />
       <marker id='CO' shapeId='Icon' />
       <marker id='MA' shapeId='Icon' />
       <marker id='LA' shapeId='Icon' /> 
       <marker id='SLC' shapeId='Icon' />
       <marker id='KC' shapeId='Icon' /> 
       <marker id='AT' shapeId='Icon' />
       <marker id='CH' shapeId='Icon' /> 
       <marker id='OK' shapeId='Icon' />
       <marker id='NO' shapeId='Icon' /> 
    </application>
    <connectors>
       <connector from='SE' to='SLC' toolText='Seattle - Salt Lake City: 689 miles' 
                  dashed='1' color='00577F' alpha='40'/> 
       <connector from='CH' to='AT' toolText='Chicago - Atlanta: 606 miles' 
                  dashed='1' color='00577F' alpha='40'/>
       <connector from='SE' to='LA' toolText='Seattle - Los Angeles: 954 miles' 
                  dashed='1' color='00577F' alpha='40'/> 
       <connector from='AT' to='LA' toolText='Atlanta - Los Angeles: 1946 miles' 
                  dashed='1' color='00577F' alpha='40'/>
       <connector from='LA' to='NO' toolText='Los Angeles - New Orleans: 1645 miles' 
                  dashed='1' color='00577F' alpha='40'/> 
       <connector from='KC' to='MA' toolText='Kansas City - Madison: 381 miles' 
                  dashed='1' color='00577F' alpha='40'/>
       <connector from='SE' to='OK' toolText='Seattle - Oklahoma City: 1499 miles' 
                  dashed='1' color='00577F' alpha='40'/> 
       <connector from='MA' to='SE' toolText='Madison - Seattle: 1595 miles' 
                  dashed='1' color='00577F' alpha='40'/>
       <connector from='KC' to='SLC' toolText='Kansas City - Salt Lake City: 905 miles' 
                  dashed='1' color='00577F' alpha='40'/> 
       <connector from='SLC' to='CH' toolText='Salt Lake City - Chicago: 1239 miles' 
                  dashed='1' color='00577F' alpha='40'/>
       <connector from='CO' to='SLC' toolText='Columbus - Salt Lake City: 1575 miles' 
                  dashed='1' color='00577F' alpha='40'/> 
       <connector from='NO' to='CO' toolText='New Orleans - Columbus: 355 miles' 
                  dashed='1' color='00577F' alpha='40'/>
       <connector from='OK' to='CH' toolText='Oklahomo City - Chicago: 682 miles' 
                  dashed='1' color='00577F' alpha='40'/> 
    </connectors>
  </markers>
</map>

首先我们定义了map属性和map的数据,然后自定义地图标记,每个标记都有一个ID,x,y和标签。我们用一个图形标记器显示地图上的每个标记。

在这个XML中,新引入一个<connectors>元素,你可以在它下面找到多个子元素,每一个connector元素连接两个定义了的标记。要定义连接机制,代码如下:

 <connector from='From_Marker_ID' to='To_Marker_Id' .../>

下图在美国地图上定义了几个城市并通过标记连接器将它们连接了起来:

地图,航线图,FusionMaps

 



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


慧都网友 2015-09-14 21:25:40.000
0

thank you


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat