1:场景图初始加载大量轨道线。
// 创建几何体实例const geometry = new Cesium.PolylineGeometry({positions: positions,width: 1.0, // 轨道线的宽度});const geometryInstance = new Cesium.GeometryInstance({id: res.id,geometry: geometry,});// 创建材质实例const material = new Cesium.Material({fabric: {type: 'Color',uniforms: {color: new Cesium.Color.fromCssColorString(color),},},});// 创建 primitiveres.primitive = new Cesium.Primitive({geometryInstances: geometryInstance,appearance: new Cesium.PolylineMaterialAppearance({material: material,translucent: false,}),asynchronous: false,});if (res.diagramElementId) {window.pointIdMap.set(res.primitive, {elementId: res.diagramElementId,id: res.id,});}// 添加 primitive 到视图器window.viewer.scene.primitives.add(res.primitive);
2:场景图初始加载大量点。
_labelEntity.point = {color: new Cesium.Color.fromCssColorString(res.localStyle.nameColor),pixelSize: 10,outlineColor: new Cesium.Color.fromCssColorString(res.localStyle.nameColor),outlineWidth: 0,show: point,};_labelEntity.model = {uri: res.localStyle.pathIcon,scale: 1.0,minimumPixelSize: 32,maximumPixelSize: 228,show: true,};_labelEntity.billboard = {image: res.localStyle.icon,show: point, // defaultpixelOffset: new Cesium.Cartesian2(0, 0), // default: (0, 0)eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // defaultverticalOrigin: Cesium.VerticalOrigin.CENTER, // default: CENTERscale: 1.0, // default: 1.0width: 100, // default: undefinedheight: 25, // default: undefined};_labelEntity.label = {show: true,text: orbitItem.name,font: '12px Lucida Console',fillColor: new Cesium.Color.fromCssColorString(res.localStyle.nameColor),style: Cesium.LabelStyle.FILL_AND_OUTLINE,pixelOffset: new Cesium.Cartesian2(6, -4),horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.CENTER,};window.viewer.entities.add(_labelEntity);
3:拼接czml文件。
czmlData.push({id: 'document',name: 'simple',version: '1.0',clock: {interval: time,currentTime: startTime,multiplier: 1,range: 'LOOP_STOP',// CLAMPED:达到终止时间后停止// LOOP_STOP:达到终止时间后重新循环// UNBOUNDED:达到终止时间后继续读秒(默认)step: 'SYSTEM_CLOCK_MULTIPLIER',},});const modelData: any = {id: id,name: localStyle.name,availability: time,ellipse: { height: dataKey },position: {interpolationAlgorithm: 'LAGRANGE',interpolationDegree: interpolationDegree,// referenceFrame: 'FIXED',// referenceFrame: 'INERTIAL',referenceFrame: referenceFrame,epoch: startTime,// cartesian: positions,cartographicDegrees: positions,},billboard: {eyeOffset: {cartesian: [0, 0, 0],},horizontalOrigin: 'CENTER',image: localStyle.icon,width: 100, // default: undefinedheight: 25,pixelOffset: {cartesian2: [0, 0],},scale: 1,show: isIcon,verticalOrigin: 'CENTER',},point: {color: {rgba: weixin,},outlineWidth: 0,pixelSize: 10,show: isPoint,},path: {show: gisMapInfo.checked.AllOrbit,width: 1,material: {solidColor: {color: {rgba: track,},},},resolution: 120,// leadTime: 8000,// trailTime: 0,},};
4:联通效果样式。
window.viewer.entities.add({id: 'polyline_' + id,show: show,polyline: {positions: new Cesium.CallbackProperty(polyline, false),width: 10,arcType: Cesium.ArcType.GEODESIC,// color: Cesium.Color.fromCssColorString('#7ffeff'),// material: Cesium.Color.fromCssColorString('#7ffeff').withAlpha(0.4),material: new Cesium.Spriteline1MaterialProperty(2000,'/gltfModel/images/line-arrow-blue.png',),},});
5:圆锥传感器。
import CesiumSensorVolumes from '../js/cesium-sensor-volumes';
//回放圆锥传感器const addConicSensorGraphics = (item, data, color) => {if (window.viewer.entities.values.length > 0) {window.viewer.entities.values.forEach((entitiesItem) => {if (entitiesItem.conicSensor && entitiesItem.conicSensor.id == item.id) {window.viewer.entities.remove(entitiesItem);}});}const entity: any = new Cesium.Entity({});entity.addProperty('conicSensor');let customSensors: any = new CesiumSensorVolumes.ConicSensorGraphics();const timeArr: any = [];data.sensorInfos.forEach((res) => {timeArr.push(simulationTimeStamp(res.dateTime));});// radius 是指波束的长度customSensors.id = item.id;customSensors.intersectionWidth = 1;customSensors.innerHalfAngle = 0;customSensors.outerHalfAngle = Cesium.Math.toRadians(data.sensorInfos[0].type.halfAngle);customSensors.minimumClockAngle = 0;customSensors.maximumClockAngle = 6.283185307179586;customSensors.lateralSurfaceMaterial = new Cesium.Color.fromCssColorString(color);customSensors.intersectionColor = new Cesium.Color.fromCssColorString(color);entity.conicSensor = customSensors;// 默认矩阵customSensors.modelMatrix = new Cesium.Matrix4();// 使用preRender 监听卫星每帧运动window.viewer.clock.onTick.addEventListener((time) => {// customSensors.show = false;// 判断数据源中所有实体是否准备就绪,viewer.dataSourceDisplay.dataSources = viewer.dataSourcesif (viewer.dataSourceDisplay.ready && viewer.clock.currentTime) {let position = item.position.getValue(viewer.clock.currentTime);if (position) {// 根据卫星位置和朝向转换为矩阵信息,此处使用的是后台计算的四元数,实际一般情况应该使用Cesium.Transforms+position转换let cartographic = window.viewer.scene.globe.ellipsoid.cartesianToCartographic(position);if (cartographic && cartographic.latitude) {let lat = Cesium.Math.toDegrees(cartographic.latitude);let lng = Cesium.Math.toDegrees(cartographic.longitude);customSensors.radius = cartographic.height + 6371000;var clypopsition = Cesium.Cartesian3.fromDegrees(lng, lat, cartographic.height);entity.position = clypopsition;//前端计算,默认朝下// var heading = Cesium.Math.toRadians(0);// var pitch = Cesium.Math.toRadians(180);// var roll = Cesium.Math.toRadians(0);// var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);// entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(clypopsition, hpr);// aaa.push(Cesium.Transforms.headingPitchRollQuaternion(clypopsition, hpr));//后端返回let unitQuaternion = data.sensorInfos[timeDiff(timeArr).index].pointType;let quat = new Cesium.Quaternion(unitQuaternion.X,unitQuaternion.Y,unitQuaternion.Z,unitQuaternion.W,);entity.orientation = quat;}}}});viewer.entities.add(entity);};
6:矩形传感器。
import CesiumSensorVolumes from '../js/cesium-sensor-volumes';
//实时仿真矩形传感器const addSimulationRectangularPyramidSensorVolume = (data, entity, color) => {let customSensor: any = new CesiumSensorVolumes.RectangularPyramidSensorVolume();let radius;entity.orbitDataList.forEach((res) => {if (res.height) {radius = res.height;}});// radius 是指波束的长度customSensor.id = entity.id;customSensor.radius = radius + 6371000;customSensor.intersectionWidth = 1;//把角度转换为弧度添加到传感器的x半角和水平半角上customSensor.xHalfAngle = Cesium.Math.toRadians(data.sensorInfos[0].type.horizontalHalfAngle);customSensor.yHalfAngle = Cesium.Math.toRadians(data.sensorInfos[0].type.verticalHalfAngle);customSensor.lateralSurfaceMaterial = Cesium.Material.fromType('Color');customSensor.lateralSurfaceMaterial.uniforms.color = new Cesium.Color.fromCssColorString(color);// 默认矩阵customSensor.modelMatrix = new Cesium.Matrix4();// 判断数据源中所有实体是否准备就绪,viewer.dataSourceDisplay.dataSources = viewer.dataSources// // 根据时间获取卫星实时笛卡尔位置// let position = item.position.getValue(viewer.clock.currentTime);let position;if (entity.orbitDataList[0] && entity.orbitDataList[0].lon) {position = Cesium.Cartesian3.fromDegrees(entity.orbitDataList[0].lon,entity.orbitDataList[0].lat,entity.orbitDataList[0].height,);}if (position) {// 根据卫星位置和朝向转换为矩阵信息,此处使用的是后台计算的四元数,实际一般情况应该使用Cesium.Transforms+position转换let cartographic = window.viewer.scene.globe.ellipsoid.cartesianToCartographic(position);if (cartographic && cartographic.latitude) {let lat = Cesium.Math.toDegrees(cartographic.latitude);let lng = Cesium.Math.toDegrees(cartographic.longitude);var clypopsition = Cesium.Cartesian3.fromDegrees(lng, lat, cartographic.height);// 将位置转换为平移矩阵let modelMatrix = Cesium.Matrix4.fromTranslation(clypopsition);let unitQuaternion = data.sensorInfos[0].pointType;let quat = new Cesium.Quaternion(unitQuaternion.X,unitQuaternion.Y,unitQuaternion.Z,unitQuaternion.W,);// 将四元数转换为旋转矩阵const orientation = Cesium.Matrix3.fromQuaternion(quat);customSensor.modelMatrix = Cesium.Matrix4.multiply(modelMatrix,Cesium.Matrix4.fromRotationTranslation(orientation, Cesium.Cartesian3.ZERO),new Cesium.Matrix4(),);}}viewer.scene.primitives._primitives.forEach((res) => {if (res.id && res.id == entity.id) {window.viewer.scene.primitives.remove(res);}});viewer.scene.primitives.add(customSensor);};
7:地面扇形雷达。1
let radar = window.viewer.entities.add({id: 'radar_' + index,show: true,position: Cesium.Cartesian3.fromDegrees(res.position[0], res.position[1]),label: {// text: res.name,font: '21pt Lucida Console',// 字体颜色fillColor: new Cesium.Color.fromCssColorString('#fff'),outlineColor: new Cesium.Color.fromCssColorString('#fff'),outlineWidth: 2,// 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。scale: 0.5,// 设置样式:FILL:填写标签的文本,但不要勾勒轮廓;OUTLINE:概述标签的文本,但不要填写;FILL_AND_OUTLINE:填写并概述标签文本。style: Cesium.LabelStyle.FILL_AND_OUTLINE,// 相对于坐标的水平位置verticalOrigin: Cesium.VerticalOrigin.CENTER,// 相对于坐标的水平位置horizontalOrigin: Cesium.HorizontalOrigin.LEFT,// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量pixelOffset: new Cesium.Cartesian2(20, -30),// 显示在距相机的距离处的属性,多少区间内是可以显示的distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100.5e6),// 是否显示show: true,},wall: {positions: new Cesium.CallbackProperty(() => {return Cesium.Cartesian3.fromDegreesArrayHeights(positionArr);}, false),material: new Cesium.Color.fromCssColorString('#00dcff82'),distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 100.5e6),},ellipsoid: {fill: false,radii: new Cesium.Cartesian3(res.radii, res.radii, res.radii),maximumCone: Cesium.Math.toRadians(90),material: new Cesium.Color.fromCssColorString('#00dcff82'),outline: true,outlineColor: new Cesium.Color.fromCssColorString('#00dcff82'),outlineWidth: 1,slicePartitions: 12,stackPartitions: 15,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 100.5e6),},});var heading = 0;var positionArr = calcPoints(res.position[0],res.position[1],res.radii, //此处与圆的半径保持一致heading,);viewer.clock.onTick.addEventListener(() => {heading += 5.0;positionArr = calcPoints(res.position[0], res.position[1], res.radii, heading);});