您现在的位置是:首页 > 正文

cesium 雾 天气 案例

2024-04-01 00:11:07阅读 1

获取 AccessToken

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cesium 雾天气案例</title>
    <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,body,#cesiumContainer{
            padding: 0;
            margin: 0;
            width:100%;height:100%
        }
        #toolbar{
            position: absolute;
            width: 100%;
            top: 10px;
            left: 0px;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid rgba(128,128,128,.5);
            color: #fff;
            box-shadow: 0 3px 14px rgba(128,128,128,.5);
            font-size: 14px;
            box-sizing: border-box;
        }
        #toolbar input{
            padding-top:2px;
            padding-bottom:2px;
            display: block;
            width: 100%;
            outline: none;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <div id="toolbar">
        <p>fog</p>
        <div>
            雾的密度 <span class="density"></span>
            <input id="density" type="range" min="0" max="0.2" step="0.0000001" value="0.0001" oninput="densityInput (event)" >
        </div>  
        <div>
            minimumBrightness <span class="Brightness"></span>
            <input id="Brightness" type="range" min="0" max="2" step="0.0001" value="0.8" oninput="BrightnessInput (event)" >            
        </div> 
        <p>skyAtmosphere 天空</p>
        <div>
            hueShift 色调 <span class="hueShift"></span>
            <input id="hueShift" type="range" min="-1" max="1" step="0.0001" value="-0.5" oninput="hueShiftInput (event)" >
        </div>  
        <div>
            saturationShift 饱和移向大气 <span class="saturationShift"></span>
            <input id="saturationShift" type="range" min="-1" max="1" step="0.001" value="-0.7" oninput="saturationShiftInput (event)" >            
        </div>  
        <div>
            brightnessShift 亮度变化 <span class="brightnessShift"></span>
            <input id="brightnessShift" type="range" min="-1" max="1" step="0.001" value="-0.33" oninput="brightnessShiftInput (event)" >
        </div>   
    </div>

    <script>
        // cesium 秘钥
        Cesium.Ion.defaultAccessToken = '你的秘钥';
        var viewer = new Cesium.Viewer('cesiumContainer',{
            geocoder: false,                //是否显示地名查找控件
            sceneModePicker: false,         //是否显示投影方式控件
            navigationHelpButton: false,    //是否显示帮助信息控件
            baseLayerPicker: false,         //是否显示图层选择控件
            homeButton: false,              //是否显示Home按钮
            fullscreenButton: false,        //是否显示全屏按钮    
            timeline:false,                 //时间轴控件 
            animation:false,                //动画控件 
        }),scene = viewer.scene;
        //去cesium logo水印 或 css
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印

        // 添加广告牌实体
        var enetity = viewer.entities.add({
            name: '标点',
            position: Cesium.Cartesian3.fromDegrees(110,40,1),
            billboard:{
                image: './acting.png',
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                scale: 1,
            }
        })
        viewer.flyTo(enetity);

        var density = document.querySelector('.density'),
            Brightness = document.querySelector('.Brightness'),
            hueShift = document.querySelector('.hueShift'),
            saturationShift = document.querySelector('.saturationShift'),
            brightnessShift = document.querySelector('.brightnessShift');

        function densityInput (event) {
            density.innerText = event.target.value
            scene.fog.density = event.target.value
        }
        function BrightnessInput (event) {
            Brightness.innerText = event.target.value
            scene.fog.minimumBrightness = event.target.value
        }
        function hueShiftInput (event) {
            hueShift.innerText = event.target.value
            scene.skyAtmosphere.hueShift = event.target.value
        }
        function saturationShiftInput (event) {
            saturationShift.innerText = event.target.value
            scene.skyAtmosphere.saturationShift = event.target.value
        }
        function brightnessShiftInput (event) {
            brightnessShift.innerText = event.target.value
            scene.skyAtmosphere.brightnessShift = event.target.value
        }

        // hueShift 色调的变化适用于大气。默认值为0.0(无移位)。色调移动1.0表示可用色调的完全旋转.
        // saturationShift 饱和移向大气。默认值为0.0(无移位)。饱和度偏移-1.0为单色。
        // brightnessShift 亮度变化适用于大气。默认值为0.0(无移位)。亮度偏移-1.0是完全的黑暗,这将让空间显示通过
        
        // fog 混合大气的几何远离相机的地平线视图。通过渲染更少的几何图形和分配更少的地形请求,允许额外的性能改进。
        // density 决定雾密度的标量。浓雾笼罩的地形被剔除。
        //         当这个数字接近1.0时,雾的密度增加,当它接近零时,雾的密度变小。雾越浓,对地形的选择性就越强。
        //         例如,如果相机位于椭球面以上1000.0m的高度,那么将该值增加到3.0e-3将导致选中许多靠近查看器的tile。
        //         降低该值将会使雾离观察者更远,但是随着更多的地形被渲染,性能会降低。
        // minimumBrightness  由照明产生的雾色的最小亮度。值0.0可以导致雾完全变黑。1.0的值不会影响亮度。
        // enabled 如果启用了fog,则为true,否则为false。
        // screenSpaceErrorFactor 当地砖部分处于雾中时,用于增加地砖屏幕空间误差的一种因素。
        //                        其效果是减少渲染所需的地砖数量。如果设置为零,该功能将被禁用。
        //                        如果增加山区的值,将需要更少的瓦片,但是地平线附近的地形网格可能会明显降低分辨率。
        //                        如果该值在相对平坦的区域增加,地平线上就不会有明显的变化。

    </script>
