自己写的网站怎么发布,wordpress首页显示分类,wordpress不用邮件验证注册,云南医疗seo整站优化Cesium有很多很强大的功能#xff0c;可以在地球上实现很多炫酷的3D效果。今天给大家分享一个可自定义的火灾疏散人群的功能。
1.话不多说#xff0c;先展示 火灾疏散模拟 2.设计思路
根据项目需求要求#xff0c;可设置火源点、绘制逃生路线、可设置逃生人数。所以点击火…Cesium有很多很强大的功能可以在地球上实现很多炫酷的3D效果。今天给大家分享一个可自定义的火灾疏散人群的功能。
1.话不多说先展示 火灾疏散模拟 2.设计思路
根据项目需求要求可设置火源点、绘制逃生路线、可设置逃生人数。所以点击火灾点绘制后在地图点击可看到火光的粒子效果。点击疏散路径绘制后在地图上点击可以绘制路径双击结束绘制一个火灾点会有多条疏散路径可再次同样步骤操作绘制路径点击保存可编辑名称和设定每条路径疏散的人数数量形成列表数据点击开始疏散通过czml数据格式实现疏散动画效果。
3.具体代码
templatediv classpageel-button clickdrawStartPosition火灾点绘制/el-buttonel-button clickdrawLineRoad疏散路径绘制/el-buttonel-button clicksave保存/el-buttondiv stylemargin-top: 10pxel-table :datadataList border row-clickrowClickel-table-column propname label名称 aligncenter /el-table-column label操作 aligncentertemplate #defaultscopeel-button typeprimary stylewidth: 50px;clickstartShus(scope.row, scope.$index)开始疏散/el-buttonel-button link typeprimary sizesmall clickdelEntity(scope.row, scope.$index)el-icon:size16ele-Delete / /el-icon/el-button/template/el-table-column/el-table/divel-dialog v-modeldialogFormVisible title配置 width500 :close-on-press-escapefalse:close-on-click-modalfalse :show-closefalseel-form refformRef :modelform label-widthauto classdemo-dynamic :rulesrulesel-form-item label疏散名称 proptitleel-input v-modelform.title placeholder请输入 //el-form-itemel-form-item label疏散路线人数el-input-number :min0 v-modelform.people placeholder请输入 //el-form-item/el-formtemplate #footerdiv classdialog-footerel-button typeprimary clicksubmitForm(formRef) 确定 /el-button/div/template/el-dialog/div
/templatescript setup langts
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;}});
/scriptstyle scoped
.page {position: absolute;right: 10px;top: 10px;color: #fff;background: #fff;padding: 10px;border-radius: 5px;width: 400px;
}
/style
