前言
关于本篇功能实现用到的 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);tenFQ_WN = new esri.Graphic();tenFQ_WN.setSymbol(T_Symbol);typhoonLayer.add(tenFQ_WN);tenFQ_WS = new esri.Graphic();tenFQ_WS.setSymbol(T_Symbol);typhoonLayer.add(tenFQ_WS);TFQ = new esri.Graphic();var TFQ_Symbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + 'Content/images/weather/typhoon.png', 40, 40)TFQ.setSymbol(TFQ_Symbol);typhoonLayer.add(TFQ);var trackLine = new esri.geometry.Polyline(BX.typhoon.map.spatialReference);var Line_symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([30, 144, 255]), 1);var chinaTrack = [];//预报路径for (var i = 0; i < ybTrack.length; i++) {var data = ybTrack[i];chinaTrack.push(data);}BX.typhoon.ybData = BX.typhoon.groupByDate(chinaTrack);var playI = 0;var trackPaths = [];BX.typhoon.inteval = setInterval(function () {var point = new esri.geometry.Point(trackData[playI].JD, trackData[playI].WD, BX.typhoon.map.spatialReference);var symbol = BX.typhoon.getSymbol(trackData[playI].ZXFS);TFPoint = new esri.Graphic(point, symbol, trackData[playI]);TFPoint.id = 'tf_point';typhoonLayer.add(TFPoint);TFQ.setGeometry(point);sevenFQ_EN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].EN7Radii * 1000, 0, 90, 30)],"spatialReference": BX.typhoon.map.spatialReference}));sevenFQ_ES.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].ES7Radii * 1000, 90, 180, 30)],"spatialReference": BX.typhoon.map.spatialReference}));sevenFQ_WN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].WN7Radii * 1000, 270, 360, 30)],"spatialReference": BX.typhoon.map.spatialReference}));sevenFQ_WS.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].WS7Radii * 1000, 180, 270, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_EN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].EN10Radii * 1000, 0, 90, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_ES.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].ES10Radii * 1000, 90, 180, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_WN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].WN10Radii * 1000, 270, 360, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_WS.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([point.x, point.y], trackData[playI].WS10Radii * 1000, 180, 270, 30)],"spatialReference": BX.typhoon.map.spatialReference}));if (playI == 0) {BX.typhoon.map.centerAt(point);}if (playI < trackData.length - 1) {var point1 = new esri.geometry.Point(trackData[playI + 1].JD, trackData[playI + 1].WD, BX.typhoon.map.spatialReference);trackPaths.push(point);trackPaths.push(point1);trackLine.addPath(trackPaths);TfTrackLine = new esri.Graphic(trackLine, Line_symbol);trackLayer.add(TfTrackLine);playI++;} else {BX.typhoon.map.centerAt(point);clearInterval(BX.typhoon.inteval);}BX.typhoon.drawForecastTrack(trackData[playI], BX.typhoon.ybData, ybTraclLayer);}, 1000);//**********************************台风点点击事件注册开始********************************//typhoonLayer.on("click", function (e) {var graphic = e.graphic;if (graphic.id == 'tf_point') {var RADIUS7 = graphic.attributes.RADIUS7;var RADIUS10 = graphic.attributes.RADIUS10;TFQ.setGeometry(graphic.geometry);//************************风圈位置设定开始**********************************//sevenFQ_EN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.EN7Radii * 1000, 0, 90, 30)],"spatialReference": BX.typhoon.map.spatialReference}));sevenFQ_ES.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.ES7Radii * 1000, 90, 180, 30)],"spatialReference": BX.typhoon.map.spatialReference}));sevenFQ_WN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.WN7Radii * 1000, 270, 360, 30)],"spatialReference": BX.typhoon.map.spatialReference}));sevenFQ_WS.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.WS7Radii * 1000, 180, 270, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_EN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.EN10Radii * 1000, 0, 90, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_ES.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.ES10Radii * 1000, 90, 180, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_WN.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.WN10Radii * 1000, 270, 360, 30)],"spatialReference": BX.typhoon.map.spatialReference}));tenFQ_WS.setGeometry(new esri.geometry.Polygon({"rings": [BX.typhoon.getPoints([graphic.geometry.x, graphic.geometry.y], graphic.attributes.WS10Radii * 1000, 180, 270, 30)],"spatialReference": BX.typhoon.map.spatialReference}));//*******************************风圈位置设定结束***********************************************//BX.typhoon.map.centerAt(graphic.geometry);var data = graphic.attributes;var ybTrackLayer = BX.typhoon.getGraphicLayer("YB_" + data.TFBH);BX.typhoon.drawForecastTrack(data, BX.typhoon.ybData, ybTrackLayer)}});
/**绘制扇形风圈*@params {中心点} {半径} {起始角度} {结束角度} {点数} **/getPoints: function (center, radius, startAngle, endAngle, pointNum) {var sin;var cos;var x;var y;var angle;var points = new Array();points.push(center);for (var i = 0; i <= pointNum; i++) {angle = startAngle + (endAngle - startAngle) * i / pointNum;sin = Math.sin(angle * Math.PI / 180);cos = Math.cos(angle * Math.PI / 180);x = center[0] + radius * sin;y = center[1] + radius * cos;points[i] = [x, y];}var point = points;point.push(center);return point;},
