最近做了这个无人机实时视频投射的功能,其中介入了实时无人机的坐标数据、姿态以及视频流。
说下思路:
其中锥体用了自定义的geometry,视频面用的是polygon给的video材质,坐标用了samplepositionproperty进行储存,姿态用了sampleproperty。
以下是部分代码:
构建自定义geometry:
getGeometry(dis, fov, aspect) {let positions = new Float64Array(5 * 3);fov = Cesium.Math.toRadians(fov / 2);const tanfov = Math.tan(fov);const halfw = tanfov * dis;debuggerconst halfh = halfw / aspect;// 点0 坐标positions[0] = 0.0;positions[1] = 0.0;positions[2] = 0.0;// 点1 坐标positions[3] = 1.0 * halfw;positions[4] = 1.0 * dis;positions[5] = 1.0 * halfh;// 点2 坐标positions[6] = -1.0 * halfw;positions[7] = 1.0 * dis;positions[8] = 1.0 * halfh;// 点3 坐标positions[9] = -1.0 * halfw;positions[10] = 1.0 * dis;positions[11] = -1.0 * halfh;// 点4 坐标positions[12] = 1.0 * halfw;positions[13] = 1.0 * dis;positions[14] = -1.0 * halfh;// 创建顶点属性中的坐标const attributes = new Cesium.GeometryAttributes({position: new Cesium.GeometryAttribute({componentDatatype: Cesium.ComponentDatatype.DOUBLE,componentsPerAttribute: 3,values: positions})});// 点的索引const indices = new Uint16Array(18);indices[0] = 0;indices[1] = 4;indices[2] = 0;indices[3] = 1;indices[4] = 0;indices[5] = 2;indices[6] = 0;indices[7] = 3;indices[8] = 1;indices[9] = 4;indices[10] = 4;indices[11] = 1;indices[12] = 1;indices[13] = 2;indices[14] = 2;indices[15] = 3;indices[16] = 3;indices[17] = 4;let geometry = new Cesium.Geometry({attributes: attributes,indices: indices,primitiveType: Cesium.PrimitiveType.LINES,boundingSphere: Cesium.BoundingSphere.fromVertices(positions)});return geometry;}
构建property:
reateProperty(positions, times) {times = times || 120; // 不设置事件和速度 则默认120s播放完成var distance = 0;// 总距离var speed;for (var i = 0; i < positions.length - 1; i++) {var oneP = positions[i];var secP = positions[i + 1];var dis = Cesium.Cartesian3.distance(oneP, secP);distance += dis;}speed = distance / times; // (米/秒)this.allDistance = distance;this.startTime = this.viewer.clock.currentTime;this.endTime = Cesium.JulianDate.addSeconds(this.startTime, times, new Cesium.JulianDate());var property = new Cesium.SampledPositionProperty(); // 模型的propertylet hprProperty = new Cesium.SampledProperty(Cesium.Quaternion); // 姿态propertyvar oldTimes = 0;for (var i = 1; i < positions.length; i++) {var nowP = positions[i];var lastP = positions[i - 1];const hpr = this.headingPitchs[i];if (i == 1) { // 下标从1开始 此处加上第一个点property.addSample(this.startTime, positions[0]);const firstHpr = this.headingPitchs[0];let firstHeadingPitchRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(firstHpr.heading),Cesium.Math.toRadians(firstHpr.pitch),Cesium.Math.toRadians(0))let firstQua = Cesium.Transforms.headingPitchRollQuaternion(positions[0], firstHeadingPitchRoll);hprProperty.addSample(this.startTime, firstQua);}oldTimes += Cesium.Cartesian3.distance(nowP, lastP) / speed;var nowTime = Cesium.JulianDate.addSeconds(this.startTime, oldTimes, new Cesium.JulianDate());property.addSample(nowTime, nowP);let headingPitchRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(hpr.heading),Cesium.Math.toRadians(hpr.pitch),Cesium.Math.toRadians(0))let qua = Cesium.Transforms.headingPitchRollQuaternion(positions[0], headingPitchRoll);hprProperty.addSample(nowTime, qua);}return {property, hprProperty}}