Flex Datamap控件

想象一下您可以对一个组件上的DataGrid或TileList使用相同的数据提供程序，并且它会基于一个“位置”/可定制字段将该数据绘制到一份地图上。单击每个项目会弹出一个项目渲染器（item renderer）显示与该位置相关的对象。现在想象一下您可以自动跟踪对数据提供程序所做的更改；按下Control键并框选多个项目；利用缩放级别通过按比例放大和缩小的图形在地图上任意绘制，而且还可以保存和还原图形。不要想象了，这正是Flex Datamap控件所实现的功能。
下面，我们进入正题。该控件要应对的主要情况是：您的数据中包含位置信息并且您想要在一份地图上绘制它并在单击它的时候显示与该位置相关的数据（放大一个datagrid？）。该控件建立在出色的Yahoo! AS3地图组件之上。

数据（地图）

Flex Datama控件接受dataProvider（数据提供程序）的方式类似于List / DataGrid，检查每个对象的mapField（地图字段）属性（默认是“位置”）并在地图上的该位置处绘制一个标记。现在对数据提供程序ArrayCollection（数组集合）进行的任何修改都将反映在地图上。您可以添加/编辑/删除对象或应用一个筛选函数并使地图自动更新（类似于DataGrid、List等的处理方式）。尽管这可能听起来微不足道，但是有一些细微之处值得注意：地图的边界和缩放级别将自动调整以显示所有的标记。
Datamap也绘制一个“覆盖层（overlay）”（Yahoo AS3组件具有用于覆盖层的API）并尽量确保该覆盖层拥有更多的封闭区域。
项目和标记渲染器
单击一个标记会弹出一个项目渲染器（可以对其修改），它随地图一起平移（尽管有些滞后）并且在地图边界处会正确地进行剪切。您也可以指定一个标记渲染器来设置如何绘制每个标记（该功能内置在Yahoo! AS3 Map组件中）。
标记选择
单击一个标记来选中它，selectedObject（已选择的对象）将指向与该标记关联的数据。按住Control键的同时单击就可以选择多个标记，这些标记可以通过selectedObject访问。也可以在按下Control键同时使用鼠标绘制一个选择框来选择多个标记。在选择框内的任何标记都会被选中（这是一种切换——如果选择框内存在一个已选择的标记，那么它将变成未选择状态）。
在地图上任意绘图
按住Shift键不放就可以在地图上绘图。因为绘图基于纬度/经度进行记录，所以图形应随地图正确地进行缩放和平移。也可以将该数据保存为一个Base64编码的字符串并通过设置freeformLinesBase64属性还原数据。
演示
您可以试用该组件的一个演示。这个演示尝试处理该控件的大多数可配置属性（但是像enableDrawMode这样的属性除外）。试着利用可编辑的DG进行操作，改变项目和标记渲染器等。
感谢
感谢Ramesh Srinivasaraghavan（正式身份是资深计算机科学家和平台传播官）的创意，他领导着Adobe的印度传播团队。最初的想法是“放大一个datagrid”。真诚欢迎大家实现这一想法（并引入bug）。
下载
为了使用Datamap，您需要下载YahooMap SWC并将其放在libs目录中。完成后就可以从这里抓取datamap SWC：
Datamap SWC
只要将Datamap SWC放到您的libs文件夹中，就应当能够从MXML将DataMap实例化。记住使用该组件之前要设置您的Yahoo! App ID。
  

                <controls:DataMap
               yahooAppID="yourappidhere"
               id="mapGrid"
               dataProvider="{mapColl}"
               mapClick="mapClick(event)"
               enableDrawMode="true"
               mapDoubleClick="mapDClick(event)"
               geocoderFailure="mapFault(event)"  
                width="75%" height="100%" />
如果您想了解该组件的一个简单用例，那么可以查看Datamap Example Source中的DataMapSimpleExample.mxml。
该组件使用MPL 1.1进行授权并且可以下载它的源代码：
Datamap Source
Datamap Example Source

 

英文原文:http://anirudhs.chaosnet.org/blog/2009.03.02.html