WebGIS多维栅格时态动画——从数据到前端（2）

在开始之前

具备以下条件，才能完整实践这一工作流程。
具有GeoScene Enterprise 5.0及以上版本并已按照上一篇文章的步骤获取数据和成功发布多维影像服务。
具有GeoScene Maps SDK for JavaScript 4.x 的基础。
本文的完整代码托管于codepen网站：https://codepen.io/dansdocker/pen/myeyNev

建立WebGIS网页的基础结构

创建HTML、CSS、创建对于css和js资源的引用。这里引用的最新的4.32版本。
基础HTML

模块化导入GeoScene Maps SDK for JavaScript的类


用最新的语法，导入GeoScene Maps SDK for JavaScript 模块引用。
除了用到基础的Map、SceneView，Legend以外，
还要用到ImageryTileLayer加载影像切片图层；
用DimensionalDefinition和MultidimensionalSubset描述维度和变量信息；
用colorRamps、RasterStretchRenderer创建指定色带的栅格拉伸渲染；
用TimeSlider时间滑块控制和播放多维栅格的时态动画。
导入模块引用

编写图层数据可视化

1、从GeoScene Maps SDK 网站查询想要的色带的色号
https://doc.geoscene.cn/javasc ... amps/
查询条件 颜色方案blues 颜色数量5 点搜索
使用GeoScene color ramps - Blue 5 最接近上一篇文章制图用到的色带。点击copy hex value，粘贴到记事本。得到如下色号：
紫蓝连续配色
//GeoScene color ramps - Blue 5
const colors = ["#f1eef6ff","#bdc9e1ff","#74a9cfff","#2b8cbeff","#045a8dff"]
依据这些色号创建拉伸色带，并创建拉伸渲染。
创建指定色带拉伸渲染

创建图层与视图

访问服务地址，获得多维信息。
浏览器访问https://win76.maps.com/server/ ... erver
在最下方点击 Multidimensional Info 多维信息接口。
多维信息接口
查询到的多维信息，变量名为gust@sfc，维度名为StdTime，间隔时间一小时，并给了15个时间戳的集合。代表该影像服务具备风速变量在这15个时间点的数据。
查询到的多维信息
依据查询到的多维信息，在js中创建MultidimensionalSubset多维信息子集。
填写多维信息
使用多维信息和渲染器创建图层、创建天地图影像底图、创建三维场景视图。
创建图层、地图、场景视图
这一步结束以后，地图上已经出现了地球和多维影像，其配色与上一篇文章桌面制图时效果类似。
场景加载多维栅格

添加时间滑块微件，让多维影像数据动起来

加载图层到视图后，取到时间序列信息，创建时间滑块微件。
时间滑块


Web3D场景视图的多维影像

文章来源：https://www.jianshu.com/p/7f7f718c7b4e