arcgis api 3.x for js 入門開發系列十五台風軌跡

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 3.x 的好素材。

本篇實現台風軌跡，截圖如下：

下面簡單介紹相關知識點

• 警戒線
  

警戒線坐標集合：

var lineArr24=[[127,34],[127,21],[110,15]];//24小時警戒線坐標集合
var lineArr48=[[132,34],[132,15],[105,0]];//48小時警戒線集合

線符號樣式 SimpleLineSymbol：

var symbol24 = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1);
var symbol48 = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOTDOT, new dojo.Color([255,255,153]), 1);

• 台風操作面板
  

• 台風路徑符號
  
  點符號 PictureMarkerSymbol：

var TFQ_Symbol=new esri.symbol.PictureMarkerSymbol(getRootPath()+'content/images/weather/typhoon.png', 40, 40)

線符號 SimpleLineSymbol：

var T_Symbol=new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([255, 165, 0]), 0.01), new dojo.Color([255,20,147, 0.35]));
var Line_symbol= new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOTDOT, new dojo.Color([255,215,0]), 1);

• 扇形風圈
  
  核心部分代碼：

/**地圖顯示台風路徑信息
* @param ｛array｝ ｛array｝｛string｝
* 台風路徑，預報路徑，台風編號
*/
showTyphoonTMap: function (trackData, ybTrack, tfbh) {
var typhoonLayer = BX.typhoon.addGraphicsLayer('tf_' + tfbh);//新增台風信息圖層
var trackLayer = BX.typhoon.addGraphicsLayer('track_' + tfbh);//新增台風路徑圖層;
var ybTraclLayer = BX.typhoon.addGraphicsLayer('YB_' + tfbh);//新增台風路徑圖層;
var sevenFQ_EN;//東北七級風圈
var sevenFQ_ES;//東南七級風圈
var sevenFQ_WN;//西北七級風圈
var sevenFQ_WS;//西南七級風圈
var tenFQ_EN;//東北十級風圈
var tenFQ_ES;//東南十級風圈
var tenFQ_WN;//西北十級風圈
var tenFQ_WS;//西南十級風圈
var TFQ;//台風圈
var TfTrackLine;//台風路線
var TFPoint;//台風路線點
var s_Symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([60, 179, 113]), 0.01), new dojo.Color([60, 179, 113, 0.35]));
 
sevenFQ_EN = new esri.Graphic();
sevenFQ_EN.setSymbol(s_Symbol);
typhoonLayer.add(sevenFQ_EN);
 
sevenFQ_ES = new esri.Graphic();
sevenFQ_ES.setSymbol(s_Symbol);
typhoonLayer.add(sevenFQ_ES);
 
sevenFQ_WN = new esri.Graphic();
sevenFQ_WN.setSymbol(s_Symbol);
typhoonLayer.add(sevenFQ_WN);
 
sevenFQ_WS = new esri.Graphic();
sevenFQ_WS.setSymbol(s_Symbol);
typhoonLayer.add(sevenFQ_WS);
 
var T_Symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 165, 0]), 0.01), new dojo.Color([255, 20, 147, 0.35]));
 
tenFQ_EN = new esri.Graphic();
tenFQ_EN.setSymbol(T_Symbol);
typhoonLayer.add(tenFQ_EN);
 
tenFQ_ES = new esri.Graphic();
tenFQ_ES.setSymbol(T_Symbol);
typhoonLayer.add(tenFQ_ES);
……
……

更多的詳情見：GIS之家小專欄

對本專欄感興趣的話，可以關注一波