Cesium可视域分析

客官°小女子只卖身不卖艺 2023-03-01 05:53 3阅读 0赞

继续开始Cesium的学习之旅。

### 文章目录 ###

*  一、简介
 *  二、代码实现
 *   *  2.1相关参数
     *  2.2实现过程

# 一、简介 #

> 因为也没查到关于可视域分析的明确定义，所以就按自己的话来说一下了。对三维空间而言，可视域分析就是指在某种场景下，基于某一个观察点，以一定的水平视角、垂直视角以及指定的视域范围等信息，来分析得到该区域所有通视点集合的过程。

简单来讲，可视域分析就像人的眼睛看东西一样，我们站在某一点，朝着一个方向看去，能看到的东西就是我们所得到的通视点集合。

# 二、代码实现 #

## 2.1相关参数 ##

构建方式：

new Cesium.ViewShed3D(scene)

![在这里插入图片描述][20200722191427647.png]

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

## 2.2实现过程 ##

1、创建相关的实例，并添加图层。

2、创建可视域分析对象，实现可视域分析。

//实现可视域分析功能
    	$('#loadingbar').remove();      //删除进度条
    	$("#toolbar").show();       //显示工具条
    	if (!scene.pickPositionSupported) {      //判断是否支持选择深度位置
    	    alert('不支持深度纹理,可视域分析功能无法使用（无法添加观测）！');
    	}
    	
    	// 先将此标记置为true，不激活鼠标移动事件中对可视域分析对象的操作
    	scene.viewFlag = true;
    	//创建绘制处理器对象，支持栅格化面对象的绘制，(容器对象，绘制模式(点、线、面),绘制风格)
    	var pointHandler = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
    	
    	// 创建可视域分析对象
    	var viewshed3D = new Cesium.ViewShed3D(scene);
    	
    	document.getElementById("chooseView").onclick = function () {    //通过DOM构造来获取chooseView控件
    	    if (pointHandler.active) { 
    	        return;
    	    }
    	    //先清除之前的可视域分析
    	    viewer.entities.removeAll();
    	    viewshed3D.distance = 0.1;
    	    scene.viewFlag = true;
    	
    	    //激活绘制点类
    	    pointHandler.activate();
    	};
    	
    	pointHandler.drawEvt.addEventListener(function (result) {        //绘制完成事件,监听绘制完成的事件，获取当前绘制结果
    	    var point = result.object;
    	    var position = point.position;
    	
    	    // 将获取的点的位置转化成经纬度
    	    var cartographic = Cesium.Cartographic.fromCartesian(position);
    	    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
    	    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
    	    var height = cartographic.height + 1.8;		//将观测点的高度向上移动1.8米，类似于人眼睛的位置
    	
    	    if (scene.viewFlag) { 
    	        // 设置视口位置
    	        viewshed3D.viewPosition = [longitude, latitude, height];
    	        viewshed3D.direction=0;
    	        viewshed3D.distance=100;
    	        viewshed3D.hiddenAreaColor=Cesium.Color.BLUEVIOLET;
    	        viewshed3D.hintLineColor=Cesium.Color.BLUE;
    	        viewshed3D.visibleAreaColor=Cesium.Color.AQUA;
    	        viewshed3D.horizontalFov=90;
    	        viewshed3D.pitch=0;
    	        viewshed3D.verticalFov=90;
    	
    	        viewshed3D.build();
    	        // 将标记置为false以激活鼠标移动回调里面的设置可视域操作
    	        scene.viewFlag = false;
    	    }
    	});
    	$("#clear").on("click", function () { 
    	    viewer.entities.removeAll();
    	    viewshed3D.distance = 0.1;      //无法直接清除viewshed3D对象，所以选择将其视域半径置为0.1
    	    scene.viewFlag = true;
    	    pointHandler.clear();
    	})

实现效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RheXVoYWl0YW5nMQ_size_16_color_FFFFFF_t_70 1]

> 参考资料：[http://support.supermap.com.cn:8090/webgl/examples/editor.html\#viewshed3D][http_support.supermap.com.cn_8090_webgl_examples_editor.html_viewshed3D]  
> 注：上面所说的可视域分析功能，是使用了超图公司基于Cesium框架二次封装之后的API，所以官方的Cesium API中可能会没有文中提到的一些相关的API函数，如果有兴趣的话可以到超图官网上下载相应的Cesium包就可以使用了。

[20200722191427647.png]: /images/20230209/bfba04a4a6d343978a6da4f0d99e562a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RheXVoYWl0YW5nMQ_size_16_color_FFFFFF_t_70]: /images/20230209/fd4765acac944cd6b9670b2fb0569897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RheXVoYWl0YW5nMQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/1c987192acab4204b1be687fd6221f8a.png
[http_support.supermap.com.cn_8090_webgl_examples_editor.html_viewshed3D]: http://support.supermap.com.cn:8090/webgl/examples/editor.html#viewshed3D