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>
相关推荐
徊忆羽菲22 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃32 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想1 小时前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷1 小时前
TypeScript-webpack
javascript·webpack·typescript
Rockson1 小时前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹3 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志3 小时前
typescript结构化类型应用两例
javascript
gnip4 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js