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>