ArcGIS API for Flex 教程 - 图文 

{ }

map.infoWindow.content = m_image;map.infoWindow.label = cb.selectedItem.label;georss.url = cb.selectedItem.url;

georss.georssFunction = cb.selectedItem.georssFunction;

load_clickHandler()函数实现很简单，只是把combox中选中的GeoRSS的url和回调函数的名字赋值给georss对象。

其中回调函数的定义如下：

private function rsoe(

arrcol: A rrayCollection, x: X ML ): v oid {

const geometry : Geometry = GeoRSSUtil.toGeometry(x); constg raphic: G raphic= n ewG raphic(g eometry,s ms1); graphic.toolTip= x .description; arrcol.addItem(g raphic) ; }

arrcol : ArrayCollection为返回参数，带回解析后的graphic。x : XML为传入参数，传入需要解析的xml。

不同来源的GeoRSS回调函数实现是不同的，但参数必须保持一致。最后定义一个:GraphicsLayer对象，把georss.result绑定到GraphicsLayer的graphicProvider属性上。

完整例子可以在samples/2.5里找到。

三高级篇

3.1 WebService的使用

Flex本身对webservices有着良好的支持，我们可以调用互联网上的各种webservices来结合ESRI的map做出自己想要的东西。

下面以在地图上显示天气预报为例，介绍Flex中调用webservices。首先，找到提供天气预报的webservices：

26

http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?然后，使用 标签定义一个WebService对象：

wsdl=\showBusyCursor=\

id唯一标识webservice，wsdl指向提供webservice的地址。

在Application创建完成的时候调用这个 webservice，得到结果后直接显示到map上。

在标签的creationComplete事件绑定Init()方法：

creationComplete=\

使用ActionScript脚本实现Init()方法：

privatefunction Init():void{

weatherWS.addEventListener(ResultEvent.RESULT, WSGetWeatherResult); weatherWS.getWeatherbyCityName(\武汉\); }

在Init()方法中首先添加WebService调用后ResultEvent的Listener，结果返回后响应

WSGetWeatherResult

方法。然后调用

WebService

的

getWeatherbyCityName方法去取天气预报的数据。

getWeatherbyCityName方法是下面webservice提供的方法：http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?下面实现WSGetWeatherResult方法，用来读取得到的天气预报数据并进行处理。

privatefunction WSGetWeatherResult(event:ResultEvent):void{

weatherWS.removeEventListener(ResultEvent.RESULT,WSGetWeatherResult);var arrC:ArrayCollection =event.resultas ArrayCollection;if(arrC.length > 0) {

var str:String = arrC.getItemAt(0).toString();var str2:String = arrC.getItemAt(1).toString();var vbox :VBox =new VBox();var vbox2 :VBox =new VBox();var hbox :HBox =new HBox();var canvas:Canvas =new Canvas();var path:String =\;var img1 :Image =new Image;

27

var index1 :int =new int(arrC.getItemAt(8).toLocaleString());

img1.load(picArray[index1]); hbox.addChild(img1);

var img2 :Image =new Image;

var index2 :int =new int(arrC.getItemAt(9).toLocaleString());

img2.load(picArray[index2]); hbox.addChild(img2);

var txtTem :Text =new Text();

txtTem.text = arrC.getItemAt(5).toString();

var txtWea :Text =new Text();

txtWea.text= arrC.getItemAt(6).toString();

var txtWind :Text =new Text();

txtWind.text= arrC.getItemAt(7).toString(); vbox.addChild(txtTem); vbox.addChild(txtWea); vbox.addChild(txtWind); vbox2.addChild(hbox); vbox2.addChild(vbox); canvas.addChild(vbox2);

myMap.infoWindow.content= c anvas;

var mapPnt2:MapPoint =new MapPoint(114.31,30.52);

myMap.infoWindow.show(mapPnt2); } }

在上面函数中把得到的天气预报数据进行解析，把对应的天气图片，气温等信息分类整理，使用infoWindow显示出来。

完整例子可以在samples/3.1下面找到。

3.2 ESRI Tilemap四叉树索引研究

注：这里仅限于讨论下面地址提供的tilemap服务：

http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer。

因为ESRI提供了cache map功能，用户可以自己定义图片的大小和切割方式。

ESRI Tilemap四叉树索引和google map的四叉树索引是有区别的，区别在于google map在第一次分幅的时候分为4片，但esri tilemap只分为2片，相当于在第三和第四象限没有图。只有（0,0）(0,1)的时候才有图，这就造成了google map

28

和ESRI Tilemap融合的时候比较复杂，不能使用相同的分幅方法。

在下面的例子里，实现了根据显示级别（nzoom），以及经纬度取ArcGISOnline服务器上对应的图片。图片是512*512的。这个算法是用ActionScript来实现的，也可以用其他语言去实现。

算法的核心思想是通过经纬度算出其在nzoom level上所对应的图片的索引，然后拼成url去服务器端取数据。

url的拼接规则为：

\D/MapServer/tile/\

其中nZoom为显示级别，15>nZoom>=0，yIndex为当前经纬度对应的图片的Y方向索引, xIndex为当前经纬度对应的图片的X方向索引。

算法流程：

1将X轴下移90个单位，保证第一次分幅只能分成2幅。2使用四叉树编码的方式对当前(X,Y)坐标解析。

3对四叉树编码进行解析，得到当前坐标对应图片的索引值。

算法实现为：

privatefunction GetTileXY(nZoom:int,mp:Point):Point {

var wx:Number;var wy:Number;var cx:Number;var cy:Number;

var xArray:Array =new Array();var yArray:Array =new Array();

cx= 0; cy = -90; wx = wy = 180;

var i:int = 0;var x:int = 0;var y:int = 0;

for (i = 0; i <= nZoom; i++)

{

if (mp.x >= cx)

{

if (mp.y >= cy)

{

29

xArray.push(1); yArray.push(0);

cx+=wx/2;

cy += wy/2; }

else

{

xArray.push(1); yArray.push(1);

cx+=wx/2;

cy -= wy/2; } }

else

{

if (mp.y < cy)

{

xArray.push(0); yArray.push(1);

cx-=wx/2;

cy -= wy/2;

} else

{

xArray.push(0); yArray.push(0); cx-=wx/2; cy += wy/2; } } wx = wx/2; wy = wy/2; }

for(i = nZoom;i >=0;i--)

{ x = x+xArray[i]*Math.pow(2,nZoom-i); y = y+yArray[i]*Math.pow(2,nZoom-i); }

var pnt :Point =new Point(x,y);return pnt;

}

完整例子可以在samples/3.2目录下找到。

30