SuperMap iClient3D for WebGL时序影像

---

前言

时序影像可以用于对地球表面的变化进行定量分析和监测。 通过对多时相遥感影像的比较和分析，可以揭示地理现象的时空演变规律，提供科学依据和决策支持。下面就让我们来看看如何在SuperMap iClient3D for WebGL中模拟时序影像的演变效果。

---

一、加载影像数据

这里使用的是某天地图在线服务

let imgArr = [
        {url:"https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img_2015/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0",layerName:'某某省2015年影像'},
        {url:'https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img_2016/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0',layerName:'某某省2016年影像'},
        {url:'https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img_2017/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0',layerName:'某某省2017年影像'},
        {url:'https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img2018/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0',layerName:'某某省2018年影像'},
        {url:'https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img2019/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0',layerName:'某某省2019年影像'},
        {url:'https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img2020/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0',layerName:'某某省2020年影像'},
        {url:'https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img2021/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0',layerName:'某某省2021年影像'},
        {url:'https://guangxi.tianditu.gov.cn/ime-server/rest/tdtgx_img2022/wmts?tk=a55278eb7ef41fc91421fe7b2be86aa0',layerName:'某某省2022年影像'}
        ]
        
        let layerArr = [];
    
    for(let i=0;i<imgArr.length;i++){
        let wmts = new SuperMap3D.WebMapTileServiceImageryProvider({
                    url: imgArr[i].url,
                    format: "image/jpgpng",
                    layer: imgArr[i].layerName,
                    style: 'default',
                    tileMatrixSetID: 'guobiao028mm',
                    tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
                        "13", "14", "15", "16", "17", "18", "19", "20"
                    ],
                    tilingScheme: new SuperMap3D.GeographicTilingScheme()

                })
                let imagelayer = viewer.imageryLayers.addImageryProvider(wmts);
                imagelayer.show = false
                layerArr.push(imagelayer)
    }

二、创建时间条

1.这里使用Echarts来创建TimeLine，首先需要引入相关依赖

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2.初始化Echarts实例

var myEcharts=echarts.init(document.getElementById('myChart'))
    var option={
        timeline: {
                    //loop: false,        
                    axisType: 'category',
                    show: true,
                    autoPlay: true,
                    playInterval: 3000,
                    data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022']
                }
    };
    //设置配置
    myEcharts.setOption(option);

三、设置不同年份影像交替显示

myEcharts.on('timelinechanged', function (timeLineIndex) {
        for(var i=0;i<layerArr.length;i++){
            layerArr[i].show = false
        }
        console.log(timeLineIndex)
            layerArr[timeLineIndex.currentIndex].show = true
        
    })

四、效果