360°全景影像数据流图和代码走读

传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229

1数据流图

2FlexViewer

2.1Navigation.mxml

路径：src/widgets/Navigation/Navigation.mxml

全景小人按钮，当鼠标点击时回调ShowQuanJing函数。

<s:Button  id="QuanJing" mouseDown="ShowQuanJing()" …>

添加鼠标弹起事件的监听，获取该事件交由onGetQuanJing函数处理。

private function ShowQuanJing():void
{
this.map.addEventListener(MouseEvent.MOUSE_UP, onGetQuanJing);
…
}

private function onGetQuanJing(event:MouseEvent):void
{
…
doQuery(m_center);
}

从ArcGIS Server检索出地图FeatureSet，解析其属性分派给QuanJingEvt.QUANJINGCHANGE事件处理。

private function doQuery(m_center:MapPoint):void
{
…
queryTask.execute(query, new AsyncResponder(onResult, onFault));
function onResult(featureSet:FeatureSet, token:Object = null):void
{
var arrayResult:Array =  featureSet.attributes;
var nMin:uint = 0;
var numTempResult:Number = 0.0;
var numMinDist:Number = Number.MAX_VALUE;
if(featureSet.attributes.length <= 0)
{
return;
}
for(var i:uint=0;i<featureSet.attributes.length;i++)
{
numTempResult = (m_center.x- Number(arrayResult[i].X.toString())) * (m_center.x- Number(arrayResult[i].X.toString()))
+ (m_center.y - Number(arrayResult[i].Y.toString()))*(m_center.y - Number(arrayResult[i].Y.toString()));
if(numMinDist > numTempResult)
{
numMinDist = numTempResult;
nMin = i;
}
}
var curID:String = arrayResult[nMin].FID;//"3";
var frontID:String = arrayResult[nMin].Front;//"2";
var backID:String = arrayResult[nMin].Back;//"4";
//imagepath = "http://localhost/GPSQuanJingJPG/"
var strImageInfo:String = curID + "&" + frontID +  "&" +backID + "&" + arrayResult[nMin].Name + "&" + arrayResult[nMin].X + "&" + arrayResult[nMin].Y;
var QuanJingEvtevent: QuanJingEvt = new QuanJingEvt("QUANJINGCHANGE",strImageInfo);
QuanJing.dispatchEvent(QuanJingEvtevent);
m_isQuanJing = true;
…
}
…
}

2.2index.mxml

路径：src/默认包/index.mxml

当组件完成其构建、属性处理、测量、布置和绘制时回调onInit函数。

<s:Application creationComplete="onInit()" …>

添加QuanJingEvt.QUANJINGCHANGE事件的监听，捕获该事件交由QuanJingChanged函数处理。

private function onInit():void
{
this.addEventListener(QuanJingEvt.QUANJINGCHANGE,QuanJingChanged,true);
}

接收QuanJingEvt.QUANJINGCHANGE事件为其参数，并将该事件的数据分派给AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET_OPEN_QUANJING事件处理。
private function QuanJingChanged(event:QuanJingEvt):void
{
var strEventData:String = event.strData;
…
AppEvent.dispatch(AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET_OPEN_QUANJING,strEventData);
}

2.3QuangJingMapComponent.mxml

路径：src/widgets/QuanJingMap/QuangJingMapComponent.mxml

当组件完成其构建、属性处理、测量、布置和绘制时回调onInit函数。

<s:BorderContainer id="viewBox" creationComplete="oninit()" backgroundAlpha="0" />

添加AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET_OPEN_QUANJING事件的监听，捕获该事件交由onOpenQuanJing函数处理。

private function oninit():void
{
…  AppEvent.addListener(AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET_OPEN_QUANJING, onOpenQuanJing);
}

