Cesium 入門（四）

說明

Cesium 支援流和高度可視的地形和河流（湖海什麼都可以的），並且Cesium做了大量的封裝可以直接通過API使用。

程式碼解析

// // Load Cesium World Terrain
     viewer.terrainProvider =  Cesium.createWorldTerrain({
     //水的支援
         requestWaterMask : true, // required for water effects
         requestVertexNormals : true // required for terrain lighting//請求頂點是為了更好的讓地形不那麼平滑
 

     });
    // // Enable depth testing so things behind the terrain disappear.
    //為了讓地形遮住應當不顯示的東西
     viewer.scene.globe.depthTestAgainstTerrain = true;

新增地形用的商業的

// Create Arctic DEM terrain with normals.
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : new Cesium.CesiumTerrainProvider({
        url : Cesium.IonResource.fromAssetId(3956
 
),
        requestVertexNormals : true
    });
});

• 地形圖和水都是支援自己定義的。Cesium提供的有商業版的。水更改會影響水的顯示，因為水是與圖層混合了。
  -demo

var worldTerrain = Cesium.createWorldTerrain({
    requestWaterMask: true,
    requestVertexNormals: true
});

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: worldTerrain
});

// set lighting to true
 

viewer.scene.globe.enableLighting = true;

// setup alternative terrain providers
var ellipsoidProvider = new Cesium.EllipsoidTerrainProvider();

var vrTheWorldProvider = new Cesium.VRTheWorldTerrainProvider({
    url : 'http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/',
    credit : 'Terrain data courtesy VT MÄK'
});

Sandcastle.addToolbarMenu([{
    text : 'CesiumTerrainProvider - Cesium World Terrain',
    onselect : function() {
        viewer.terrainProvider = worldTerrain;
        viewer.scene.globe.enableLighting = true;
    }
}, {
    text : 'CesiumTerrainProvider - Cesium World Terrain - no effects',
    onselect : function() {
        viewer.terrainProvider = Cesium.createWorldTerrain();
    }
}, {
    text : 'CesiumTerrainProvider - Cesium World Terrain w/ Lighting',
    onselect : function() {
        viewer.terrainProvider = Cesium.createWorldTerrain({
            requestVertexNormals : true
        });
        viewer.scene.globe.enableLighting = true;
    }
}, {
    text : 'CesiumTerrainProvider - Cesium World Terrain w/ Water',
    onselect : function() {
        viewer.terrainProvider = Cesium.createWorldTerrain({
            requestWaterMask : true
        });
    }
}, {
    text : 'EllipsoidTerrainProvider',
    onselect : function() {
        viewer.terrainProvider = ellipsoidProvider;
    }
}, {
    text : 'VRTheWorldTerrainProvider',
    onselect : function() {
        viewer.terrainProvider = vrTheWorldProvider;
    }
}], 'terrainMenu');

Sandcastle.addDefaultToolbarMenu([{
    text : 'Mount Everest',
    onselect : function() {
        lookAtMtEverest();
    }
}, {
    text : 'Half Dome',
    onselect : function() {
        var target = new Cesium.Cartesian3(-2489625.0836225147, -4393941.44443024, 3882535.9454173897);
        var offset = new Cesium.Cartesian3(-6857.40902037546, 412.3284835694358, 2147.5545426812023);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}, {
    text : 'San Francisco Bay',
    onselect : function() {
        var target = new Cesium.Cartesian3(-2708814.85583248, -4254159.450845907, 3891403.9457429945);
        var offset = new Cesium.Cartesian3(70642.66030209465, -31661.517948317807, 35505.179997143336);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}], 'zoomButtons');

var terrainSamplePositions;

function lookAtMtEverest() {
    var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
    var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
    viewer.camera.lookAt(target, offset);
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}

function sampleTerrainSuccess(terrainSamplePositions) {
    var ellipsoid = Cesium.Ellipsoid.WGS84;

    //By default, Cesium does not obsure geometry
    //behind terrain. Setting this flag enables that.
    viewer.scene.globe.depthTestAgainstTerrain = true;
//更新實體前一定要用這一句話暫停當前的活動
    viewer.entities.suspendEvents();
    viewer.entities.removeAll();

    for (var i = 0; i < terrainSamplePositions.length; ++i) {
        var position = terrainSamplePositions[i];

        viewer.entities.add({
            name : position.height.toFixed(1),
            position : ellipsoid.cartographicToCartesian(position),
            billboard : {
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                scale : 0.7,
                image : '../images/facility.gif'
            },
            label : {
                text : position.height.toFixed(1),
                font : '10pt monospace',
                horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                pixelOffset : new Cesium.Cartesian2(0, -14),
                fillColor : Cesium.Color.BLACK,
                outlineColor : Cesium.Color.BLACK,
                showBackground : true,
                backgroundColor : new Cesium.Color(0.9, 0.9, 0.9, 0.7),
                backgroundPadding : new Cesium.Cartesian2(4, 3)
            }
        });
    }
    viewer.entities.resumeEvents();
}

function createGrid(rectangleHalfSize) {
    var gridWidth = 41;
    var gridHeight = 41;
    var everestLatitude = Cesium.Math.toRadians(27.988257);
    var everestLongitude = Cesium.Math.toRadians(86.925145);
    var e = new Cesium.Rectangle(everestLongitude - rectangleHalfSize, everestLatitude - rectangleHalfSize, everestLongitude + rectangleHalfSize, everestLatitude + rectangleHalfSize);
    var terrainSamplePositions = [];
    for (var y = 0; y < gridHeight; ++y) {
        for (var x = 0; x < gridWidth; ++x) {
            var longitude = Cesium.Math.lerp(e.west, e.east, x / (gridWidth - 1));
            var latitude = Cesium.Math.lerp(e.south, e.north, y / (gridHeight - 1));
            var position = new Cesium.Cartographic(longitude, latitude);
            terrainSamplePositions.push(position);
        }
    }
    return terrainSamplePositions;
}

Sandcastle.addToggleButton('Enable Lighting', viewer.scene.globe.enableLighting, function(checked) {
//是否使用光照
    viewer.scene.globe.enableLighting = checked;
});

Sandcastle.addToggleButton('Enable fog', viewer.scene.fog.enabled, function(checked) {
//是否使用霧
    viewer.scene.fog.enabled = checked;
});

Sandcastle.addToolbarButton('Sample Everest Terrain at Level 9', function() {
    var terrainSamplePositions = createGrid(0.005);
    Cesium.when(Cesium.sampleTerrain(viewer.terrainProvider, 9, terrainSamplePositions), sampleTerrainSuccess);
    lookAtMtEverest();
}, 'sampleButtons');

Sandcastle.addToolbarButton('Sample Most Detailed Everest Terrain', function() {
    var terrainSamplePositions = createGrid(0.0005);
    Cesium.when(Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, terrainSamplePositions), sampleTerrainSuccess);
    lookAtMtEverest();
}, 'sampleButtons');