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

在运用 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' .../>

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

Flash图表组件FusionCharts帮助文档六:在地图上作标记_第1张图片

你可能感兴趣的:(FusionCharts)