Flex Viewer解析-----InfoPopup(InfoWindow)

InfoPopup是FlexViewer中在地图上显示特征点、线、面弹出详细信息的主要展现形式（见下图），其结构也不是很复杂，在这个将其专门列出来是因为有很多网友问我关于此弹出信息框的一些问题，如更改样式、显示复杂信息内容等。

????InfoPopup的定义在InfoPopup.mxml中，其实现代码也比较简单。原理也比较简单，就是只要给这个InfoPopup一个InfoData，这个InfoWindow就会出现在地图上，下面就将这个InfoData的内容和InfoWindow的显示内容做一个对照讲解。

?

InfoData的定义：

?????????*???var infoData:Object =

?????????*???????{

?????????*??????????icon: icon,??????????????//a Image object

?????????*??????????title: "a title string",

?????????*??????????content: "a string",191)">?????????*??????????link: "http://a.url.com",191)">?????????*??????????point: point,????????????//a Point object

?????????*??????????geometry: geom???????????//a Geometry object

?????????*???????};

其中

icon参数，对应InfoWindow中的特征点图标，即上图中的”望远镜图标

title参数：顾名思义就是的标题，即上图中的成都市大港分公司……”

content参数：就是的显示内容部分，即上图中的”STAT_ADDR:link参数：超链接地址，图中没有显示出来。

PointInfowindow的显示的坐标点位置。

Geometry参数：同样是其显示的坐标点位置。

?

我们可以知道，拥有了上述的参数，一个Infowindow就确定了位置和内容，那么它就可以在地图上显示出来。下面我们进一步看看InfoPopup.mxml里面是如何实现的。

首先，我们需要给这个设置一个显示的地图，也就是它是那个地图的信息框。也就是下面的几行代码。比较简单。

private?var?_map:Map;

???????????public?function?set?map(value:Map):void

???????????{

???????????_map = value;

???????????}

get?map():Map

return?_map;

???????????}

其次，为其设置了地图之后，要使其显示出来就要为其设置InfoData，设置方法同样是Get和Set的方式。

var?_infoData:Object;

set?infoData(value:Object):???????????_infoData = value;

if?(value)

???????????????setInfoParameters();

else

???????????????currentState =?"";

get?infoData():Object

return?_infoData;

我们可以看到，在设置的infodata是可用的时候，执行了函数setInfoParameters();这个函数就是将infodata的内容显示在窗体上。函数中首先调用另外一个函数positionInfo();下面的代码就比较简单了，就是将infodata里面的内容赋给对应的控件进行显示。我们看下这个positionInfo();函数。

function?positionInfo():??????????????if?((map.extent) && (infoData))

var?infoPt:Point = map.toScreen(pt);

下面是判断，信息框的位置，如果在屏幕的靠右位置，这是主信息框显示在左边

如果在靠左位置，主信息显示在右边。

var?reg:String =?"regLeft";

??????????????????if?(infoPt.x > map.width / 2)

?????????????????????reg =?"regRight";

??????????????????currentState = reg;

设置信息框的显示位置，(infoIconCanvas.x + 20)这个的作用是

将信息框图标绘制在特征点的中央。

this.x = infoPt.x - (infoIconCanvas.x + 20);

this.y = infoPt.y - (infoIconCanvas.y + 20);

??????????????}

这是函数就决定了信息框的显示位置和状态。

这是就会有个疑问，我们设置这个信息框的时候使用的是屏幕坐标，为什么信息框会随着地图的平移而移动呢？我们注意到在程序的一开始，就是程序加载的时候执行了这样一个函数：

private?function?init():{

var?PieData2:Object=

num:60,0)">"60%"//然后将定义好的饼图的数据加入到一个数组里面