前言

關(guān)于本篇功能實現(xiàn)用到的 api 涉及類看不懂的，請參照 esri 官網(wǎng)的 arcgis api 3.x for js：esri 官網(wǎng) api，里面詳細(xì)的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網(wǎng)在線例子，這個也是學(xué)習(xí) arcgis api 3.x 的好素材。

本篇實現(xiàn)臺風(fēng)軌跡，截圖如下：

image

下面簡單介紹相關(guān)知識點

• 警戒線

  
  
  image

警戒線坐標(biāo)集合：

var lineArr24=[[127,34],[127,21],[110,15]];//24小時警戒線坐標(biāo)集合
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);

• 臺風(fēng)操作面板

  
  
  image

• 臺風(fēng)路徑符號

  
  
  image

  點符號 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);

• 扇形風(fēng)圈

  
  
  image

  核心部分代碼：

/**地圖顯示臺風(fēng)路徑信息
     * @param  ｛array｝ ｛array｝｛string｝
     * 臺風(fēng)路徑，預(yù)報路徑，臺風(fēng)編號
     */
    showTyphoonTMap: function (trackData, ybTrack, tfbh) {
        var typhoonLayer = BX.typhoon.addGraphicsLayer('tf_' + tfbh);//新增臺風(fēng)信息圖層
        var trackLayer = BX.typhoon.addGraphicsLayer('track_' + tfbh);//新增臺風(fēng)路徑圖層;
        var ybTraclLayer = BX.typhoon.addGraphicsLayer('YB_' + tfbh);//新增臺風(fēng)路徑圖層;
        var sevenFQ_EN;//東北七級風(fēng)圈
        var sevenFQ_ES;//東南七級風(fēng)圈
        var sevenFQ_WN;//西北七級風(fēng)圈
        var sevenFQ_WS;//西南七級風(fēng)圈
        var tenFQ_EN;//東北十級風(fēng)圈
        var tenFQ_ES;//東南十級風(fēng)圈
        var tenFQ_WN;//西北十級風(fēng)圈
        var tenFQ_WS;//西南十級風(fēng)圈
        var TFQ;//臺風(fēng)圈
        var TfTrackLine;//臺風(fēng)路線
        var TFPoint;//臺風(fēng)路線點
        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 = [];//預(yù)報路徑
        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);
……
……

更多的詳情見：GIS之家小專欄
對本專欄感興趣的話，可以關(guān)注一波

GIS之家作品：GIS之家
GIS之家源碼咨詢：咨詢模式