SuperMap iClient3D for WebGL实现分屏控制entity显隐

作者：kk

---

---

背景

现目前SuperMap iClient3D for WebGL支持分屏控制显隐的图层有模型图层、影像图层和kml图层，最近遇到很多客户也想把entity通过分屏控制显隐，从而对比不同界面中实体图层的差异。但是entity并没有直接支持开启分屏，一些客户在面对这类需求时就只能通过寻求其他方式去实现，如创建两个球体，但是这样做有个弊端，就是图层多起来之后会导致系统的性能下降，这就让我们不得不去寻找其他实现方法。下面就来看看小编是怎么做的吧。

---

一、创建数据源集合，添加KmlDataSource

从官方API文档上来看KmlDataSource中也是有Entity实例集合的

因此我们首先需要创建的是KmlDataSource

		viewer.dataSources.add(Cesium.KmlDataSource.load('', {
            camera: scene.camera,
            canvas: scene.canvas
        })).then(function (kmlDatasource) {
            kmlLayer = kmlDatasource;
        });

二、将entity添加到kmlLayer

			kmlLayer.entities.add({
                polygon: {
                    hierarchy: {
                        positions: [new Cesium.Cartesian3(290254.5148736448, 5637924.074937166, 2971777.4768239637),
                            new Cesium.Cartesian3(286432.14053509803, 5640804.651089405, 2966391.9275969476),
                            new Cesium.Cartesian3(283512.2666752818, 5640502.494127799, 2969385.3689191523),
                            new Cesium.Cartesian3(287036.36797237827, 5636827.146248645, 2974105.8904601005)
                        ]
                    },
                    material: Cesium.Color.BLUE.withAlpha(0.5)
                }
            });

三、设置分屏

水平分屏

 scene.multiViewportMode = Cesium.MultiViewportMode[HORIZONTAL]

四、最终效果

完整代码下载