arcgis api for js入门开发系列十五台风轨迹

Posted 2020-10-14 GIS之家

上一篇实现了demo的地图最近设施点路径分析，本篇新增台风轨迹，截图如下

前言

关于本篇功能实现用到的 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之家小专栏

对本专栏感兴趣的话，可以关注一波