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

ゝ一纸荒年。 2022-12-01 03:49 246阅读 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 条评论，246人围观）

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

相关阅读

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

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

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

相关 cesium雷达扫描

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

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

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

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

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

相关 ArcGIS API for JavaScript——绘制工具（Draw）

ArcGIS API for JavaScript——绘制工具（Draw） -------------------- > 在WEB GIS开发过程中，我们不可避免的会用

迈不过友情╰/ 2022年06月16日 10:44/ 0 赞/ 693 阅读

相关 arcgis for jsapi 4.10绘制热力图

arcgis for jsapi 从 3 变到 4 之后，变化巨大，原先网络上的许多例子，好像都过时了。比如echart与arcgis结合，都是for 3.x的,4时代就不行了

谁借莪１个温暖的怀抱￠/ 2022年03月20日 14:56/ 0 赞/ 278 阅读

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

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

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

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

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

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

相关 [cesium] 绘制雷达扫描

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

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

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

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

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

相关 arcgis for js 空气泡问题

前端展示地图，点击里面的对象，弹出气泡是标配。问题是，现在点击空白的地方也会弹出气泡，气泡里啥都没有，只有一句冷冰冰的句子：“无任何可用信息”。既然是无任何可用信息，那你还弹出

朴灿烈づ我的快乐病毒、/ 2021年11月04日 10:24/ 0 赞/ 244 阅读