cesium加载魔方立方体

 cesium加载多个小立方体，组合拼成一个大立方体。

地理坐标拼合的大立方体有错位问题。必须进行坐标转换。

 

<template>
	<div class="map">
		<div id="mapContainer" ref="mapContainer" class="map-container"></div>
		<div class="map-other">
			<Steps progress-dot :current="currentVal" @change="changeStepsEvt">
				<Step title="1"></Step>
				<Step title="2"></Step>
				<Step title="3"></Step>
				<Step title="4"></Step>
			</Steps>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Steps, Step } from 'ant-design-vue';
import * as THREE from 'three';
import { log } from 'console';
const currentVal = ref(0);
const win: AnyObject = window;
const Cesium = win.Cesium;
let viewer: any,
	cubeEntity: any = {};
let count = 0;
const init = () => {
	viewer = new Cesium.Viewer('mapContainer', {
		animation: false, //动画小部件
		baseLayerPicker: false, //地图图层组件
		infoBox: false, //信息框
		selectionIndicator: false, //选取指示器组件
	});
	// 获取CreditDisplay实例
	let creditDisplay = viewer.scene.frameState.creditDisplay;

	// 隐藏所有logo
	creditDisplay.show = false;
	// 立方体的边长
	const cubeSize = 100.0; // 100米边长

	// 第一个立方体的位置（成都经纬度，100米高度）
	const longitude = 104.0668;
	const latitude = 30.5728;
	const height = 100;
	const position1 = Cesium.Cartesian3.fromDegrees(
		longitude,
		latitude,
		height,
	);

	// 将地理坐标转换为局部坐标系
	const ellipsoid = viewer.scene.globe.ellipsoid;
	const origin = Cesium.Transforms.eastNorthUpToFixedFrame(
		position1,
		ellipsoid,
	);

	for (let i = 0; i < 3; i++) {
		for (let j = 0; j < 3; j++) {
			for (let k = 0; k < 3; k++) {
				const offset = new Cesium.Cartesian3(
					cubeSize * i,
					cubeSize * j,
					cubeSize * k,
				); // 在X轴上偏移
				const position = Cesium.Matrix4.multiplyByPoint(
					origin,
					offset,
					new Cesium.Cartesian3(),
				);
				cubeEntity[count] = viewer.entities.add({
					name: `Cube-${i}-${j}-${k}`,
					position: position,
					box: {
						dimensions: new Cesium.Cartesian3(
							cubeSize,
							cubeSize,
							cubeSize,
						),
						// material: Cesium.Color.fromRandom({ alpha: 1 }), // 半透明的蓝色
						material: Cesium.Color.fromBytes(177, 0, 4, 200), // 半透明的蓝色
						outline: true,
						outlineColor: Cesium.Color.WHITE,
						outlineWidth: 2,
					},
				});
				count++;
			}
		}
	}

	// 将视角调整到立方体的中心
	// viewer.zoomTo(viewer.entities);

	viewer.camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(104.0658, 30.5682, 1200), // 目标位置和高度
		orientation: {
			heading: Cesium.Math.toRadians(30), // 相机航向角
			pitch: Cesium.Math.toRadians(-60), // 相机俯仰角
			roll: Cesium.Math.toRadians(0), // 相机滚转角
		},
		duration: 1, // 飞行持续时间（秒）
	});
};
onMounted(() => {
	init();
});
const colorList = [
	{
		color: Cesium.Color.fromBytes(177, 0, 4, 200),
	},
	{
		color: Cesium.Color.fromBytes(0, 206, 209, 200),
	},
	{
		color: Cesium.Color.fromBytes(106, 90, 205, 200),
	},
	{
		color: Cesium.Color.fromBytes(255, 255, 0, 100),
	},
];
const changeStepsEvt = (current) => {
	currentVal.value = current;
	for (let i = 0; i < count; i++) {
		cubeEntity[i].box.material = colorList[currentVal.value].color;
	}
};
setInterval(() => {
	currentVal.value++;
	if (currentVal.value >= 4) {
		currentVal.value = 0;
	}
	for (let i = 0; i < count; i++) {
		cubeEntity[i].box.material = colorList[currentVal.value].color;
	}
}, 3000);
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>