卫星影像卷轴效果

功能概述：使用jQuery实现TimeLine时间轴后，可以显示不同时期的多幅影像。为了对比任意2幅影像的区别，使用卷帘功能。思路是在juanlianLayers中存放用户选择的2幅影像，然后设置其中一幅影像的colorFilters属性。

Vue中的data：

                showJuanLian:false,      //卷帘按钮是否显示
                juanlianLayers:[]            //存放2幅对比的影像

1、加载影像

                    layer = _this.earth.addImageLayer({
                            name: LayerName,
                            source: new GV.GeneralLayerSource({
                                        driver:'wmts',
                                        url:_this.IMAGE_URL,
                                        format:'png',
                                        layers: LayerId,
                                        matrixset: 'EPSG:4326'
                                    })
                     });

                    //在添加影像的同时，把layer的属性添加进数组中
                    var item = {
                        "name":LayerName,
                                "id":LayerId
                            };
                    _this.juanlianLayers.push(item);

2、移除影像

                    //删除数组里的值
                    for(let i = 0; i<_this.juanlianLayers.length; i++){
                        if(_this.juanlianLayers[i].name == LayerName){
                               _this.juanlianLayers.splice(i,1);
                        }
                    }

3、加载或移除影像时，计算数组长度是否等于2。若等于2，则显示卷帘按钮。

                //数组长度为2时，才能显示卷帘
                if(_this.juanlianLayers.length == 2){
                    _this.showJuanLian = true;
                }else{
                    _this.showJuanLian = false;
                }

4、点击卷帘按钮后

          //卷帘功能
          juanLianControl:function(){
                let _this = this;
                //先加载layer，后设置colorFilters时，layer不会自动更新。因此需要把原先加载的layer删除后，在重新加载的同时设置colorFilters属性。
                this.earth.removeLayer(this.juanlianLayers[0].name);
                this.earth.removeLayer(this.juanlianLayers[1].name);
                let beforeLayer = this.earth.addImageLayer({
                    name: this.juanlianLayers[0].name,
                    source: new GV.GeneralLayerSource({
                        driver:'wmts',
                        url:_this.IMAGE_URL,
                        format:'png',
                        layers: this.juanlianLayers[0].id,
                        matrixset: 'EPSG:4326'
                    })
                });
                let afterLayer = this.earth.addImageLayer({
                    name: this.juanlianLayers[1].name,
                    source: new GV.GeneralLayerSource({
                        driver:'wmts',
                        url:_this.IMAGE_URL,
                        format:'png',
                        layers: this.juanlianLayers[1].id,
                        matrixset: 'EPSG:4326'
                    }),
                    colorFilters:{
                        rollFilter: {
                            max_percent_horizon : 0,
                            min_percent_horizon : 0.5,
                            max_percent_vertical: 0,
                            min_percent_vertical: 0,
                            opposite: false          
                        }
                    }
                });
            }

功能演示：

微信截图_20180830174030.png