cesium 雾天气案例

最新推荐文章于 2024-06-19 09:00:00 发布

tianmeng1999

最新推荐文章于 2024-06-19 09:00:00 发布

阅读量2.7k

点赞数 2

分类专栏： cesium

本文链接：https://blog.csdn.net/weixin_42448623/article/details/101294360

版权

cesium 专栏收录该内容

28 篇文章 15 订阅

订阅专栏

获取 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>

效果

在这里插入图片描述

tianmeng1999

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
cesium 雾天气案例

获取 AccessToken代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
复制链接

扫一扫