使用Flash地圖控件AnyMap除了創(chuàng)建Self Drilldown Maps之外，還可以創(chuàng)建Self Drilldown Maps。下面看一下具體的示例——地圖由兩部分組成,第一部分將包含美國(guó)的地圖,當(dāng)用戶單擊特定的州——該州的地圖就將在地圖的第二部分進(jìn)行顯示。

》》》免費(fèi)下載AnyMap最新版

創(chuàng)建儀表板布局

創(chuàng)建這樣的地圖需要使用AnyChart儀表板功能,儀表板將包含兩個(gè)部分,以下面的代碼進(jìn)行創(chuàng)建:

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <dashboard>
    <view type="Dashboard">
      <title>
        <text>USA Drilldown Map</text>
      </title>
      <hbox width="100%" height="100%">
        <view name="Country" type="Chart" width="50%" height="100%" source="USA" />
        <view name="State" type="Chart" width="50%" height="100%" />
      </hbox>
    </view>
  </dashboard>
</anychart>

為地圖創(chuàng)建圖表

以下面的代碼進(jìn)行創(chuàng)建:

<chart plot_type="Map" name="USA">
  <chart_settings>
    <title enabled="false" />
    <chart_background enabled="false" />
    <data_plot_background enabled="false" />
  </chart_settings>
  <data_plot_settings>
    <map_series source="usa/country/states.amap">
      <projection type="orthographic" />
      <undefined_map_region palette="Default">
        <actions>
          <action type="updateView" view="State" source_mode="internalData" source="State">
            <replace token="{$region_amap}">{%REGION_ID}</replace>
            <replace token="{$title}">{%REGION_NAME}</replace>
          </action>
        </actions>
      </undefined_map_region>
    </map_series>
  </data_plot_settings>
</chart>

這個(gè)操作定義意味著AnyChart應(yīng)在"State"視圖中加載"State"圖表，并使用{%REGION_ID}和{%REGION_NAME}關(guān)鍵字參數(shù)來(lái)取代{$region_amap}和{$title}符號(hào)。

中間結(jié)果——具有一個(gè)定義地圖的Dashboard

如果將描述的圖表添加到儀表板，將會(huì)得到如下所示的地圖：

州地圖的XML

創(chuàng)建美國(guó)所有州的XML,需要使用一個(gè)參數(shù)化的XML,{$title}和{$region_amap}符號(hào)將會(huì)由主圖表<action>進(jìn)行處理：

<chart plot_type="Map" name="State">
  <chart_settings>
    <title>
      <text>{$title}</text>
    </title>
    <chart_background enabled="false" />
    <data_plot_background enabled="false" />
  </chart_settings>
  <data_plot_settings>
    <map_series source="usa/states/counties/{$region_amap}.amap">
      <projection type="orthographic" />
      <undefined_map_region palette="Default" />
    </map_series>
  </data_plot_settings>
</chart>

最終的Drilldown Dashboard

只需要將 "State" 圖表添加到<charts>部分，儀表板就完成了