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>
相关推荐
liangshanbo12152 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
Never_Satisfied2 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果2 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
rechol3 小时前
类与对象(中)笔记整理
java·javascript·笔记
Luffe船长3 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
仲夏幻境4 小时前
js利用ajax同步调用如何
开发语言·javascript·ajax
鹿鹿鹿鹿isNotDefined4 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者4 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
一米八二的矮个子4 小时前
JavaScript语法进阶(一)
javascript
liyi_hz20084 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件