private function onOpenQuanJing(event:AppEvent):void
{
var strImageInfo:String = event.data as String;
var strImageInfoList:Array = strImageInfo.split("&");
if(strImageInfoList == null || strImageInfoList.length <4)
return;
this._curID = strImageInfoList[0];
this._frontID = strImageInfoList[1];
this._backID = strImageInfoList[2];
// "http://localhost/GPSQuanJingJPG/posed_jpg000003.jpg";
var url:String = strImageInfoList[3];  AppEvent.removeListener(AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET_OPEN_QUANJING, onOpenQuanJing);
currentState == "maxed";
_TextureStrings = new Array(new Vector.<String>,new Vector.<String>);
// 一级切片
for(var i:int=0;i<8;i++)
{
var str:String = url + "_"+ i.toString();
_TextureStrings[0].push(str);
}
// 二级切片
for(i = 0;i<32;i++)
{
var str2:String  = url + "_"+ i.toString();
_TextureStrings[1].push(str2);
}
loaded[0] = false;
loaded[1] = false;

// 初始化away3d，将其加入全景地图组件根视图容器中
away = new AwayView();
this.viewBox.addElement(away);
addAway3D();
AddBtn();
AppEvent.addListener(AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET_OVERVIEW_QUANJING, OverViewChanged);
AppEvent.addListener(AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET_MAX_QUANJING, ChangeSizeMax);

_n = 0;
_loadStateQuanJing = "Loading";
// "http://localhost/GPSQuanJingJPG/posed_jpg000003_0.jpg";
Load(_TextureStrings[_zoonIn][_n]);
_loadStatePOI = "Loading";
LoadPOI(this._curID);
}

向WebService发送影像数据请求，并携带请求参数nodekey（切边表）和id（切片ID）。添加Event.COMPLETE事件的监听，捕获该事件交由onLoadImage函数处理。

private function Load(url:String):void
{
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onLoadImage);
// "http://localhost/QuanJingWebSerivices/GetQuanJingSlices.aspx?nodekey=1&id= posed_jpg000003_0"
url = imagepath + "GetQuanJingSlices.aspx?nodekey=" + (_zoonIn+1).toString() + "&id=" + url;
var urlReq:URLRequest = new URLRequest(url);
loader.load(urlReq);
}

接收Event.COMPLETE事件，并获取其对应URLLoader数据。为contentLoaderInfo添加Event.COMPLETE事件的监听，获取该事件交由onLoadComp函数处理。

private function onLoadImage(e:Event):void
{
var urlLoader:URLLoader = e.target as URLLoader;
var loader:Loader = new Loader();
loader.loadBytes(urlLoader.data);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComp, false, 0, true);
…
}

加载影像数据完毕后，使用away3d进行绘制。

private function onLoadComp(e:Event):void
{
var loader:Loader = LoaderInfo(e.target).loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoadComp);
if (!_textureDictionary[_TextureStrings[_zoonIn][_n]])
// 接收Event.COMPLETE事件对应数据，将其转换为位图纹理，存放在TextureDictionary中
_textureDictionary[_TextureStrings[_zoonIn][_n]] = Cast.bitmapTexture(e.target.content);
loader.unload();
loader = null;
// 从TextureDictionary构建纹理材质
var Material:TextureMaterial = new TextureMaterial(_textureDictionary[_TextureStrings[_zoonIn][_n]]);
Material.bothSides = true;
// 为全景实体设置材质
quanjin.setMaterial(_n,Material);
// 递增切片尾号，如果该级切片在存在其他尾号的图片，那么按升序依次加载并绘制它们。如：一级切片尾号为0-7，二级切片尾号为0-31
if ((++_n) < _TextureStrings[_zoonIn].length)
{
Load(_TextureStrings[_zoonIn][_n]);
}
else
{
_loadStateQuanJing = "Loaded";
loaded[_zoonIn] = true;
}
}

3QuanJingWebService

3.1GetQuanJingSlices.aspx.cs

public partial class GetQuanJingSlices : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.QueryString.Count == 2 && Request.QueryString["nodekey"] != null && Request.QueryString["id"] != null)
{
string strTableKey = Request.QueryString["nodekey"].ToString().Trim();
string strID = Request.QueryString["id"].ToString().Trim();
string strSQL = @"SELECT SLICE_ID
,SLICE_NAME
,PIC_ID
,ALPHA_MAX
,ALPHA_MIN
,BETA_MAX
,BETA_MIN
,Z_MAX
,Z_MIN
,SLICE_CONTENT
FROM PIC_SLICE_" + strTableKey + " where SLICE_ID = '" + strID + "'";
// FROM PIC_SLICE_1 where SLICE_ID = 'posed_jpg000003_0'"
DataTable dt = DBOperation.getDataTableFromSQL(strSQL);
if (dt != null && dt.Rows.Count > 0)
{
byte[] imageData = new byte[0];
// 获取影像源数据
imageData = (byte[])dt.Rows[0]["SLICE_CONTENT"];
Response.ContentType = "application/binary;";
// 将影像源数据写入到客户端FlexViewer
Response.BinaryWrite(imageData);
Response.Flush();
Response.End();
}
}
}
}
}