amMap和fusionMap比較

fusionMapamMap都是使用flash實現地理數據的顯示,功能類似,有一些細微的差別,如下:

   FusionMap特徵:

        1)使用xml進行交互,這點和fusionChart區別不大

        2) 可以實現resize

        3) 支持tooltip, legend link range(區域選擇)

        4) 地圖省名可以修改

        5) 支持添加marker,就是自定義圖標

   Ammap特徵:

        1) 縮放:可實現多種縮放效果,如zoomToLongLat(經度,緯度,縮放比例)   zoomToRectangle(左上經緯度,右下經緯度)等。

            如果要支持基於地理信息的層級顯示,這點還是很重要的,但ammap和fusionMap有個不好的地方是沒有地理信息,如果需要涉及地理信息,如街道,鄉鎮名稱就不要考慮了,推薦使用googleMap

        2)對 image(在某一經緯度或始終在前面),movie,   line ,dashed lines,  cured line(設置line的curved=true)的支持

        3) 和世界地圖組合可實現drill down 效果,就是點擊世界地圖中國部分,顯示中國的省份地圖,可以參考原包中的實例。

         4)自定義對話框(InfoDescription類)

         5)自定義圖標,label,並基於經緯度定義,像素在地圖上定位

         6)將幾個省份作爲一組

         7)TimeLine,可用來實現ppt, e-learning(timeline+zoom工具實現), 基於時間變化的熱量圖(timeLine+地圖),這個需要參考官方blog 8,我也沒用過

    只是對兩者進行簡單的比較,因爲開發的工程中需要顯示在地圖上顯示層級數據,需要縮放功能,所以選擇Ammap,下面將以Ammap進行介紹。

 

Ammap教程

初始化顯示:
[Embed(source="/assets/maps/china.swf")]
private var _china:Class;
dataSet.mapClass=_china;
<ammap:AmMap useObjectColorForBalloon="false" rollOverMapObject="rollOver(event)"
rollOutMapObject="rollOut(event)" id="map" developerMode="false" backgroundColor="#FFFFF0"
showMapProgressBar="true" clickMapObject="onClickMapArea(event)" width="100%" height="100%" >
<ammap:areasSettings>

<ammap:AreasSettings autoZoom="false" rollOverColor="#7FFFD4" selectedColor="#7FFFD4"

unlistedAreasAlpha="0.5" unlistedAreasColor="#808080" />

</ammap:areasSettings>
<ammap:moviesSettings>
<ammap:MoviesSettings centered="false" bringForwardOnHover="true" rollOverColor="#CC0000" />
</ammap:moviesSettings>

<ammap:dataSets>

<ammap:DataSet id="dataSet" leftLongitude="73.559248" topLatitude="53.560308"

rightLongitude="134.775703" bottomLatitude="18.158606">

<ammap:areas>
<ammap:MapArea instanceName="borders" title="borders" color="#FFFFFF" mouseEnabled="false" />
</ammap:areas>
</ammap:DataSet>
</ammap:dataSets>

   1.  如果使用下載文件中的sample加載後,圖形顯示金黃一片,並沒有顯示省名,多半是MapArea的 instanceName有錯誤,

   2.  其中ammap:DataSet 設置左上,右下的經緯度確定map的顯示範圍,默認即可;

   3.  borders的MapArea是邊界。mouseEnabled代表鼠標事件不捕獲

   4. 當進行菜單切換時,如果要實現reset效果,可以將dataSet清空,但一定要重新對左上和右下的經緯度賦值

map.cleanDataSet(dataSet);
dataSet.leftLongitude=73.559248;
dataSet.topLatitude=53.560308;
dataSet.rightLongitude=134.775703;
dataSet.bottomLatitude=18.158606;

    5.  設置mapArea和mapMoive的默認樣式

    6.  當在地圖上點擊時,監聽clickMapObject,其中event類型爲MapObjectEvent

    7. developerMode的開啓可以顯示調試信息,ctrl+0可複製到剪切板

    8.  ammap:label 可以支持html格式的標籤

    9. 啓動時進入縮放,可通過設置DataSet的zoomLevel, zoomLong,zoomLat實現,url表示默認選中的MapMovie的Id,

修改tooltip相關樣式
<ammap:balloon> <ammap:AmBalloon fontSize="18" fillColor="#000000" color="#FFFFFF"/></ammap:balloon>
縮放工具和比例尺的使用

<ammap:AmMapLegend id="legendBytes" width="400" visible="true" backgroundAlpha="0.5"

backgroundColor="#FFFFFF" bottom="5" left="{0.25*map.width}" borderColor="#666666"

borderStyle="solid" paddingTop="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">

<ammap:LegendItem text="良好" markerColor="#179C17"/>
<ammap:LegendItem text="輕微" markerColor="#117ED6"/>
<ammap:LegendItem text="一般" markerColor="#FCFA51"/>
<ammap:LegendItem text="緊急" markerColor="#FFA500"/>
<ammap:LegendItem text="嚴重" markerColor="#FF0000"/>
</ammap:AmMapLegend>
<ammap:zoomControl>
<ammap:ZoomControl id="zoom" buttonBorderColor="#000000" homeIconColor="#000000"/>
</ammap:zoomControl>
 
   注意事項:

     1. area的顏色根據 value和solidColor自動生成 ,所以如果你要指定MapArea的顏色,一定不要設置vaule的值,不然你會發現MapArea的顏色在偷偷的改變。

     2. 如果使用xml進行MapArea的賦值,注意group字段是MapObject的實例,而不是String ,實現方法是,先在一個循環中,實現MapArea中實現 實例的賦值; 然後對每一個MapArea group中的字符串進行遍歷,對於每一個string,調用findObject得到其對應的MapArea。得到數組後,賦值給該MapArea,如: obj.linkWith=groupAreas;
    3.  建議對每層數據設定固定的縮放比

    4.  通過movie.movieClass賦值,可實現動畫圖標,但要求圖標是swf格式,gif不支持

    5. 當更新完數據後,調用 map.invalidateData();    實現數據重新初始化

    6. 在監聽事件時,如果輸出信息,調用 event.toString()函數。

    7.  點擊葉子節點後,葉子不消失的方法。 按官方說法,只要你不設置葉子的 zoomLevel,並且其中沒有包含MapMovie,並且設置movie.remainVisible=true;就不會消失。 但我這有些問題,我的實現思路是:

           當點擊分支節點時,保存該分支節點到 selectedArea變量。

           將葉子節點加入到該分支節點的movies數組中

           當點擊葉子節點時,設置當前選中對象爲selectedArea

參考資料

    下載包中的sample和  class reference

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章