</body>
</html>

效果

在这里插入图片描述

网站文章

  • 2020-02-06-Linux设备驱动开发0-环境搭建

    layout title subtitle date author header-img catalog tags post Linux设备驱动开发0-环境搭建 学习Linux驱动开发,当然得有一个自己的练兵台了! 2020-02-06 Tupelo Shen img/post-bg-re-vs-ng2....

    2024-04-01 00:11:00
  • MAC PHP 版本管理

    brew installbrew-php-switcherbrew install php@7.2brew install php@7.3切换到php7.2brew-php-switcher 7.2切换到php7.3brew-php-switcher 7.3

    2024-04-01 00:10:53
  • AtCoder Beginner Contest 302——A-E题讲解

    蒟蒻来讲题,还望大家喜。若哪有问题,大家尽可提!Hello, 大家好哇!本讲解一下这场比赛的!

    2024-04-01 00:10:27
  • C/C++语言:判断是否是素数

    判断任一个正整数n是否是素数

    2024-04-01 00:10:22
  • 使用JavaScript创建和设置HTML表格

    使用JavaScript创建和设置HTML表格

    要在JavaScript中创建和设置HTML表格,您可以使用DOM(文档对象模型)来操作HTML元素。下面是一个示例代码,演示如何使用JavaScript创建一个简单的表格并设置一些样式。您可以根据需...

    2024-04-01 00:10:16
  • 6.工厂模式_2:实现改良版本

    跟汤老师学Java笔记:工厂模式实现改良版本 完成:第一遍 1.工厂模式改良版本如何实现? package designPattern; import java.io.BufferedReader; ...

    2024-04-01 00:09:52
  • linux中通过dbca创建oracle数据库

    linux中通过dbca创建oracle数据库

    本文承接上篇博客,linux中安装oracle数据库1.首先还是一样的,本地的xstar连接上服务器,2.#非常重要,必须在oracle用户下执行这行命令,否则会导致你弹出的安装oracle界面全是框框export LANG=en_US.UTF-8#这边的ip要填你自己安装xstart自己电脑上面的ipexport DISPLAY=192.168.5.108:0.03...

    2024-04-01 00:09:40
  • L1-054 福到了 (15 分)

    “福”字倒着贴,寓意“福到”。不论到底算不算民俗,本题且请你编写程序,把各种汉字倒过来输出。这里要处理的每个汉字是由一个 N×N 的网格组成的,网格中的元素或者为字符@或者为空格。而倒过来的汉字所用的...

    2024-04-01 00:09:34
  • C#基础(三十八)详细介绍委托、回调:一个类调用另一个类的方法

    一、简介 在基于Prism的MVVM架构中,用到了Socket通信作为Server。SocketClass类定义了单例模式,然后在软件启动的时候,就加载SocketClass并一直监听Client的消息。该消息包行了不同的标志,根据标志值加载不同类的方法。也就是加载View.xaml对应的ViewModel.cs。 那么问题来了,如何加载其他类(ViewModel...

    2024-04-01 00:09:07
  • (Python)文件读取时出现编码报错(一)——已解决

    (Python)文件读取时出现编码报错(一)——已解决

    (Python)文件读取时出现编码报错——已解决

    2024-04-01 00:09:01