当前位置: 代码迷 >> 综合 >> MapBox GL JS动态空间数据渲染策略
  详细解决方案

MapBox GL JS动态空间数据渲染策略

热度:30   发布时间:2024-01-09 04:50:42.0

动态空间数据是指面向主题的、集成的、动态更新的、持久的空间数据集合。

在开发过程中经常用到动态数据:数据某个属性需要实时更新。例如:全省各地区的污染值数据,污染值数据是实时更新的。

如果我们想按照污染值对地区渲染不同的颜色,并可以在前端查询历史数据,我们无法按照传统的方法,将污染值信息作为一个字段将其发布成服务,因为这个字段实时更新,如果要实时更新修改数据服务,会非常麻烦,如果还想查询历史数据,修改服务就完全不现实了。

这是我们可以分两种策略,解决以上问题。

1、服务器端策略

即在服务器端将数据按照动态属性分组,将分组数据返回到前端,前端按照不同分组渲染。后端地理数据需要以GeoJson存储,在分组后,各组数据按照GeoJson格式返回到前端,前端渲染。

此处要注意:数据量如果很大,注意传到前端的属性值数量,前端得到的数据量太大,不仅渲染慢,而且容易卡顿。

ArcGIS Server在大数据量下,表现差劲即是因为传至前端数据量过大的原因。

在大数据量时,MapBox提供的几种策略可以尝试:

https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/

另外针对动态的大量数据,我们也可以采用缓存方案:

缓存静态的,不随时间变化的地理数据。

缓存可以使用Redis,Memcahe,mongoDB等内存数据库,也可直接放到内存中(不做复杂查询的情况下)。

缓存静态数据可以节省将数据读到内存中的时间。在地理数据量大的情况下较适用。

在前端请求时,可以按照关联属性(常常为ID)将缓存的数据于动态数据关联并分组,也可在GeoJson中添加动态属性数据,并返回到前端。

前端只需将数据简单渲染即可。

此处比较MapBox GL JS与eCharts GL:

MapBox GL JS渲染后仍保留属性值信息,其将后台传来的数据全部保留。

eCharts GL只保留要素形状。后台只需将形状传到前端即可。

大量数据下MapBox GL JS速度明显慢与eCharts.

但是MapBox GL JS有后台强大的地理服务器支持,eCharts没有。这就引出下面策略,在策略2中,eCharts表现又明显慢于MapBox GL JS。

2、前端策略

MapBox GL JS强大得益于其另一个强大的支持:对矢量切片技术的支持。

矢量切片技术是地理服务的一大迭新,矢量切片使得很多问题迎刃而解。例如:数据样式变换、数据请求慢,甚至可以起到缓解服务器压力的作用。

对于动态数据的问题,同样可以使用矢量切片优化。

简言之,将动态数据的分类放到前端实现,在前端直接指定类别即表现的样式即可。

思路仍是将动态数据分离出来,在前端请求时,查询动态数据,按照标准分类,分类完成后,按照关联属性,将地理数据进行渲染。由于此时的地理数据是矢量切片,数据量较小,速度明显优化。

两种策略的比较:

服务器端策略:速度较快,可设计性较强。但服务器压力大。

前端策略:速度快于服务器端策略,数据分开存储,依赖两个服务器。服务器压力小,增加了一些前端压力。