cesium实现卫星传感器

最新推荐文章于 2024-05-20 11:01:35 发布

静尾

最新推荐文章于 2024-05-20 11:01:35 发布

阅读量3.6k

点赞数 2

分类专栏：无所不能的JavaScript Cesium 文章标签： webgl javascript

本文链接：https://blog.csdn.net/qq_41176306/article/details/115768719

版权

Cesium 同时被 2 个专栏收录

28 篇文章 28 订阅

订阅专栏

无所不能的JavaScript

27 篇文章 1 订阅

订阅专栏

只需一个文件：CesiumSensors.js

资源链接：https://download.csdn.net/download/qq_41176306/16714510

效果图：
在这里插入图片描述

<!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>

拓展：
现在仅是固定位置的传感器，后续会发布跟随卫星移动的方法

静尾

关注

2
点赞
踩
26

收藏

觉得还不错? 一键收藏
5
评论
cesium实现卫星传感器

只需一个文件：CesiumSensors.js（资源在审核中，后续会免费发出来）效果图：<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"> <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-I
复制链接

扫一扫