当前位置: 移动技术网 > IT编程>网页制作>HTML > Cesium可视域分析

Cesium可视域分析

2020年07月24日  | 移动技术网IT编程  | 我要评论

继续开始Cesium的学习之旅。

一、简介

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

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

二、代码实现

2.1相关参数

构建方式:

new Cesium.ViewShed3D(scene)

在这里插入图片描述

在这里插入图片描述

2.2实现过程

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

	var viewer = new Cesium.Viewer('cesiumContainer');	//创建容器
	viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
	    url: 'https://dev.virtualearth.net',
	    mapStyle: Cesium.BingMapsStyle.AERIAL,
	    key: URL_CONFIG.BING_MAP_KEY
	}));
	var scene = viewer.scene;
	scene.globe.depthTestAgainstTerrain = true;
	var camera = scene.camera;
	//添加S3M图层服务
	var promise = scene.open(URL_CONFIG.SCENE_NIAOCHAO);        //返回一个异步加载对象
	promise.then(function (layers) {        //使用这个异步加载对象执行加载图层的操作
	    camera.setView({
	        destination: Cesium.Cartesian3.fromDegrees(116.3801, 39.9874, 12.0),
	        orientation: {
	            heading: 6.260995919619558,
	            pitch: 0,
	            roll: 0
	        }
	    });
	});

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();
	})

实现效果:
在这里插入图片描述

参考资料:
注:上面所说的可视域分析功能,是使用了超图公司基于Cesium框架二次封装之后的API,所以官方的Cesium API中可能会没有文中提到的一些相关的API函数,如果有兴趣的话可以到超图官网上下载相应的Cesium包就可以使用了。

本文地址:https://blog.csdn.net/dayuhaitang1/article/details/107513754

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网