天天看点

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

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

思路:

1、雷达刻度比较复杂,可以预先发布成图层,绘制时再调出来

arcgis for js 3.X绘制雷达扫描效果
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];
}