一、可视域分析简介

        可视域分析师计算从某点出发的视线在一定的视角范围内能通视的区域。本文实现了水平视角的可视域分析，支持视角范围的动态绘制，效果如下：

二、程序思路

        本文的程序思路如下：首先确定视点位置，然后确定视野终点（即确定了可视距离）。可视角度为45°至135°，计算视野范围内每隔1°的视野终点，视点依次连接即为可视范围。

三、完整代码

3.1 鼠标事件

//添加鼠标左键处理事件
var frustrumLabel = undefined; //可视域分析中的鼠标提示
var viewPointFlag = false; //是否选择了视点
var pickPositions = []; //被选中的点的坐标
var boardLines = []; //可视区域边界线
var pickPoints = []; //被选中的点
var activeLine; //视野方向线
function setBuildFrustrumHandler(flag){
  if(flag){
    handler.setInputAction(function (event) {
      const earthPosition = viewer.scene.pickPosition(event.position);
      // `earthPosition` will be undefined if our mouse is not over the globe.
      if (Cesium.defined(earthPosition)) {
          pickPoints.push(createPoint(earthPosition));
          if(pickPositions.length > 1){
            //进行可视化分析
            //先清除边界线
            for(let i=0;i<boardLines.length;++i){
              viewer.entities.remove(boardLines[i]);
            }
            frustrumLabel.label.text = "可视域分析中...";
            //分析完毕清除鼠标事件
            setBuildFrustrumHandler(false);
            //进行可视域分析
            viewAreaAnalysis(45,pickPositions[0],pickPositions[1]);
          }
          pickPositions.push(earthPosition);
          viewPointFlag = true;
          const dynamicPositions = new Cesium.CallbackProperty(function () {
            return pickPositions;
          }, false);
          pickPositions.push(earthPosition);
          activeLine = drawLine(dynamicPositions,Cesium.Color.WHITE,Cesium.Color.WHITE);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //添加鼠标移动处理事件
    handler.setInputAction(function (event) {
      const newPosition = viewer.scene.pickPosition(event.endPosition);
      if (Cesium.defined(newPosition)) {
        if(frustrumLabel == undefined){
          frustrumLabel = createLabel(newPosition,"点击选择视点");
        }
        else{
            frustrumLabel.position = newPosition;
            if(viewPointFlag == true){
              frustrumLabel.label.text = "点击视线方向";
              pickPositions.pop();
              pickPositions.push(newPosition);
              if(boardLines.length>1){
                for(let i=0;i<boardLines.length;++i){
                  viewer.entities.remove(boardLines[i]);
                }
              }
              //构建可视区域
              if(pickPositions.length>1){
                boardLines = drawSector(pickPositions[0],pickPositions[1]);
              }
            }
        }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  }else{
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
}

3.2 构建视野范围

//求扇形可视区域的两条边界线(视野范围)
function drawSector(startPoint,endPoint){
  let lines = [];
  let leftLine = rotateLine(Cesium.Math.toRadians(45),startPoint,endPoint);
  let rightLine = rotateLine(Cesium.Math.toRadians(-45),startPoint,endPoint);
  lines.push(leftLine);
  lines.push(rightLine);
  return lines;
}

//画出某条直线段绕起点逆时针旋转radian(弧度)后的线段
function rotateLine(radian,startPoint,endPoint){
  let position_Cartesian3 = rotatePoint(radian,startPoint,endPoint);
  let LinePoints = [];
  LinePoints.push(startPoint);
  LinePoints.push(position_Cartesian3);
  let line = drawLine(LinePoints,new Cesium.PolylineDashMaterialProperty({color:Cesium.Color.YELLOW}),Cesium.Color.YELLOW);
  return line;
}

//计算某一点绕另一点旋转radian后的终点坐标
function rotatePoint(radian,startPoint,endPoint){
  let startCartographic  = Cesium.Cartographic.fromCartesian(startPoint); //起点经纬度坐标
  let endCartographic = Cesium.Cartographic.fromCartesian(endPoint); //终点经纬度坐标
  //初始化投影坐标系
  /*假设对图片上任意点a，绕一个坐标点o逆时针旋转angle角度后的新的坐标点b，有公式：
  b.x = ( a.x - o.x)*cos(angle) - (a.y - o.y)*sin(angle) + o.x
  b.y = (a.x - o.x)*sin(angle) + (a.y - o.y)*cos(angle) + o.y*/
  let webMercatorProjection = new Cesium.WebMercatorProjection(viewer.scene.globe.ellipsoid);
  let startMercator = webMercatorProjection.project(startCartographic); //起点墨卡托坐标
  let endMercator = webMercatorProjection.project(endCartographic); //终点墨卡托坐标
  //左边界线墨卡托坐标
  let position_Mercator = new Cesium.Cartesian3((endMercator.x-startMercator.x)*Math.cos(radian)-(endMercator.y-startMercator.y)*Math.sin(radian)+startMercator.x,
  (endMercator.x-startMercator.x)*Math.sin(radian)+(endMercator.y-startMercator.y)*Math.cos(radian)+startMercator.y,startMercator.z);
  //左边界线经纬度坐标
  let position_Cartographic = webMercatorProjection.unproject(position_Mercator);
  //左边界线笛卡尔空间直角坐标
  let position_Cartesian3 = Cesium.Cartographic.toCartesian(position_Cartographic.clone());
  return position_Cartesian3
}
//绘制线
function drawLine(positionData,material,depthFailMaterial)
{
    let shape;
    shape = viewer.entities.add({
      polyline: {
        positions: positionData,
        arcType : Cesium.ArcType.NONE,
        width: 5,
        material: material,
        depthFailMaterial: depthFailMaterial, //被地形遮挡部分的颜色
      },
    });
    return shape;
}

3.3 可视化分析

//可视化分析
function viewAreaAnalysis(degree,startPoint,endPoint){
  for(let i=-degree;i<=degree;++i){
    let radian = Cesium.Math.toRadians(i); //角度转弧度
    let destPoint = rotatePoint(radian,startPoint,endPoint);
    getIntersectPoint(startPoint,destPoint);
  }
  viewer.entities.remove(frustrumLabel);
  viewer.entities.remove(activeLine);
  pickPositions = [];
  for(let i=0;i<pickPoints.length;++i){
    viewer.entities.remove(pickPoints[i]);
  }
  pickPoints = [];
}

//计算两点连成的直线段与地形/建筑的交点，并绘制可视线
function getIntersectPoint(startPoint,endPoint)
{
  //计算两点连线的方向
  let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(endPoint,startPoint,new Cesium.Cartesian3()),new Cesium.Cartesian3());
  //建立射线
  let ray = new Cesium.Ray(startPoint,direction);
  //计算相交点，注意，这里的相交点有可能比终点更远
  let result = viewer.scene.pickFromRay(ray);
  if(Cesium.defined(result)){
    let intesectPosition = result.position;
    //判断相交点是否比终点更远
    if(distanceBetweenTwoPoints(startPoint,endPoint)>distanceBetweenTwoPoints(intesectPosition,startPoint))
    {
      drawLine([startPoint,result.position],Cesium.Color.GREEN,Cesium.Color.GREEN);
      drawLine([result.position,endPoint],Cesium.Color.RED,Cesium.Color.RED);
    }else{
      drawLine([startPoint,endPoint],Cesium.Color.GREEN,Cesium.Color.GREEN);
    }
  }else{
    drawLine([startPoint,endPoint],Cesium.Color.GREEN,Cesium.Color.GREEN);
  }
}

//可视化分析（鼠标点击“可视域分析”按钮的响应事件）
window.viewAreaAnalysis = function(){
  viewer.entities.removeAll();
  pickPositions = [];
  boardLines = [];
  frustrumLabel = undefined;
  viewPointFlag = false;
  setBuildFrustrumHandler(true);
}

3.4 html代码

<div style="display: inline;"><button id="viewArea" class="cesium-button" onclick="viewAreaAnalysis();">可视域分析</button></div>