Cesium 入门（三）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liyangyang08/article/details/79827396

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