版权声明:本文为博主原创文章,未经博主允许不得转载。 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 - 添加基本的图层
- 代码如下
//创建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)
}));
- 调整图层
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();