一、界面搭建

使用vue2+Cesium开源引擎开发；
UI组件使用iview、echarts等；

二、实现功能

2.1 可视化菜单：

2.1.1 移动平台运行轨迹

无人机飞行仿真

//加载无人机路径函数
startAnalyse() {if (drone) {drone.EndRoaming();console.log('delete drone')}let shpPath;if (this.droneForm.roadLines === 'uavlines') {shpPath = "static/shp/drone/uavline092301.shp";} else {shpPath = this.upLoadData}let position1 = Cesium.Cartesian3.fromDegrees(112.62,30.29,0);if(this.viewer.entities.getById('cugBuildings')){this.viewer.entities.removeById('cugBuildings')}let buildings = this.viewer.entities.add({id: 'cugBuildings',position: position1,model: {uri: "static/models/building_0.glb",minimumPixelSize: 1000,maximumScale: 2000,},});/* 加载线数据 */let ds6 = shpToGeojson(this.viewer,shpPath,[1.0, 0.0, 0.0, 1.0],"线",0.0,"polyline");let position;let velocity = parseInt(this.droneForm.velocity)let startPoint = parseInt(this.droneForm.startPoint)ds6.then((res) => {let dataSource = res[0];let polyline = res[1][0].polyline;position = polyline.positions._value;drone = new DroneRoaming(this.viewer, {name: "无人机1",pathColor: Cesium.Color.YELLOW,uri: `static/models/CesiumDrone.glb`,velocity: velocity, //km/hposition: position,startPoint: startPoint,startTime: this.droneForm.date1,dataSource: dataSource,sensorType:this.droneForm.sensorType,scanItem: [{type: "建筑物",lon: -112,lat: 30,sum: 85,},],});console.log(drone.startTime)console.log(this.droneForm.date1)});
},

卫星轨迹模拟

//卫星扫描
CalScan() {let arr = this.satForm.color.split("(")[1].split(")")[0].split(",");let r = parseFloat(arr[0]);let g = parseFloat(arr[1]);let b = parseFloat(arr[2]);let a = parseFloat(arr[3]);this.satModel.forEach((item) => {if (item.sat) {let sat1;item.sat.then(res => {if(this.viewer.entities.getById(res.name+'tri')){this.viewer.entities.removeById(res.name+'tri')}let ellipsoid = this.viewer.scene.globe.ellipsoid;sat1 = res.entities.getById(item.id);let time = this.viewer.clock.startTime;let posArr=this.timePositionChange(sat1,time,ellipsoid)//卫星开始时间的经纬度//扫描线let coordinates = [];let julian_start = Cesium.JulianDate.fromDate(this.satForm.startTime);let julian_end = Cesium.JulianDate.fromDate(this.satForm.endTime);for (let ind = 0; ind < 292; ind++) {let current = Cesium.JulianDate.addSeconds(julian_start, 300 * ind, new Cesium.JulianDate());if(Cesium.JulianDate.lessThanOrEquals(current,julian_end)){let LineArr=this.timePositionChange(sat1,current,ellipsoid)coordinates.push(...LineArr)}else{break;}}let yellowLine = this.viewer.entities.add({id: res.name,polyline: {positions:Cesium.Cartesian3.fromDegreesArray(coordinates),width: new Cesium.CallbackProperty(()=>{return this.satForm.triAngle/2},false),material: new Cesium.Color(r / 255, g / 255, b / 255, a),},});})}});
},

2.1.2 感知资源可视化

站点模型加载

三维模型（以综合监测站模型为例，加入雷达扫描效果）
二维站点（融合各种类型传感器进入三维场景，但高度还不太准确，有待优化）

上图为RFID原位传感器样例

上图为水位传感器样例

视频数据加载：
这里使用了纯前端空间体体积计算工具
DEJA_VU3D - Cesium功能集之 050-纯前端空间体体积计算－小专栏 (xiaozhuanlan.com)
目前只实现了普通的二维平面融合，后续准备继续尝试边缘模糊和纹理处理。进行三维融合。

//视频融合
setVideoFusion(){// 添加贴地的多边形，设置video为其材质this.videoShow =! this.videoShowthis.load3dTilesWL()this.initPoints()this.viewer.entities.add({position:Cesium.Cartesian3.fromDegrees(114.61360738763466,30.461423820341555,2.5),model:{uri : 'static/models/security_camera/scene.gltf', // 资源路径scale:0.001},orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(114.61360738763466,30.461423820341555,2.5),new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90),    Cesium.Math.toRadians(0),//俯仰角的值Cesium.Math.toRadians(0)//翻滚角)),})//创建实例绑定视频dom元素let videoElement = document.getElementById('trailer');//获得video对象this.viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([114.61360738763466,30.461423820341555,-4,114.61379802554978,30.46151654173604,-4,114.6138444472168,30.46138124628038,-4,114.61360738763466,30.461423820341555,-4,]),clampToGround: true,material: videoElement,classificationType: Cesium.ClassificationType.BOTH}});
},

2.1.3 感知过程可视化

卫星仿真覆盖时间轴
时间轴动态观测并生成覆盖区域

//加载时间轴
document.getElementById("ccanvas").innerHTML ="<canvas id='timeline' width='" +window.innerWidth * 0.85 +"'" +"height=" +80 +"'" +" style='cursor: pointer;background-color: rgba(17, 35, 70, 0.8);'></canvas>";
//align-self: flex-end; οndragstart='return false;'var alldatas = timecell;
this.cells = alldatas.map(function (i) {var r = new TimeCell(i);r.isCall = 0;return r;
});
this.TL = $("#timeline");
this.TL.TimeSlider({init_cells: alldatas,
});
this.TL.TimeSlider(this.AutomaticMode());
//设置时间轴的时间
var settime = (nativeTime, location) => {clearInterval(this.setTimeMove);this.__time = new Date(nativeTime).getTime();this.TL.TimeSlider("set_time_to_middle", this.__time);this.AutomaticMode();
};
//筛选标签
var filter_tag = (filters) => {clearInterval(this.setTimeMove);var tmpalldatas = new Array(filters.length);if (filters.length > 0) {tmpalldatas = alldatas.filter(function (i) {if (i.group != null && i.group.search(",") != -1) {var j;var len = i.group.split(",");for (j = 0; j < len.length; j++) {if (filters.split(",").indexOf(len[j]) >= 0) {return filters.split(",").indexOf(len[j]) >= 0;}}} else {return filters.split(",").indexOf(i.group) >= 0;}});} else {tmpalldatas = alldatas;}//重置时间轴this.TL.TimeSlider("init", this.__time, tmpalldatas);var tmpcells = tmpalldatas.map(function (i) {var r = new TimeCell(i);r.isCall = 0;return r;});//重置时间轴上的事件this.ValueChange(new Date(2020, 2, 18, 14, 23, 30, 0).getTime(), false);this.cells = tmpalldatas.map(function (i) {var r = new TimeCell(i);r.isCall = 0;return r;});this.AutomaticMode;
};

数字孪生城市智能感知（持续更新）相关推荐

数字冰雹数字孪生城市智能运营中心（IOC）可视化决策系统
产品概述数字时代,以5G通讯.物联网.云计算.大数据.人工智能为代表的新一代信息技术蓬勃发展,深入影响着城市运行的方方面面,广泛应用于数字城管.智慧社区.应急管理.智慧环保等领域,推动城市管理向数 ...
2021数字孪生城市白皮书附下载
数字孪生城市已成为新型智慧城市建设的主流模式,几年来中国信息通信研究院一直牵头联合产业界开展研究,从概念向方案不断推进,目前已是第四次发布数字孪生城市白皮书,持续引领行业发展.2021年生态建设取得 ...
雄安数字孪生城市和智能城市长啥样？来看看现实的样板……
[转自]人民邮电报 5月8日近日,中共中央.国务院对<河北雄安新区规划纲要>(以下简称<雄安规划纲要>)的批复向社会公布,国内外社会各界对此高度关注.在中国工程院院士邬贺铨. ...
数字孪生城市，智慧城市可视化技术解决方案案例
近年来,数字孪生智慧城市的发展一直是人类社会的焦点话题.作为人口载体的城市给人民的生活带来了极大的便利.但与此同时,数字孪生智慧城市发展也带来了许多问题.可视化技术的迅速发展以及不合理的规划等,导致了 ...
数字孪生城市建设标准体系
导读: 从整体发展态势来看,数字孪生城市相关概念认识.技术体系.应用场景已初步达成共识,我国数字孪生城市已进入探索建设期.为避免数字孪生城市相关标准多部委分头推进可能带来的标准互通难.体系割裂等问题出 ...
数字孪生城市项目的关键技术展望
智慧城市是社会空间.物理空间和信息系统三元有机融合的条件下城市智慧化转型的新型态, 运用以数字孪生为代表的新一代信息化技术优化城市系统, 提升城市品质和综合竞争力, 从而实现可持续发展成为智慧城市构建 ...
数字孪生城市技术图谱和平台架构
城市数字化转型特征内涵城市数字化转型本质上是"以业务价值提升为导向,以机制体制优化为保障,以技术创新应用为手段,最终提升城市面向未来的综合竞争力"的城市发展新范式. 数字孪生城市 ...
数字孪生城市核心能力要素
数字孪生城市至少具备九大核心能力. 从典型场景和技术架构分析,数字孪生城市至少具备九大核心能力. 一是物联感知操控能力,采集城市"脉搏"数据,反映城市实时运行状态. 二是全要素数字 ...
专题丨数字孪生城市框架与发展建议
※ 信息社会政策探究的思想库 ※ ※ 信息通信技术前沿的风向标 ※ 作者简介张竞涛中国信息通信研究院产业与规划研究所工程师,长期从事智慧城市.数字孪生城市.信息化领域的政策理论.行业研 ...

数字孪生城市智能感知（持续更新）

一、界面搭建

二、实现功能

2.1 可视化菜单：

2.1.1 移动平台运行轨迹

2.1.2 感知资源可视化

2.1.3 感知过程可视化

数字孪生城市智能感知（持续更新）相关推荐

最新文章

热门文章