只需一个文件:CesiumSensors.js(资源在审核中,后续会免费发出来)
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium Sensors Example</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="./CesiumSensors.js"></script>
<style>
#cesiumContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
#toolbar {
margin: 5px;
padding: 2px 5px;
position: absolute;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
sceneModePicker : false
});
var longitude = Cesium.Math.toRadians(-90.0);
var latitude = Cesium.Math.toRadians(30.0);
var altitude = 3000000.0;
var clock = 0.0;
var cone = Cesium.Math.toRadians(15.0);
var twist = 0.0;
function getModelMatrix() {
var ellipsoid = viewer.scene.globe.ellipsoid;// 获取地球的椭球
var location = ellipsoid.cartographicToCartesian(new Cesium.Cartographic(longitude, latitude, altitude));// 位置 笛卡尔坐标 new Cesium.Cartographic(longitude, latitude height) 由经纬高定义的位置 cartographicToCartesian (制图,结果)将提供的制图转换为直角表示。
var modelMatrix = Cesium.Transforms.northEastDownToFixedFrame(location);// 模型矩阵
var orientation = Cesium.Matrix3.multiply(// 方向 Cesium.Matrix3.multiply(矩阵,矩阵,将结果存储到对象) 计算两个矩阵的乘积。返回修改后的结果
Cesium.Matrix3.multiply(Cesium.Matrix3.fromRotationZ(clock), Cesium.Matrix3.fromRotationY(cone), new Cesium.Matrix3()),// Cesium.Matrix3.fromRotationZ (角度,结果) 创建围绕z轴的旋转矩阵
Cesium.Matrix3.fromRotationX(twist), new Cesium.Matrix3()
);
return Cesium.Matrix4.multiply(modelMatrix, Cesium.Matrix4.fromRotationTranslation(orientation, Cesium.Cartesian3.ZERO), new Cesium.Matrix4());
}
// 添加矩形传感器
function addRectangularSensor() {
viewer.scene.primitives.removeAll();// 删除所有传感器
var rectangularPyramidSensor = new CesiumSensors.RectangularPyramidSensorVolume(); // 矩形棱锥传感器体积
rectangularPyramidSensor.modelMatrix = getModelMatrix();// 获取模型矩阵
rectangularPyramidSensor.radius = 20000000.0;
rectangularPyramidSensor.xHalfAngle = Cesium.Math.toRadians(40.0);
rectangularPyramidSensor.yHalfAngle = Cesium.Math.toRadians(20.0);
rectangularPyramidSensor.lateralSurfaceMaterial = Cesium.Material.fromType('Color');// 侧面材料
rectangularPyramidSensor.lateralSurfaceMaterial.uniforms.color = new Cesium.Color(0.0, 1.0, 1.0, 0.5);
viewer.scene.primitives.add(rectangularPyramidSensor);
}
// 添加自定义传感器
function addCustomSensor() {
viewer.scene.primitives.removeAll();
var customSensor = new CesiumSensors.CustomSensorVolume();
var directions = [];
for (var i = 0; i < 8; ++i) {
var clock = Cesium.Math.toRadians(45.0 * i);// 弧度
var cone = Cesium.Math.toRadians(25.0);
directions.push(new Cesium.Spherical(clock, cone));// new Cesium.Spherical(clock, cone, magnitude); 一组曲线三维坐标
}
customSensor.modelMatrix = getModelMatrix();
customSensor.radius = 20000000.0;
customSensor.directions = directions;
viewer.scene.primitives.add(customSensor);
}
function addToolbarButton(text, onclick) {
var button = document.createElement('button');
button.type = 'button';
button.className = 'cesium-button';
button.onclick = onclick;
button.textContent = text;
document.getElementById('toolbar').appendChild(button);
}
addToolbarButton('Rectangular', addRectangularSensor);
addToolbarButton('Custom', addCustomSensor);
addRectangularSensor();
</script>
</body>
</html>
拓展:
现在仅是固定位置的传感器,后续会发布跟随卫星移动的方法