一种大量遥感数据的前端渲染方法

技术领域

本申请涉及时空大数据可视化的技术领域，特别是一种大量遥感数据的前端渲染方法。

背景技术

时空大数据可视化属于一个遥感和计算机领域结合的方向。在前端设备中渲染大量遥感数据时，由于计算机内存容量的限制，所以不能保存太大的实例数据，导致时空大数据在前端可视化在业界一直是一个难点。

遥感数据具有典型的时间周期长和空间分布广的特性。比如，在水利防汛场景中会应用遥感图像数据来分析一段时间内的离散时间点的主干上下游流域、支流河道内的水位情况来分析水势的变化，如图1，需要在前端渲染淮河不同时刻的主干和支流水深数据。而且遥感图像数据在煤炭、石油开采和湖泊水体富营养化、山火预测等场景中也有着广泛应用。

但是对于遥感图像数据多时刻和多点位的数据特性在前端渲染时，如果全部预先加载，内存占用可能达到十几GB，就不得不面临对于前端设备的内存消耗过大的问题，会导致前端在渲染数据时应用崩溃。

发明内容

本专利对于多时刻、多点位数据类型提供一种高效的预加载渲染流程。

第一方面，提供了一种大量遥感数据的前端渲染方法，包括：

前端通过流传输的方式接收服务器发送的流数据；

前端根据渲染窗口执行图层实例化操作，起始时前端根据起始时刻和第一时刻的遥感数据进行图层实例化，渲染得到起始时刻和第一时刻的图层实例，第一时刻为起始时刻的下一时刻，之后每次完成单个时刻的遥感数据的图层实例化操作，并将已经渲染且显示过时刻的数据从内存中释放掉，包括将当前时刻之前的第二个时刻的数据进行释放；

前端将图层实例数据挂载到三维地球进行显示。

结合第一方面，在第一方面的某些实现方式中，所述方法还包括：

前端向服务器发送流数据的起始时刻，服务器从起始时刻开始向前端发送流数据。

结合第一方面，在第一方面的某些实现方式中，在前端显示第一目标时刻的图层实例数据时，前端同步开始执行根据第二目标时刻的遥感数据进行图层实例化，其中第二目标时刻为第一目标时刻之后的第一个时刻或第二个时刻。

结合第一方面，在第一方面的某些实现方式中，图层实例化操作和显示操作异步执行。

结合第一方面，在第一方面的某些实现方式中，所述前端将图层实例数据挂载到三维地球进行显示，包括：

初始化显示器定时器；

判断当前是否是起始时刻，如果是，则通过原始数据实例化起始的两个时刻的图层实例，并显示起始时刻的图层实例；如果否，则把实例化后一时刻图层实例的任务放入异步任务中；

判断异步任务中当前时刻的图层是否已经完成实例化，如果是，则渲染当前时刻的图层实例，并将定时器切换到下一时刻；如果否，则延迟0.5秒后再次执行判断。

结合第一方面，在第一方面的某些实现方式中，所述遥感数据包括组成网格的所有节点的经纬度和深度数据，以及每个网格的节点信息。

结合第一方面，在第一方面的某些实现方式中，所述方法还包括：

前端响应来自用户的移动和/或放大缩小的操控指令，对应显示所述操控指令对应区域的图层实例数据。

结合第一方面，在第一方面的某些实现方式中，所述前端通过流传输的方式接收服务器发送的流数据，包括：

通过建立websocket长连接协议实现从服务端分时刻传给前端。

结合第一方面，在第一方面的某些实现方式中，所述方法应用的前端浏览器为基于Cesium开源可视化平台。

第二方面，提供了一种电子设备，所述电子设备用于执行如上述第一方面中的任意一种实现方式中所述的方法。

与现有技术相比，本申请提供的方案至少包括以下有益技术效果：

(1)提出一种对大量遥感可视化数据的流传输方式，在系统执行中最大化的节约了结果数据网络传输的时间。让前端用户能在尽量短的时间内看到有意义的结果数据，后面随着前端浏览器边演示演示，服务端会同时进行数据传输，大大节约用户的等待时间。

