SuperMapiClient3DforWebGL教程：深入解析影像图层（ImageryLayer）的应用与优化

作者&＃xff1a;为梦齐舞

本文同步更新于简书文章https://www.jianshu.com/p/cc38d1cc2d7e

上诉文章中介绍了很多关于ImageryProvider的例子&＃xff0c;接下来我们一起了解下ImageryLayer。
一、ImageryProvider与ImageryLayer的区别
通常我们创建一个ImageryProvider是为了创建一个ImageryLayer显示数据&＃xff0c;ImageryProvider类似于超图中数据集的概念&＃xff0c;他设定了显示何种类型的数据&＃xff0c;或者说是去请求某种特定服务的切片&＃xff0c;是数据的提供者&＃xff1b;ImageryLayer类似于超图中的图层的概念&＃xff0c;他只是ImageryProvider的一个容器&＃xff0c;用于展示数据。这样也就是说&＃xff0c;一个ImageryProvider可以对应多个ImageryLayer&＃xff1b;而一个ImageryLayer对应一个ImageryProvider&＃xff0c;是一对多的关系。
二、ImageryLayer参数介绍

1、我们可以通过修改属性值alpha&＃xff08;图层透明度值&＃xff09;、brightness&＃xff08;图层亮度值&＃xff09;、contrast&＃xff08;图层对比度&＃xff09;、hue&＃xff08;图层色调&＃xff09;、saturation&＃xff08;图层饱和度&＃xff09;、gamma&＃xff08;图层伽马校正&＃xff09;等属性可以修改可视化效果
2、通过show参数控制图层是否显示
3、当我们需要将影像中某种颜色进行透明化时&＃xff0c;我们可以设置transperantBackColor 透明色参数&＃xff1b;并且配合transperantBackColorTolerance 透明色容限一起使用&＃xff0c; 取值范围为0.0~1.0。0.0表示完全透明&＃xff0c;1.0表示完全不透明。达到需要的透明效果
4、当我们需要使用到卷帘对比时&＃xff0c;可以使用splitDirection 设置分割条方向&＃xff0c;并且通过viewer.scene.imagerySplitPosition设置分隔条的位置参数。
三、ImageryLayer获取方式
1、我们可以通过ImageryProvider创建图层&＃xff0c;获取ImageryLayer

///定义图层
var imageryLayer &＃61; new Cesium.ImageryLayer( new Cesium.SuperMapImageryProvider({url : ‘http://localhost:8090/iserver/services/datas/China’}));
///添加到场景中
viewer.imageryLayers.add(imageryLayer);


2、通过addImageryProvider方法直接添加获取

var imageryLayer &＃61; viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({url : &＃39;./images/xxxxxx.jpg&＃39;}));


3、通过viewer.imageryLayers 获取

var imageryLayer &＃61;viewer.imageryLayers.get(索引值);


四、调整参数后的影像效果