【Cesium开发实战】火灾疏散功能的实现，可设置火源点、疏散路径、疏散人数

Cesium有很多很强大的功能，可以在地球上实现很多炫酷的3D效果。今天给大家分享一个可自定义的火灾疏散人群的功能。

1.话不多说，先展示

2.设计思路

根据项目需求要求，可设置火源点、绘制逃生路线、可设置逃生人数。所以点击火灾点绘制后，在地图点击可看到火光的粒子效果。点击疏散路径绘制后，在地图上点击可以绘制路径，双击结束绘制，一个火灾点会有多条疏散路径，可再次同样步骤操作绘制路径，点击保存可编辑名称和设定每条路径疏散的人数数量形成列表数据，点击开始疏散，通过czml数据格式实现疏散动画效果。

3.具体代码

<template><div class="page"><el-button @click="drawStartPosition">火灾点绘制</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)">开始疏散</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="请输入" /></el-form-item><el-form-item label="疏散路线人数"><el-input-number :min="0" v-model="form.people" placeholder="请输入" /></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: '请输入疏散名称', trigger: 'blur' },
};// 视图名称
const form = reactive({title: '',people: 20,
});// 视点列表数据
const dataList: any = reactive([]);/*** 点击表格一行*/
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),},});}}
};//是否开始绘制火灾点
const drawing = ref(false);
var firePointEntity: any = [];
var firePrimitiveEntity: any = [];
//绘制火灾起点
const drawStartPosition = () => {drawing.value = true;var handler2 = new Cesium.ScreenSpaceEventHandler(props.viewer.scene.canvas);//鼠标左键handler2.setInputAction(function (event: any) {if (drawing.value) {var earthPosition = props.viewer.scene.pickPosition(event.position);if (Cesium.defined(earthPosition)) {//将笛卡尔坐标转化为经纬度坐标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),});//存储火灾点点位对象到集合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);//存储火灾点图像对象到集合firePrimitiveEntity.push(firePrimitive);//移除左键监听handler2.destroy();// 确保视角没有被锁定  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
}// 弧度转角度
const toDegrees = (radians: any) => {return (radians * 180) / Math.PI;
};//是否开始绘制火灾点
const drawingLine = ref(false);
var listEntities: any = [];
//绘制的所有地面的点线实体集合
var entities: any = [];
//临时一条数据的point实体列表
var pointEntities: any = [];
//临时一条数据的线实体列表
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);//鼠标左键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); //绘制动态图//线实体集合linesEntities.push(activeShape);}activeShapePoints.push(earthPosition);//点实体集合pointEntities.push(createPoint(earthPosition));}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//鼠标移动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();}//移除监听handler.destroy();// 确保视角没有被锁定  props.viewer.trackedEntity = undefined;}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
};//绘制点
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;
};//双击后处理数据
const terminateShape = () => {linesEntities.push(drawShape(activeShapePoints)); //绘制最终图//因双击会触发俩次单机事件，去除最后一个点重复绘制，并删除多余的点props.viewer.entities.remove(pointEntities[pointEntities.length - 1]);pointEntities.pop();props.viewer.entities.remove(floatingPoint); //去除动态点图形（当前鼠标点）props.viewer.entities.remove(activeShape); //去除动态图形floatingPoint = undefined;activeShape = undefined;activeShapePoints = [];//点实体和线实体的集合entities.push({pointEntities: pointEntities,linesEntities: linesEntities,});pointEntities = [];linesEntities = [];
};//保存火灾点和疏散路径
var customMarks: any = [];
const save = () => {dialogFormVisible.value = true; //弹出对话框
}/*** 点击确定绘制*/
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});//设置为空对象以便创建新的列表数据firePointEntity = [];firePrimitiveEntity = [];entities = [];dialogFormVisible.value = false;form.title = '';}
};/*** 删除列表数据*/
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;//开始疏散
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 转换为 Date 对象  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('无法从 ISO 8601 字符串解析日期');}}}}//清除上次数据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(() => {//清除绘制的内容props.viewer.entities.removeAll();//绘制了火灾点切换的时候需要先清除if (firePrimitiveEntity.length) {for (const item of firePrimitiveEntity) {props.viewer.scene.primitives.remove(item);}}//绘制了多个火灾点并保存到了列表上离开时清除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>