Cesium學習筆記（三）： 圖像層(Imagery Layers)和地形(Terrain)

Cesium支持多個高分辨率的混合使用圖層,每層的亮度，對比度，伽瑪，色調和飽和度都可以動態地改變

首先我們來創建一個圖層試試

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
    }),
    //關閉圖層選擇器，不然還怎麼指定呢
    baseLayerPicker : false
});

可以看出來,這和我們之前寫的只多了一段代碼,而這一段就是指定了一個地圖爲我們的圖層，這裏指定的是World Street Map

我們也可以指定一些其他的地圖

var viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false,  //是否顯示動畫控件(左下方那個)
    baseLayerPicker: false, //是否顯示圖層選擇控件
    geocoder: true, //是否顯示地名查找控件
    timeline: false, //是否顯示時間線控件
    sceneModePicker: true, //是否顯示投影方式控件
    navigationHelpButton: false, //是否顯示幫助信息控件
    infoBox: true,  //是否顯示點擊要素之後顯示的信息
    imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
        layer: "tdtVecBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: false
    })
});

這裏我們是用天地圖，但是可以看到它沒有默認文字提示，所以我們需要自己加一下

//全球影像中文註記服務
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: false
}));

這樣就有文字描述了，可以看出來，這也是添加了一個圖層

讓我們在這之上在加一層圖層(NASA Black Marble)

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
    url : 'https://cesiumjs.org/tilesets/imagery/blackmarble',
    maximumLevel : 8,
    flipXY : true,
    credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

可以看到效果出來了，但是卻把之前的圖層遮住了，這時候我們可以使用layer的方法來移除或者切換一些圖層(remove(),lower()等詳細見layer的API)，那有沒有方法能同時看到兩個呢，當然可以

//50%透明度
blackMarble.alpha = 0.5;
//兩倍亮度
blackMarble.brightness = 2.0;

我們調節了一下亮度和透明度，可以看到，效果非常好，完全結合了兩個地圖的優點

如果需要做一些標記怎麼辦，之前我們說過可以之前添加實體，其實用圖層也是可以的

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../Apps/Sandcastle/images/Cesium_Logo_overlay.png',
    rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

Cesium支持流動的海洋與有真實高度差的山峯，而且只需要幾行代碼就可以做到

var terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
});
viewer.terrainProvider = terrainProvider;

這樣就可以開啓高度差了，我本來也想搞個珠穆朗瑪峯試試的，但是網速不行還是需要翻牆的原因，我的地圖上很不清楚，就用官網上的圖吧

水波紋效果需要從Terrain Server請求WaterMask擴展

var terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    //請求水波紋效果
    requestWaterMask: true
});
viewer.terrainProvider = terrainProvider;

還可以添加模擬照明效果，也需要請求

var terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    //請求照明
    requestVertexNormals: true
});
viewer.terrainProvider = terrainProvider;
//開啓照明
viewer.scene.globe.enableLighting = true;

全部加起來就是這樣

var terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    requestVertexNormals: true,
    requestWaterMask: true
});
viewer.terrainProvider = terrainProvider;
viewer.scene.globe.enableLighting = true;

參考資料：Cesium官網