2021-04-01

Cesium 测距

连续绘制点，测量每段的距离，右键清除前面绘制的所有，重新开始绘制
本来

// 绘制形状（本来想直接在polyline里面直接添加个label的，但是不显示，所以就独立创建了一个label实体）
var shapeEntities = [],// 存放所有绘制的实体
	pointPositionArr = []; // 存放点的位置
var handler;

// 绘制形状
function drawShape(shapeType, shapePosition, labelText) {
	let shape;
	if (shapeType == 'point') {
		shape = viewer.entities.add({
			position: shapePosition,
			billboard: {
				image: '../../images/position.png',
				verticalOrigin: Cesium.VerticalOrigin.BOTTOM
			}
		})
	} else if (shapeType == 'line') {
		shape = viewer.entities.add({
			polyline: {
				positions: shapePosition,
				clampToGround: true,
				material: Cesium.Color.LIME,
				width: 3
			}
		})
	} else if (shapeType == 'label') {
		shape = viewer.entities.add({
			position: shapePosition,
			label: {
				text: labelText,
				font: '1.3em monospace',
				style: Cesium.LabelStyle.FILL_AND_OUTLINE,
				fillColor: Cesium.Color.fromCssColorString('#EE0000'),
				backgroundColor: Cesium.Color.DARKGREY,
				showBackground: true,
				pixelOffset: new Cesium.Cartesian2(5, -30)
			}
		})
	}
	return shape;
}
// 将笛卡尔坐标转换为经纬度 
function Cartesian3_to_WGS84(position) {
	let c3 = new Cesium.Cartesian3(position.x, position.y, position.z);
	let cartographic = Cesium.Cartographic.fromCartesian(c3);
	let lon = Cesium.Math.toDegrees(cartographic.longitude);
	let lat = Cesium.Math.toDegrees(cartographic.latitude);
	let alt = cartographic.height;
	return { lon: lon, lat: lat, alt: alt };
}
// 测距
function measureDistance() {
	handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
	// 左键单击
	handler.setInputAction(event => {
		let clickPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.global.ellipsoid);
		if (Cesium.defined(clickPosition)) {
			pointPositionArr.push(clickPosition); // 存入点的位置
			let createPointShape = drawShape('point', clickPosition, ''); // 绘制点
			shapeEntities.push(createPointShape); // 将绘制的点存入数组
			if (pointPositionArr.length > 1) {
				// 存放点位置的数组中至少存在两个点
				let startPosition = pointPositionArr[pointPositionArr.length - 2]; // 线段前一个点的位置（笛卡尔坐标）
				let endPosition = pointPositionArr[pointPositionArr.length -1]; // 线段后一个点的位置（笛卡尔坐标）
				// 将笛卡尔坐标转化为经纬度
				let startPositionZH = Cartesian3_to_WGS84(startPosition);
				let endPositionZH = Cartesian3_to_WGS84(endPosition);
				// 传入两个点，用来计算点间距离及标签放置的位置
				let geodesic = new Cesium.EllipsoidGeodesic();
				geodesic.setEndPoints(Cesium.Cartographic.fromDegrees(startPositionZH.lon, startPositionZH.lat), Cesium.Cartographic.fromDegrees(endPositionZH.lon, endPositionZH.lat));
				let distance = (geodesic.surface / 1000).toFixed(6) + '公里'; // 计算填入标签的距离内容
				// 计算标签位置
				let midpointCartographic = geodesic.interpolateUsingFraction(0.5, new Cesium.Cartographic());
				let middle = Cesium.Cartesian3.fromRadians(midpoinCarographic.longtitude, midPointCartographic.latitude, 0);
				let createLineShape = drawShape('line', [startPosition, endPosition], ''); // 绘制线段
				let createLabelShape = drawShape('label', middle, distance); // 绘制标签
				shapeEntities.push(createLineShape);
				shapeEntities.push(createLabelShape);
			}
		}
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	// 右键清除位置点数组及绘制的形状
	handler.setInputAction(event => {
		pointPositionArr = [];
		shapeEntities(shape => {
			viewer.entities.remove(shape);
		})
	}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}