(2)提出前端渲染图层数据懒加载的概念，同一时刻前端设备中最多只同时渲染两个时刻的图层实例。当渲染完一个时刻，就销毁使用过的图层数据，再去滚动加载后面时刻的图层实例，从而大大节约了前端设备内存的占用，防止浏览器内存消耗过度而崩溃。

(3)由于是直接通过遥感的原始数据，在前端通过十几万个由坐标点位构成的多边形实例化图层实例来渲染，所以用户在查看细节数据时无论怎样放大，都可以特别细腻的显示出数据值的颜色，相比图片来说更加细腻。

附图说明

图1为一种遥感图像数据的示意图。

图2示出了本申请实施例提供的一种针对大量遥感数据的前端渲染方法的示意图。

图3为服务器端存储网格基础数据的示意图。

图4为服务端存储最终遥感数据的格式示意图。

图5为本发明中服务端向前端发送遥感数据的示意图。

图6为前端渲染遥感数据的方法示意图。

图7为前端渲染遥感数据的方法示意图。

图8为图层实例行为异步执行的示意图。

具体实施方式

下面结合附图和具体实施例对本申请作进一步详细的描述。

针对时空大数据消耗内存过大的问题，本发明提出一种大量遥感数据前端可视化渲染的方法，整体思路先根据前端请求的时刻，服务端再通过流传输的方式向前端发送从本时刻开始的分片遥感数据。前端接收到遥感数据以后，动态调整渲染窗口，根据当前时刻来渲染当前分片和下一分片两个时刻的遥感数据。

图2示出了本申请实施例提供的一种针对大量遥感数据的前端渲染方法的示意图。具体包括以下步骤。

(1)前端向服务器发送流数据的起始时刻。

相应地，服务器接收前端发送的起始时刻。

(2)服务器通过流传输的方式，从起始时刻开始向前端发送流数据。

相应地，前端接收服务器发送的流数据。

大量遥感数据的前端渲染方法步骤(2)中，服务器端首先存储需要用于渲染的网格基础数据。包括两部分：1.组成网格的所有点的经纬度。2.每个网格是通过哪几个点位组成的。正如图3，首先在一个文件中保存1到9所有点的地理位置坐标。然后在另一个文件中，保存1到4号的每个网格分别是由哪4个点位组成的。

除了用于渲染的网格基础数据，如图4，在服务器端还需要保存每个网格在各个时刻的数值数据。例如在水利项目中代表水深，在煤矿探测项目中，表示地面深度。

一般遥感数据具有分时的特性。如果在服务端将处理好的多时刻数据一次性传给前端，数据量会比较大，不仅耗时明显而且消耗前端设备的内存资源。针对这个问题，在数据传输阶段采取流传输的方式，将处理好的数据通过长链接的方式传给前端，这样就可以不必让前端等接收到全部数据以后才能解析数据。在服务端接收到前端请求来的具体时刻时，会通过长连接依次把该时刻和后面时刻的网格数据传给前端浏览器程序。前端想要获取某一时刻开始的数据，服务端就会从某一时刻开始传输，同时前端就可以实时获取并且使用数据，实现边传输边使用数据。

在服务端和前端通过流传输的方式来实现大量遥感数据的分片传输，具体通过建立websocket长连接协议实现从服务端分时刻传给前端。在服务端通过遥感影像数据和相应传感器提供的原始数据，经过模型计算，将历史数据或者未来预测数据保存在服务端文件。首先前端通过长连接向服务端发送一个起始时刻，服务端就会将后续时刻的数据主动依次推送给前端。

如图5所示，首先在服务端通过传感器和遥感数据生成了不同时刻的数据。前端可以从A时刻开始请求，服务端就从A时刻开始分片向前端传输数据。如果前端从F中间时刻开始请求，服务端就从F时刻开始向前端发送分片数据。

(3)前端根据起始时刻和第一时刻的遥感数据进行图层实例化，渲染得到起始时刻和第一时刻的图层实例，第一时刻为起始时刻的下一时刻。

(4)前端执行后续图层实例化操作，每次完成单个时刻的遥感数据的图层实例化操作，并将已经渲染的数据从内存中释放掉，包括将当前时刻之前的第二个时刻的数据进行释放。

