arcgis for js如何画台风风圈

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]);
		}
	}
}

2019.08.11
所谓画台风风圈,其实就是画一个多边形,一个可能有4个锯齿,近似圆形的多边形。

怎么画多边形呢?无非就是将一些点连成封闭的面而已。所以关键是要得到这些点的坐标。

本文例子中,是二维地图,因此我们要求得的是点的平面坐标。台风数据里面,有风眼坐标,风圈半径。其中风眼坐标是经纬度,换言之,是球面坐标。所以要做转换,将风眼坐标转换成平面坐标,然后求得风圈点集合。再将风圈点集合生成一个多边形。

/* 以下示例用arcgis for jsapi 3.19 */
var polygon = new esri.geometry.Polygon(_map.spatialReference);//使用平面坐标系构造一个多边形
polygon.addRing(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;

function getPoints(center, cradius, startAngle) {//获得组成风圈的点(平面坐标)
    var radius = cradius * 1000;//转换为米
    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]);
    }
}
function lngLatToXY(pt){//经纬度转化为平面坐标
    var _f = 6378137, _p = 0.017453292519943;
    var lng = pt[0];//经度
    var lat = pt[1];//纬度

    if (lat > 89.999999){
        lat = 89.999999;
    }
    else if (lat < -89.999999){
        lat = -89.999999;
    }
    var c = lat * _p;
    x = lng * _p * _f;
    y = _f / 2 * Math.log((1 + Math.sin(c)) / (1 - Math.sin(c)));

    return [x,y];
}
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页