SuperMap iClient3D for WebGL教程（S3MTilesLayer）- 显示优化设置

作者：kk

---

---

前言

三维的加载效率以及显示效果一直以来都是大家关注的重点，本篇文章主要从显示精度，色彩，泛光等几个方面来探讨学习S3MTilesLayer里面的显示优化设置

---

一、获取S3MTilesLayer的方法

1、Cesium.when回调获取

a、如果添加的是单个图层，则通过函数返回的是单个layer图层，直接用就可以了

		var promise = scene.addS3MTilesLayerByScp('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace/datas/Combine/config',{
            name:'aa'
        });
        Cesium.when(promise,(layer)=>{
        	var s3mLayer = layer
        	console.log(layer)
        })

b、如果添加的是多个图层，则使用Cesium.when.all方法，返回的是一个图层数组，可以通过索引取图层

		var promise = scene.addS3MTilesLayerByScp('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace/datas/Combine/config',{
            name:'aa'
        });
        var promise1 = scene.addS3MTilesLayerByScp('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace/datas/Combine1/config',{
            name:'bb'
        });
        Cesium.when.all([promise,promise1],(layers)=>{
            var s3mLayer = layers[0]
        })

c、如果是通过viewer.scene.open打开的场景，则使用Cesium.when返回的是一个图层数组，可以通过索引取图层

        var promise = scene.open('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace');

        Cesium.when(promise,(layers)=>{
            var s3mLayer = layers[0]
        })

2、通过scene查找获取

a、如果知道图层的名称，则可以使用viewer.scene.layers.find()方法传入图层的名称，则可以返回图层。
b、如果知道图层的索引，则可以使用viewer.scene.layers.findByIndex()方法传入图层的索引，返回图层。
c、如果需要获取有选中对象的那层s3m图层，则可以使用viewer.scene.layers.getSelectedLayer() 方法获取选中对象的那一层s3m图层。

通过上述的方法，大家就可以获取到S3MTilesLayer这个图层对象了，接下来我们学习下显示优化设置。

二、显示优化设置

1.显示精度问题

a、viewer.resolutionScale
官方文档介绍为：获取或设置渲染分辨率的缩放因子。 值小于1.0时能够在不太强大的设备上提高性能；相反，值大于1.0时将会以更高分辨率渲染，然后按比例缩小，以此提高视觉保真度。 例如窗口部件以640x480的大小布设，将此属性设置为0.5，将导致场景以320x240分辨率渲染，场景按比例放大，而将其设置为2.0将导致场景以1280x960渲染，场景按比例缩小。
接下来我我们来实验一下效果，我们分别将resolutionScale设置为0.2和2。
代码如下：

viewer.resolutionScale=0.2;

显示效果：

resolutionScale为2
resolutionScale为0.2

所以当我们在不同分辨率的机器上进行展示数据时，可以调整这个参数，特别是针对大屏程序，往往分辨率都特别大。

b、S3MTilesLayer.lodRangeScale
S3M图层的LOD层级切换距离缩放系数，这里首先了解下LOD技术，根据百度百科介绍，LOD技术即Levels of Detail的简称，意为多细节层次。LOD技术指根据物体模型的节点在显示环境中所处的位置和重要度，决定物体渲染的资源分配，降低非重要物体的面数和细节度，从而获得高效率的渲染运算。也就是说把模型根绝距相机远近进行分配：据摄像机近，用面数多细节高的模型，据摄像机远，用面数少细节少的模型。
接下来我们来实验下
我们分别将s3mLayer.lodRangeScale设置为0.1和100，看下效果。


这里可以看到，lodRangeScale设置大于1后，当我们拉远模型时，显示的模型出现了模糊的情况，这里的模糊是因为加载的是LOD层级中的粗糙层，和viewer.resolutionScale的像素模糊有着本质的区别。当设置的参数小与1时，拉远模型，显示的依旧很清晰，说明加载的是精细层。
LOD设置的越小越精细，但是当场景中存在大量模型时，越小加载的效率也越低，所以请根据现场实际情况调整参数的大小。

2.显示控制

a、从高度上控制显示
我们可以通过S3MTilesLayer.maxVisibleAltitude/S3MTilesLayer.minVisibleAltitude这一组属性控制图层的最大最小可见高度。
b、从可见距离控制显示
当数据量特别大时，我们可以只显示视线范围内的数据，这时就可以通过距离来进行控制
我们可以通过S3MTilesLayer.visibleDistanceMax /S3MTilesLayer.visibleDistanceMin 这一组属性控制图层的最大最小可见距离。

3.显示色彩

对于显示的色彩，主要有亮度（brightness ）、对比度（contrast ）、色调（hue ）、饱和度（saturation ）、伽马（gamma ）等参数的设置。
具体的设置方法已经有在线范例，大家可以参考下范例：
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#S3MTiles_suofeiya

三、加载速度优化

1.多子域

由于浏览器对同一个域名服务的并发请求数量有限制，通过部署多个子域名，加大向iServer发送数据请求的并发量，从而达到提升加载速度的目的。

多子域的搭建以及使用:
1、nginx客户端部署。
修改nginx.conf文件，如下图所示，修改完成重启nginx，则 http://localhost:8081/iserver、http://localhost:8082/iserver、http://localhost:8083/iserver 都会指向http://localhost:8090/iserver

2、scene.open()打开场景

		var promise = viewer.scene.open('http://{s}/iserver/services/3D-CBD/rest/realspace', undefined, {
            subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
        });

3、scene.addS3MTilesLayerByScp()添加模型

		var config = {
            subdomainConfig: {
                urlScheme: " http://{s}/iserver/services/3D-CBD/rest/realspace",
                subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
            },
            name: "building"
        };

        var promise = viewer.scene.addS3MTilesLayerByScp('http://localhost:8090/iserver/services/3D-CBD/rest/realspace/datas/building/config', config);
        Cesium.when(promise, function (layer) {
            viewer.flyTo(promise);
        })
    

4、地形

        var viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: new Cesium.CesiumTerrainProvider({
                url: ' http://{s}/iserver/services/3D-terrain/rest/realspace/datas/dem',
                subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
            })
        });

5、影像

        var imageLayer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
            url: ' http://{s}/iserver/services/3D-image/rest/realspace/datas/image',
            subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
        }));
        viewer.flyTo(imageLayer);

6、mvt

    mvtMap = scene.addVectorTilesMap({
    url: 'http://{s}/services/map-mvt-JingJinDiQuDiTu/restjsr/v1/vectortile/maps/JingJin',
    subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
    canvasWidth: 512,
    name: 'testMVT',
    viewer: viewer
});

加载效果：从网络请求里看是否有不同端口的请求，比如’localhost:8081’, ‘localhost:8082’, ‘localhost:8083’