cesium加载魔方立方体

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

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

javascript 复制代码
<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>
相关推荐
SteveJrong1 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~1 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
一个处女座的程序猿O(∩_∩)O3 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
还是大剑师兰特3 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生3 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569153 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
非凡ghost4 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost4 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost4 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端
麦麦大数据4 小时前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理