在開(kāi)始之前

具備以下條件，才能完整實(shí)踐這一工作流程。

具有GeoScene Enterprise 5.0及以上版本并已按照上一篇文章的步驟獲取數(shù)據(jù)和成功發(fā)布多維影像服務(wù)。

具有GeoScene Maps SDK for JavaScript 4.x 的基礎(chǔ)。

本文的完整代碼托管于codepen網(wǎng)站：https://codepen.io/dansdocker/pen/myeyNev

建立WebGIS網(wǎng)頁(yè)的基礎(chǔ)結(jié)構(gòu)

創(chuàng)建HTML、CSS、創(chuàng)建對(duì)于css和js資源的引用。這里引用的最新的4.32版本。

基礎(chǔ)HTML

模塊化導(dǎo)入GeoScene Maps SDK for JavaScript的類

用最新的語(yǔ)法，導(dǎo)入GeoScene Maps SDK for JavaScript 模塊引用。

除了用到基礎(chǔ)的Map、SceneView，Legend以外，

還要用到ImageryTileLayer加載影像切片圖層；

用DimensionalDefinition和MultidimensionalSubset描述維度和變量信息；

用colorRamps、RasterStretchRenderer創(chuàng)建指定色帶的柵格拉伸渲染；

用TimeSlider時(shí)間滑塊控制和播放多維柵格的時(shí)態(tài)動(dòng)畫(huà)。

導(dǎo)入模塊引用

編寫(xiě)圖層數(shù)據(jù)可視化

1、從GeoScene Maps SDK 網(wǎng)站查詢想要的色帶的色號(hào)

https://doc.geoscene.cn/javascript/4.29/visualization/symbols-color-ramps/geoscene-color-ramps/

查詢條件 顏色方案blues 顏色數(shù)量5 點(diǎn)搜索

使用GeoScene color ramps - Blue 5 最接近上一篇文章制圖用到的色帶。點(diǎn)擊copy hex value，粘貼到記事本。得到如下色號(hào)：

紫藍(lán)連續(xù)配色

//GeoScene color ramps - Blue 5

const colors = ["#f1eef6ff","#bdc9e1ff","#74a9cfff","#2b8cbeff","#045a8dff"]

依據(jù)這些色號(hào)創(chuàng)建拉伸色帶，并創(chuàng)建拉伸渲染。

創(chuàng)建指定色帶拉伸渲染

創(chuàng)建圖層與視圖

訪問(wèn)服務(wù)地址，獲得多維信息。

瀏覽器訪問(wèn)https://win76.maps.com/server/rest/services/xuds/WindGust_crf/ImageServer

在最下方點(diǎn)擊 Multidimensional Info 多維信息接口。

多維信息接口

查詢到的多維信息，變量名為gust@sfc，維度名為StdTime，間隔時(shí)間一小時(shí)，并給了15個(gè)時(shí)間戳的集合。代表該影像服務(wù)具備風(fēng)速變量在這15個(gè)時(shí)間點(diǎn)的數(shù)據(jù)。

查詢到的多維信息

依據(jù)查詢到的多維信息，在js中創(chuàng)建MultidimensionalSubset多維信息子集。

填寫(xiě)多維信息

使用多維信息和渲染器創(chuàng)建圖層、創(chuàng)建天地圖影像底圖、創(chuàng)建三維場(chǎng)景視圖。

創(chuàng)建圖層、地圖、場(chǎng)景視圖

這一步結(jié)束以后，地圖上已經(jīng)出現(xiàn)了地球和多維影像，其配色與上一篇文章桌面制圖時(shí)效果類似。

場(chǎng)景加載多維柵格

添加時(shí)間滑塊微件，讓多維影像數(shù)據(jù)動(dòng)起來(lái)

加載圖層到視圖后，取到時(shí)間序列信息，創(chuàng)建時(shí)間滑塊微件。

時(shí)間滑塊

Web3D場(chǎng)景視圖的多維影像