Cesium 入門（三）

程式碼解析-圖層

    // // Remove default base layer
     viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
    //
    // // Add Sentinel-2 imagery
     viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3954 }));

• 第一句話是移除預設的圖層第二句是新增新的圖層。問題是assetId這是ion提供的資料，準備來說是Cesium商業版的功能如果有錢用的商業版這樣用肯定是沒有問題的。下面我們說一下不使用商業版如何生成自己的圖層
• 圖層支援的格式有如下幾咱
• WMS
  TMS
  WMTS (with time dynamic imagery)
  ArcGIS
  Bing Maps
  Google Earth
  Mapbox
  Open Street Map
• 新增基本的圖層
  
  1. 程式碼如下

//建立Viewer並選擇imgeryProvider的地址
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 

    }),
    //是否顯示圖層選擇按鈕如果有多個圖可以參考這個連結
    //https://cesiumjs.org/Cesium/Build/Documentation/BaseLayerPicker.html
    baseLayerPicker : false
});

var layers = viewer.imageryLayers;
var earthAtNight = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));
earthAtNight.alpha = 0.5;//透明度
earthAtNight.brightness = 2.0
 
;//亮度
//新增自己的圖片
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

1. 調整圖層

var viewer = new Cesium.Viewer('cesiumContainer');
var imageryLayers = viewer.imageryLayers;

// The viewModel tracks the state of our mini application.
var viewModel = {
    brightness: 0,//亮度
    contrast: 0,//對比度
    hue: 0,//色調
    saturation: 0,//飽和度
    gamma: 0//透明度
};
// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);//把物件關聯到Cesium這裡用的繫結可以參考觀察者模式

// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);//繫結MV

// Make the active imagery layer a subscriber of the viewModel.
function subscribeLayerParameter(name) {
    Cesium.knockout.getObservable(viewModel, name).subscribe(
        function(newValue) {//要執行的操作
            if (imageryLayers.length > 0) {
                var layer = imageryLayers.get(0);
                layer[name] = newValue;
            }
        }
    );
}
subscribeLayerParameter('brightness');//觀察者
subscribeLayerParameter('contrast');
subscribeLayerParameter('hue');
subscribeLayerParameter('saturation');
subscribeLayerParameter('gamma');

// Make the viewModel react to base layer changes.
function updateViewModel() {//值與控制元件繫結達到雙向更新的目的
    if (imageryLayers.length > 0) {
        var layer = imageryLayers.get(0);
        viewModel.brightness = layer.brightness;
        viewModel.contrast = layer.contrast;
        viewModel.hue = layer.hue;
        viewModel.saturation = layer.saturation;
        viewModel.gamma = layer.gamma;
    }
}
imageryLayers.layerAdded.addEventListener(updateViewModel);
imageryLayers.layerRemoved.addEventListener(updateViewModel);
imageryLayers.layerMoved.addEventListener(updateViewModel);
//主動請求可以初始化狀態
updateViewModel();

1. 在這裡可以選擇一些開源的圖層https://cesiumjs.org/Cesium/Build/Documentation/index.html?classFilter=ImageryProvider