地形影像

最新推荐文章于 2024-07-23 13:38:59 发布

浪向往着岸

最新推荐文章于 2024-07-23 13:38:59 发布

阅读量669

点赞数

分类专栏： Cesium DEMO

本文链接：https://blog.csdn.net/u010447508/article/details/116400421

版权

Cesium DEMO 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文展示了如何使用Cesium初始化地球场景，加载全球地形和影像，并实现地形和影像的显示控制。通过设置影像地图的透明颜色及阈值，可以调整影像的透明效果。此外，还提供了代码示例演示如何改变地形的可见性以及颜色透明度。

摘要由CSDN通过智能技术生成

超图案例：图层——地形——地形影像官网地址

一、DEMO功能点

1、Cesium场景初始化，加载全球地形和全球影像，添加地球背景图片影像；

2、控制地形显隐；

3、设置影像地图透明颜色及透明阈值

二、代码

//初始化Cesium场景
var viewer = new Cesium.Viewer('cesiumContainer',{
        //加载使用cesiumlab处理后台的地形数据
        // terrainProvider:new Cesium.CesiumTerrainProvider({
        //     url:Cesium.buildModuleUrl("Assets/Terrains/SiChuan")
        // }),
        //全球地形
        terrainProvider:Cesium.createWorldTerrain(),
        baseLayerPicker:false,
        //以地球影像图片为影像背景
        imageryProvider:new Cesium.SingleTileImageryProvider({
            url:Cesium.buildModuleUrl("Assets/Textures/GlobalBkLayer.jpg")
        })
    });
    
    viewer.scene.camera.setView({
        destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
        orientation : {
            heading : 1.4059101895600987,
            pitch : -0.20917672793046682,
            roll : 2.708944180085382e-13
        }
    });
    //添加全球影像
    var layer=viewer.imageryLayers.addImageryProvider(Cesium.createWorldImagery());
    var viewModel = {
        color : '#ffffff',
        tolerance : 0
    };
    $("#colorPicker").spectrum({
        color: "rgba(255,255,255)",
        showPalette: true,
        showAlpha: true,
        localStorageKey: "spectrum.demo",
        palette: palette
    });
    $("#colorPicker").on('change', function(event) {
        var selectedColor = Cesium.Color.fromCssColorString(event.target.value);
        if(!selectedColor) selectedColor=Cesium.Color.WHITE;
        //设置颜色透明度，影像地图中越靠近选择的颜色的部分首先
        //收到颜色透明阈值影像
        layer.colorToAlpha = selectedColor;
    });
    $("#colorPicker").trigger('change');
    Cesium.knockout.track(viewModel);
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);
    Cesium.knockout.getObservable(viewModel,'tolerance').subscribe(
        function(newValue) {
            //颜色透明阈值，0.0不透明，1.0透明
            layer.colorToAlphaThreshold = newValue;
        }
    );
    $("#terrainVisible").click(function(){
        viewer.terrainProvider=Cesium.createWorldTerrain();
    });
    $("#terrainUnvisible").click(function(){
        debugger;
        //为地球赋予一个简单的地形，它只是细分地球表面
        //直接设置terrainProvider=null会报错
        viewer.terrainProvider=new Cesium.EllipsoidTerrainProvider();
    });
    $('#loadingbar').remove();
    $('#toolbar').show();