arcgis for js 3.X绘制雷达扫描效果

ゝ一纸荒年。 2022-12-01 03:49 261阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]

思路：  
1、雷达刻度比较复杂，可以预先发布成图层，绘制时再调出来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]

2、雷达扫描效果，可由多条半径组成一个扇形  
3、半径线条由起始角度（扫描方向中居于前）到截止角度，逐渐透明  
4、利用定时器定期刷新，角度向前递增，绘制前先清除上一步骤的绘制结果

代码：

var _lines = [];//线条存储器
    var _sAngle = 0,_eAngle = 0;//起始角度。开始都为0
    var _timer;
    	
    function go(lon,lat){ 
    	var layer = getLayer("radar1");//构造一张graphics图层，用于绘制
    	var p0 = lngLatToXY([lon,lat]);//雷达站坐标，转换成平面坐标系，作为绘制的圆心。
    	var offAngle = 0.50;//角度步长。0.50意味着每度圆弧对应2条半径
    	var offAngTotal = 75;//扫描扇形夹角
    	var offColor = (0.3 / offAngTotal) * offAngle;//透明度步长;0.3是最前面线条的透明度
    	var lineWidth = 8 * offAngle;//线条宽度
    
    	function scan() { 
    		//清掉现有线条
    		for(var i in _lines){ 
    			layer.remove(_lines[i]);
    		}
    		_lines = [];
    
    		//记录转动角度
    		_sAngle++;
    		if((_sAngle - _eAngle) > offAngTotal )  _eAngle = _sAngle - offAngTotal;
    
    		//画上新线条
    		for(var i = _eAngle,j = 0;i < _sAngle;i += offAngle,j+=offColor){ 
    			var p = getPoint(p0,i);
    			//r,g,b,a;a,alpha，代表透明度，0为完全透明，1为完全不透明
    			var color = new Color([16, 222, 14, j]);
    			var line = getLine(color,lineWidth,p0,p);
    			layer.add(line);
    			_lines.push(line);
    		}
    
    		_timer = setTimeout(function(){ 
    			scan();
    		},25);
    	}
    	scan();
    }
    function getLine(color,lineWidth,p1,p2){ //绘制一条半径
    	//构造笔
    	var sls = new SimpleLineSymbol(
    		SimpleLineSymbol.STYLE_SOLID,
    		color,
    		lineWidth
    	);
    	//画线
    	var polyline = new esri.geometry.Polyline({ 
    		"paths": [[p1,p2]],
    		"spatialReference": _map.spatialReference
    	});
    	return new esri.Graphic(polyline, sls);
    }
    function getPoint(center, angle) { //获得圆弧上的点（平面坐标）
    	var radius = 42 * 1000;//雷达扫描范围为42千米；转换为米
    
    	var sin = Math.sin(angle * Math.PI / 180);
    	var cos = Math.cos(angle * Math.PI / 180);
    
    	var x = center[0] + radius * sin;
    	var y = center[1] + radius * cos;
    
    	return [x, y];
    }
    function getLayer(id) { //获取绘制图层
    	var layer = new GraphicsLayer({  "id": id });
    	map.addLayer(layer);
    
    	return layer;
    }
    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];
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2faec94432ec43e6b6d8a56d394fd65c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/24a651e78939424dbe12e548ec804c08.png

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter 雷达扫描效果、Flutter旋转扫描

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就

拼搏现实的明天。/ 2023年10月07日 15:31/ 0 赞/ 13 阅读

相关 arcgis for js 3.x 绘制海流

如图所示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

秒速五厘米/ 2023年02月18日 11:51/ 0 赞/ 10 阅读

相关 arcgis for js 3.X利用symbol设置svgpath绘制符号

如题所示，arcgis for js利用symbol设置svgpath绘制符号。先贴出绘制结果，有个感性认识： ![在这里插入图片描述][watermark_type_

秒速五厘米/ 2023年02月14日 01:19/ 0 赞/ 30 阅读

相关 arcgis for js 3.X绘制雷达扫描效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一纸荒年。/ 2022年12月01日 03:49/ 0 赞/ 262 阅读

相关 cesium雷达扫描

1.根据第一点、距离、角度计算第二点 function secPoint(jd, wd, radius, heading){ let m = Cesi

川长思鸟来/ 2022年09月09日 06:03/ 0 赞/ 266 阅读

相关 Android 雷达扫描动画效果实现

在新浪微博上有一个雷达功能，感觉类似于微信附近的人。只是多了一个类似于雷达扫描效果的动画，某些知名安全软件也有这样的雷达效果，因此在这里学习一下。首先看一下效果图，有个整体

超、凢脫俗/ 2022年07月27日 15:57/ 0 赞/ 27 阅读

相关 Qt绘制雷达图（效果图）

效果图如下： ![在这里插入图片描述][20190227171837116.gif] 原理：自定义控件，并使用QPainter等绘制。雷达图主要包括的

心已赠人/ 2022年03月16日 11:16/ 2 赞/ 956 阅读

相关 Qt实现的雷达扫描效果(QPainter)

【写在前面】本篇实际上是接上一篇的。本来上一篇中在 QML 中使用 Canvas 实现了类似的效果，但是，不仅性能非常差，而且在我的电脑上偶尔还会崩溃，很烦，所以决

柔情只为你懂/ 2022年02月16日 11:57/ 0 赞/ 560 阅读

相关 [cesium] 绘制雷达扫描

效果 ![20200727175443955.gif][] 实现片元着色器 let fs = "uniform sampler2D colorText

﹏ヽ暗。殇╰゛Y/ 2021年12月10日 11:43/ 0 赞/ 1964 阅读

相关 [cesium] 卫星扫描 + 地面雷达 + 实时通信过境效果

学习cesium时看到github有一个可视化卫星轨道的项目，闲着没事模拟了一下可是效果。做的比较简陋。更多在线效果：[在线地址][Link 1] gis用户效果图

悠悠/ 2021年11月05日 05:48/ 0 赞/ 646 阅读