Cesium有很多很強(qiáng)大的功能，可以在地球上實(shí)現(xiàn)很多炫酷的3D效果。今天給大家分享一個(gè)可自定義的火災(zāi)疏散人群的功能。

1.話不多說(shuō)，先展示

2.設(shè)計(jì)思路

根據(jù)項(xiàng)目需求要求，可設(shè)置火源點(diǎn)、繪制逃生路線、可設(shè)置逃生人數(shù)。所以點(diǎn)擊火災(zāi)點(diǎn)繪制后，在地圖點(diǎn)擊可看到火光的粒子效果。點(diǎn)擊疏散路徑繪制后，在地圖上點(diǎn)擊可以繪制路徑，雙擊結(jié)束繪制，一個(gè)火災(zāi)點(diǎn)會(huì)有多條疏散路徑，可再次同樣步驟操作繪制路徑，點(diǎn)擊保存可編輯名稱和設(shè)定每條路徑疏散的人數(shù)數(shù)量形成列表數(shù)據(jù)，點(diǎn)擊開(kāi)始疏散，通過(guò)czml數(shù)據(jù)格式實(shí)現(xiàn)疏散動(dòng)畫(huà)效果。

3.具體代碼

<template><div class="page"><el-button @click="drawStartPosition">火災(zāi)點(diǎn)繪制</el-button><el-button @click="drawLineRoad">疏散路徑繪制</el-button><el-button @click="save">保存</el-button><div style="margin-top: 10px"><el-table :data="dataList" border @row-click="rowClick"><el-table-column prop="name" label="名稱" align="center" /><el-table-column label="操作" align="center"><template #default="scope"><el-button type="primary" style="width: 50px;"@click="startShus(scope.row, scope.$index)">開(kāi)始疏散</el-button><el-button link type="primary" size="small" @click="delEntity(scope.row, scope.$index)"><el-icon:size="16"><ele-Delete /> </el-icon></el-button></template></el-table-column></el-table></div><el-dialog v-model="dialogFormVisible" title="配置" width="500" :close-on-press-escape="false":close-on-click-modal="false" :show-close="false"><el-form ref="formRef" :model="form" label-width="auto" class="demo-dynamic" :rules="rules"><el-form-item label="疏散名稱" prop="title"><el-input v-model="form.title" placeholder="請(qǐng)輸入" /></el-form-item><el-form-item label="疏散路線人數(shù)"><el-input-number :min="0" v-model="form.people" placeholder="請(qǐng)輸入" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitForm(formRef)"> 確定 </el-button></div></template></el-dialog></div>
</template><script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { Cesium } from '/@/utils/cesium';
const props = defineProps(['viewer']);//是否顯示彈框
const dialogFormVisible = ref(false);const formRef = ref();var entities: any = {};const rules = {title: { required: true, message: '請(qǐng)輸入疏散名稱', trigger: 'blur' },
};// 視圖名稱
const form = reactive({title: '',people: 20,
});// 視點(diǎn)列表數(shù)據(jù)
const dataList: any = reactive([]);/*** 點(diǎn)擊表格一行*/
const rowClick = (row: any, column: any, event: Event) => {if (column && column.property) {let index = dataList.findIndex((v: any) => v.id === row.id);if (index !== -1) {props.viewer.flyTo(listEntities[index].entities[0].pointEntities[0], {offset: {heading: Cesium.Math.toRadians(10.0114629015290062),pitch: Cesium.Math.toRadians(-23.53661660731824),roll: Cesium.Math.toRadians(0.00324596311071617),},});}}
};//是否開(kāi)始繪制火災(zāi)點(diǎn)
const drawing = ref(false);
var firePointEntity: any = [];
var firePrimitiveEntity: any = [];
//繪制火災(zāi)起點(diǎn)
const drawStartPosition = () => {drawing.value = true;var handler2 = new Cesium.ScreenSpaceEventHandler(props.viewer.scene.canvas);//鼠標(biāo)左鍵handler2.setInputAction(function (event: any) {if (drawing.value) {var earthPosition = props.viewer.scene.pickPosition(event.position);if (Cesium.defined(earthPosition)) {//將笛卡爾坐標(biāo)轉(zhuǎn)化為經(jīng)緯度坐標(biāo)var cartographic = Cesium.Cartographic.fromCartesian(earthPosition);var longitude = Cesium.Math.toDegrees(cartographic.longitude);var latitude = Cesium.Math.toDegrees(cartographic.latitude);var height = cartographic.height;var entity44 = props.viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),});//存儲(chǔ)火災(zāi)點(diǎn)點(diǎn)位對(duì)象到集合firePointEntity.push(entity44);var firePrimitive = new Cesium.ParticleSystem({image: '/src/assets/cesium/fire.png',startColor: Cesium.Color.RED.withAlpha(0.7),endColor: Cesium.Color.YELLOW.withAlpha(0.3),startScale: 0,endScale: 10,minimumParticleLife: 1,maximumParticleLife: 6,minimumSpeed: 1,maximumSpeed: 4,imageSize: new Cesium.Cartesian2(55, 55),// Particles per second.emissionRate: 4,lifetime: 160.0,emitter: new Cesium.CircleEmitter(5.0),modelMatrix: computeModelMatrix(entity44, Cesium.JulianDate.now()),emitterModelMatrix: computeEmitterModelMatrix()});props.viewer.scene.primitives.add(firePrimitive);//存儲(chǔ)火災(zāi)點(diǎn)圖像對(duì)象到集合firePrimitiveEntity.push(firePrimitive);//移除左鍵監(jiān)聽(tīng)handler2.destroy();// 確保視角沒(méi)有被鎖定  props.viewer.trackedEntity = undefined;}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}const computeModelMatrix = (entity: any, time: any) => {var position = entity.position.getValue(Cesium.JulianDate.now());let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);return modelMatrix;
}
const computeEmitterModelMatrix = () => {let hpr = Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0);let trs = new Cesium.TranslationRotationScale();trs.translation = Cesium.Cartesian3.fromElements(2.5, 4, 1);trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);let result = Cesium.Matrix4.fromTranslationRotationScale(trs);return result
}// 弧度轉(zhuǎn)角度
const toDegrees = (radians: any) => {return (radians * 180) / Math.PI;
};//是否開(kāi)始繪制火災(zāi)點(diǎn)
const drawingLine = ref(false);
var listEntities: any = [];
//繪制的所有地面的點(diǎn)線實(shí)體集合
var entities: any = [];
//臨時(shí)一條數(shù)據(jù)的point實(shí)體列表
var pointEntities: any = [];
//臨時(shí)一條數(shù)據(jù)的線實(shí)體列表
var linesEntities: any = [];
var activeShapePoints: any = [];
var floatingPoint: any = undefined;
var activeShape: any = undefined;
//繪制線路
const drawLineRoad = () => {drawingLine.value = true;var handler = new Cesium.ScreenSpaceEventHandler(props.viewer.scene.canvas);//鼠標(biāo)左鍵handler.setInputAction(function (event: any) {if (drawingLine.value) {var earthPosition = props.viewer.scene.pickPosition(event.position);if (Cesium.defined(earthPosition)) {if (activeShapePoints.length === 0) {floatingPoint = createPoint(earthPosition);activeShapePoints.push(earthPosition);var dynamicPositions = new Cesium.CallbackProperty(function () {return activeShapePoints;}, false);activeShape = drawShape(dynamicPositions); //繪制動(dòng)態(tài)圖//線實(shí)體集合linesEntities.push(activeShape);}activeShapePoints.push(earthPosition);//點(diǎn)實(shí)體集合pointEntities.push(createPoint(earthPosition));}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//鼠標(biāo)移動(dòng)handler.setInputAction(function (event: any) {if (Cesium.defined(floatingPoint)) {var newPosition = props.viewer.scene.pickPosition(event.endPosition);if (Cesium.defined(newPosition)) {floatingPoint.position.setValue(newPosition);activeShapePoints.pop();activeShapePoints.push(newPosition);}}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(function () {if (drawingLine.value) {drawingLine.value = false;terminateShape();}//移除監(jiān)聽(tīng)handler.destroy();// 確保視角沒(méi)有被鎖定  props.viewer.trackedEntity = undefined;}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
};//繪制點(diǎn)
const createPoint = (worldPosition: any) => {var point = props.viewer.entities.add({position: worldPosition,point: {color: Cesium.Color.RED,pixelSize: 10,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},});return point;
};//繪制線
const drawShape = (positionData: any) => {var shape = props.viewer.entities.add({polyline: {with: 10,color: Cesium.Color.RED,positions: positionData,clampToGround: true,},});return shape;
};//雙擊后處理數(shù)據(jù)
const terminateShape = () => {linesEntities.push(drawShape(activeShapePoints)); //繪制最終圖//因雙擊會(huì)觸發(fā)倆次單機(jī)事件，去除最后一個(gè)點(diǎn)重復(fù)繪制，并刪除多余的點(diǎn)props.viewer.entities.remove(pointEntities[pointEntities.length - 1]);pointEntities.pop();props.viewer.entities.remove(floatingPoint); //去除動(dòng)態(tài)點(diǎn)圖形（當(dāng)前鼠標(biāo)點(diǎn)）props.viewer.entities.remove(activeShape); //去除動(dòng)態(tài)圖形floatingPoint = undefined;activeShape = undefined;activeShapePoints = [];//點(diǎn)實(shí)體和線實(shí)體的集合entities.push({pointEntities: pointEntities,linesEntities: linesEntities,});pointEntities = [];linesEntities = [];
};//保存火災(zāi)點(diǎn)和疏散路徑
var customMarks: any = [];
const save = () => {dialogFormVisible.value = true; //彈出對(duì)話框
}/*** 點(diǎn)擊確定繪制*/
const submitForm = async (formEl: any) => {const valid = await formEl.validate();if (valid) {listEntities.push({firePointEntity: firePointEntity,firePrimitiveEntity: firePrimitiveEntity,entities: entities});dataList.push({id: new Date().getTime(),name: form.title,people:form.people});//設(shè)置為空對(duì)象以便創(chuàng)建新的列表數(shù)據(jù)firePointEntity = [];firePrimitiveEntity = [];entities = [];dialogFormVisible.value = false;form.title = '';}
};/*** 刪除列表數(shù)據(jù)*/
const delEntity = (item: any, index: number) => {for (const item of listEntities[index].firePointEntity) {props.viewer.entities.remove(item);}for (const item of listEntities[index].firePrimitiveEntity) {props.viewer.scene.primitives.remove(item);}for (const iterator of listEntities[index].entities) {for (const item of iterator.pointEntities) {props.viewer.entities.remove(item);}for (const item of iterator.linesEntities) {props.viewer.entities.remove(item);}}dataList.splice(index, 1);listEntities.splice(index, 1);if (obj) {props.viewer.dataSources.remove(obj);obj = null;}};var obj: any;//開(kāi)始疏散
const startShus = (item: any, index: number) => {var czml: any = [];czml.push({"id": "document","name": "CZML Path","version": "1.0"});var entities = listEntities[index].entities;var peopleNum = item.people;if (entities.length) {for (const [index2, item2] of entities.entries()) {customMarks = [];for (const [index, item] of item2.pointEntities.entries()) {const latitude = toDegrees(Cesium.Cartographic.fromCartesian(item.position._value).latitude);const longitude = toDegrees(Cesium.Cartographic.fromCartesian(item.position._value).longitude);customMarks.push((1 * index));customMarks.push(longitude);customMarks.push(latitude);customMarks.push(2);}for (let i = 0; i < peopleNum; ++i) {var iso8601DateString = '2024-07-04T10:00:00Z';var julianDate = Cesium.JulianDate.fromIso8601(iso8601DateString);if (Cesium.defined(julianDate)) {var newJulianDate = Cesium.JulianDate.addSeconds(julianDate, i * 0.5, new Cesium.JulianDate());// 如果你需要將 JulianDate 轉(zhuǎn)換為 Date 對(duì)象  var date = Cesium.JulianDate.toDate(newJulianDate);czml.push({"id": "path" + index2 + i,"name": "路徑" + index2 + i,"availability": "2024-07-04T10:00:00.000Z/2024-07-04T10:01:00.000Z","model": {id: 'man',gltf: '/src/assets/cesium/Cesium_Man.glb',scale: 10},"position": {"epoch": date.toISOString(),"cartographicDegrees": customMarks}});} else {console.error('無(wú)法從 ISO 8601 字符串解析日期');}}}}//清除上次數(shù)據(jù)props.viewer.dataSources.remove(obj);obj = null;//加載本次疏散czmlprops.viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function (loadedDataSource) {obj = loadedDataSource;var entities = loadedDataSource.entities.values;for (var i = 0; i < entities.length; i++) {var s = entities[i];s.orientation = new Cesium.VelocityOrientationProperty(s.position);}})}onMounted(() => {
});onUnmounted(() => {//清除繪制的內(nèi)容props.viewer.entities.removeAll();//繪制了火災(zāi)點(diǎn)切換的時(shí)候需要先清除if (firePrimitiveEntity.length) {for (const item of firePrimitiveEntity) {props.viewer.scene.primitives.remove(item);}}//繪制了多個(gè)火災(zāi)點(diǎn)并保存到了列表上離開(kāi)時(shí)清除for (const iterator of listEntities) {for (const item of iterator.firePrimitiveEntity) {props.viewer.scene.primitives.remove(item);}}if (obj) {props.viewer.dataSources.remove(obj);obj = null;}});
</script><style scoped>
.page {position: absolute;right: 10px;top: 10px;color: #fff;background: #fff;padding: 10px;border-radius: 5px;width: 400px;
}
</style>