地形影像

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

一、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();

三、效果图

四、结论

超图Cesium使用imageryLayer的transparentBackColor、transparentBackColorTolerance属性设置透明颜色及透明阈值，Cesium使用imageryLayer中的colorToAlpha及colorToAlphaThreshold。