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

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

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

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

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

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强大得益于其另一个强大的支持：对矢量切片技术的支持。

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

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

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

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

两种策略的比较：

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

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