Cesium學習筆記(三): 影象層(Imagery Layers)和地形(Terrain)
阿新 • • 發佈:2019-02-10
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;