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;// 隐藏所有logocreditDisplay.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>