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();
                }
            }
        }
    }
}