【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;
//加载本次疏散czml
props.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>
原文地址：https://blog.csdn.net/qq_34512796/article/details/140314080
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！