大量遥感数据的前端渲染方法步骤(3)和(4)中，前端在接收到服务端发送过来的某一时刻加工过的地理信息数据之后，会先保存到浏览器程序的全局缓存数据之中。随着渲染时刻的后移，浏览器程序会从这个全局缓存数据中获取服务端传来的各个时刻的原始数据，加工成图层实例缓存在前端设备的内存中。而此时每个图层实例都基本包括十几万个网格图形实例，所以单个的图层实例占用内存还是比较大的。如图6中，浏览器此刻渲染的是时刻B和时刻C的图层，随着前端浏览器渲染时刻的后移，浏览器会生成后面时刻的图层实例，释放掉前面已经渲染过的图层实例。

具体地，前端从服务端获取到对应时刻开始的流数据后，会通过当前时刻和下一时刻的数据来生成可用于渲染的图层实例对象，因为每个时刻的遥感数据可能有十几万个网格，每一个网格都是一个图形实例，即每一个用于渲染的图层实例都会包含十几万个网格实例，所以内存占用还是比较多的。在前端设备中只同时生成两个时刻的图层实例，而对于再后面时刻的数据，会等前端继续往后渲染时再去生成图层实例。同时，前端会销毁已经渲染过的时刻的图层实例。这样就实现了节约内存的目的。

如图7所示，前端只实例化当前时刻F和下一时刻G的图层实例数据。对于之前的数据，前端短时间内不会再用到就会随着渲染时刻的后移而从内存中释放掉。而后面H、I、J、K的图层实例数据，虽然已经被前端设备接收到，但是渲染窗口还没有移动到H数据上，所以并未开始实例化。再后面从L开始的数据，服务端正在往前端传输，还未被前端接收到。

前端接收到时间分片的显示数据之后，将显示数据追加到浏览器前端程序的监听数据中。随着当前渲染时刻的后移，也有越来越多的显示数据被传到前端浏览器中，但是若是想用于前端浏览器的渲染，还需要浏览器把接收到的显示数据转换成图层实例，才能挂载到三维地球上。进一步地，前端响应来自用户的移动和/或放大缩小的操控指令，在三维地球上对应显示所述操控指令对应区域的图层实例数据。浏览器前端程序只对当前时刻和下一时刻的数据进行图层的实例化，当渲染时刻继续往后推移时，再利用间隔时间把后面的数据图层实例化，把显示完的时刻的图层实例销毁，这样最多同时只有两个时刻的数据被图层实例化。

在前端显示起始时刻或第一时刻的图层实例数据时，前端同步根据第二时刻的遥感数据进行图层实例化。也就是说，在前端显示第一目标时刻的图层实例数据时，前端同步开始执行根据第二目标时刻的遥感数据进行图层实例化，其中第二目标时刻为第一目标时刻之后的第一个时刻或第二个时刻。

前端浏览器的渲染进程和计算进程是互斥的，在浏览器刷新渲染前端显示内容的时候是无法处理计算逻辑也就是图层实例化的计算。所以为了不影响浏览器的刷新效率，会把实例化G时刻图层实例的行为放入异步事件中来执行，这样就可以在浏览器完成F时刻的刷新渲染后，在还没开始渲染G时刻的时间段内，来实例化G时刻的图层实例。从而利用相邻时刻刷新渲染的间隙，来执行计算逻辑，不影响用户体验。而且在显示G时刻之前，算法先去检查G时刻的图层实例是否已经实例化完成，如果还没有渲染完成，会延迟0.5秒的时间再来检查，直到浏览器真正渲染完了G时刻的图层实例后，才会真正显示G时刻的图层实例数据。

完整算法如图8所示。首先初始化显示器定时器，判断当前是否是起始时刻。如果是，则通过原始数据实例化起始的两个时刻的图层实例，并显示第一个时刻(起始时刻)的图层实例。如果否，则把实例化后一时刻图层实例的任务放入异步任务中。判断异步任务中当前时刻的图层是否已经完成实例化，如果是则渲染当前时刻的图层实例，并将定时器切换到下一时刻。如果否，则延迟0.5秒后再次执行判断。

