fusionMap和amMap都是使用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