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