arcgis for js如何畫颱風風圈

標籤：alt   arc   .com   就是   box   圓心   imp   new   comment   

轉自：78984533#commentBox

arcgis for js裡面，畫一個圓不是什麼難事。小的可以用SimpleMarkerSymbol，"style": "esriSMSCircle"；
大的話，直接就來一個new Circle

但是，如果是類似颱風風圈這類的呢？

似圓非圓，該咋畫？
答案是畫多邊形。的風圈，正是3個多邊形。其實所謂的圓，不就是多邊形無限逼近的結果嗎？好像微積分裡有說到這個？

畫颱風風圈的原理如下：以圓心為原點，以正北方向為0度，順時針畫點，1度為1個點，並連成線，並最終回到正北方向，形成封閉的多邊形；然後再加以填充。由於颱風半徑分為東北、東南、西南、西北四個方向，每個方向距離圓心可能長度不一，於是就形成了有四個鋸齒狀的風圈。

代碼如下：

function getAirRing(c, center, index) {//風圈;level風力級數，center原點    var arColor;    switch (c.level) {        case 7: arColor = [83, 168, 113]; break;//7級風圈        case 10: arColor = [175, 192, 130]; break;        case 12: arColor = [185, 121, 96]; break;        default: arColor = [83, 168, 113]; break;    }    //算出所有的點    var points = new Array();    getPoints(center, c.EN, 0);//東北方向    getPoints(center, c.ES, 90);    getPoints(center, c.WS, 180);    getPoints(center, c.WN, 270);    points[points.length] = points[0];//首尾串連    //設定填充symbol    var bColor = arColor; bColor.push(0.5);//透明度    var sfl = new esri.symbol.SimpleFillSymbol(        esri.symbol.SimpleFillSymbol.STYLE_SOLID,        new esri.symbol.SimpleLineSymbol(            esri.symbol.SimpleLineSymbol.STYLE_SOLID,            new dojo.Color(arColor),            2        ),        new dojo.Color(bColor)    );    //將點連成多邊形    var polygon = new esri.geometry.Polygon(points);    //並填充，還附帶上各種風圈資料    var gr = new esri.Graphic(polygon, sfl,        {            "level": c.level, "wn": c.WN, "en": c.EN, "es": c.ES, "ws": c.WS,            "attrtype": "airRing", "index": index,        },        new esri.InfoTemplate("風圈:${level}", tplAirRing));    return gr;    //此方法照抄來的，1度1個點    function getPoints(center, cradius, startAngle) {        var radius = cradius / 100;         var pointNum = 90;        var endAngle = startAngle + 90;        var sin;        var cos;        var x;        var y;        var angle;        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.push([x, y]);        }    }}

 

arcgis for js如何畫颱風風圈