本发明提出的大量遥感数据的前端可视化方法可适用于各类时空大数据，普适性较高。本实例将从服务端和前端程序的实现，前端浏览器基于Cesium开源可视化平台来介绍本发明实施实例。

Cesium开源地理可视化平台是AGI公司出品的面向三维地球的开源JavaScript图形库，Cesium专注于时空数据可视化，在交通、规划、城市管理、地形仿真等领域应用广泛，本文以Cesium平台作为发明方法实施的基础地理信息平台。

大量遥感数据显示方案的服务端具体实施过程如下：

(1)大量遥感数据显示方案的服务端具体实施过程如下，与前端建立websocket长连接，并且设置服务器的响应逻辑：

Step1：初始化sockjs服务器的响应逻辑：

var sockjs_opts＝{}；//sockjs服务器相关配置

var sockjs_server＝sockjs.createServer(sockjs_opts)；

sockjs_server.on('connection',function(conn){

conn.on('data',function(datetime){

let currentDatetime＝datetime；

判断currentDatetime是否是正确的时间格式

do{

根据datetime去结果文件中定位，获取到对应时刻的数据

let data＝对应时刻的数据；

conn.write(data)；//将数据data传给前端程序

使currentDatetime自增为下一个时间点

}while()//根据currentDatetime判断是否数据已经发送完成

})；

})；

Step2：初始化node服务器：

var app＝new koa()；

var server＝http.createServer(app.callback())；

sockjs_server.installHandlers(server,{prefix:'/data'})；

server.listen(9999,'0.0.0.0')；

(2)而在客户端实现如下，分为和服务端建立长连接、数据接收到以后对前端渲染图层的实例化：

Step1：通过sockjs库实例化websocket连接实例后，通过onopen、onmessage、onclose这些回调函数来实现消息的发送、接收、连接关闭处理：

var sockjs_url＝'/data'；

var sockjs＝new SockJS(sockjs_url)；

sockjs.onopen＝function(){

print('打开连接',sockjs.protocol)；

}；

sockjs.onmessage＝function(e){

print('接收到消息',e.data)；

接收到某一时刻的数据后，将这一数据保存到全局监听数据中

globalRawData.push(e.data)

}；

sockjs.onclose＝function(){

print('连接关闭')；

}；

Step2：在前端浏览器程序中通过全局监听数据的改变，把新的数据实例化成图层对象，完成渲染。这里前端浏览器程序使用的是react框架，通过useEffect来实现数据变化的响应式监听功能：

import{useEffect}from‘react’

useEffect(()＝>{

获取当前渲染时刻和下一时刻的原始数据，进行图层实例化

},[globalRawData])//如果接收渲染数据的全局监听数据改变

useEffect(()＝>{

如果当前正在渲染的图层实例不是当前时刻的，并且当前时刻的图层实例已经完成实例化，就去渲染当前时刻的图层实例

},[])//监听图层实例化数据改变

Step3：通过定时器来更新前端渲染的时刻，同时将接收到的过期原始数据和图层实例数据释放掉：

let interval；

useEffect(()＝>{

startTime()；

return()＝>{

clearInterval(interval)

interval＝null

}

},[])//前端页面组件加载时执行

const startTime＝()＝>{

interval＝setInterval(()＝>{

const nowdate＝moment(new Date()).format(“YYYY.MM.DD HH:mm:ss”)//获取到当前需要渲染的时间

停止渲染过期的图层实例并且释放过期的图层实例

释放掉前端接收到的过期的原始数据

},1000)

}

在服务端对传感器和遥感数据进行模型分析以及处理后，通过流传输将待渲染数据分片传输到前端设备进行渲染。1.通过流传输的方式将数据分片传输到前端设备中，一方面可以节约前端获取当前数据的时间，而且可以通过定制当前缓存数据的个数，来节约数据所占用的内存空间。2.只针对当前和下一时刻生成渲染所需的图层对象并加载到内存中，对于之前时刻渲染过的图层对象进行销毁，以达到节约内存的目的。

本发明虽然以较佳实施例公开如上，但其并不是用来限定本发明，任何本领域技术人员在不脱离本发明的精神和范围内，都可以做出可能的变动和修改，因此，本发明的保护范围应当以本发明权利要求所界定的范围为准。