Cesium通视分析

通视分析是什么呢?就是将起点和终点连成一条线,判断这条线与场景之间是否有交点,如果有交点,就返回第一个交点,起点——交点创建绿polyline实体,交点——终点创建红色实体,绿线为可视区域,红线为不可视区域,效果如下图
Cesium通视分析_第1张图片
首先我们把模型加载到地图上

//模型数据加载位置
	var modelposition = Cesium.Cartesian3.fromDegrees(obj.position[0], obj.position[1], obj.position[2]);
	var heading = Cesium.Math.toRadians(obj.heading);
	var pitch = Cesium.Math.toRadians(obj.pitch);
	var roll = Cesium.Math.toRadians(obj.roll);
	var hpRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
	var converter = Cesium.Transforms.eastNorthUpToFixedFrame;
	var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(modelposition, hpRoll, Cesium.Ellipsoid.WGS84, converter);
	tsdyt_model = viewer.scene.primitives.add(
		new Cesium.Cesium3DTileset({
			url: "http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json",
		})
	);
	tsdyt_model.readyPromise.then(function (tsdyt_model) {
		//请求模型后执行
		tsdyt_model._root.transform = modelMatrix; //模型位置
	}).otherwise(function (error) {
		throw error
	})
	viewer.zoomTo(tsdyt_model)

然后创建一个场景监听事件并添加点实体

	var CesiumEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
	var positions = [];
	var markers = [];//点实体
	CesiumEventHandler.setInputAction(function (movement) {
		var cartesian = viewer.scene.pickPosition(movement.position);
		if (cartesian) {
			positions.push(cartesian);//加点
			if (markers.length == 0) {
				//创建点实体
				var startpoint = viewer.entities.add({
					position: cartesian,
					billboard: {
						image: obj.startpointStyle.image,
						heightReference: Cesium.HeightReference.NONE
					},
					label: {
						text: obj.startpointStyle.text,
						fillColor: Cesium.Color.YELLOW,
						pixelOffset: {
							x: obj.startpointStyle.pixelOffsetX,
							y: obj.startpointStyle.pixelOffsetY
						},
						scale: obj.startpointStyle.scale
					}
				});
				markers.push(startpoint);
			}
			else if (markers.length == 1) {
				var endpoint = viewer.entities.add({
					position: cartesian,
					billboard: {
						image: obj.endpointStyle.image,
						heightReference: Cesium.HeightReference.NONE
					},
					label: {
						text: obj.endpointStyle.text,
						fillColor: Cesium.Color.YELLOW,
						pixelOffset: {
							x: obj.endpointStyle.pixelOffsetX,
							y: obj.endpointStyle.pixelOffsetY
						},
						scale: obj.endpointStyle.scale
					}
				});
				markers.push(endpoint);
				CesiumEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除左键事件
				analysisVisible(positions);//开始分析
			}
		}
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

开始进行分析

// * 进行通视分析
	function analysisVisible(positions) {
		// 计算射线的方向
		let direction = Cesium.Cartesian3.normalize(
			Cesium.Cartesian3.subtract(
				positions[1],
				positions[0],
				new Cesium.Cartesian3()
			),
			new Cesium.Cartesian3()
		);
		// 建立射线
		let ray = new Cesium.Ray(positions[0], direction);
		// 计算交互点,返回第一个
		let result = viewer.scene.pickFromRay(ray);
		// console.log(result)
		if (Cesium.defined(result) && Cesium.defined(result.object)) {
			drawLine(result.position, positions[0], Cesium.Color.GREEN); // 可视区域 
			drawLine(result.position, positions[1], Cesium.Color.RED); // 不可视区域
		}
		else {
			drawLine(positions[0], positions[1], Cesium.Color.GREEN);
			console.log("不在模型上")
		}
	}
// * 绘制线
	function drawLine(leftPoint, secPoint, color) {
		var Lines = viewer.entities.add({
			polyline: {
				positions: [leftPoint, secPoint],
				width: 2,
				material: color,
				depthFailMaterial: color
			}
		});
	}

你可能感兴趣的:(Cesium,前端,前端)