SuperMap iClient3D for WebGL时序影像

本文主要是介绍SuperMap iClient3D for WebGL时序影像，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

前言
一、加载影像数据
二、创建时间条
- 1.这里使用Echarts来创建TimeLine，首先需要引入相关依赖
- 2.初始化Echarts实例
三、设置不同年份影像交替显示
四、效果

前言

时序影像可以用于对地球表面的变化进行定量分析和监测。通过对多时相遥感影像的比较和分析，可以揭示地理现象的时空演变规律，提供科学依据和决策支持。下面就让我们来看看如何在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 = falselayerArr.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})