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