海量数据展示-点聚合与热力图

热力图是webgis中非常常见的需求，当数据量不大时对应用影响不大，但是当数据达到几百万时，即便使用后端渲染也比较困难。这时我们可以借助superluster.js来进行点聚合，然后进行后端渲染，使得地图流畅度大大增加。本文只处理8-11级的数据，后面的使用原先的数据渲染，完成所有展示需要两个服务

supertiler生成Mbtiles

参考国外的supertiler项目，先把生成geosjson,然后用命令导出mbtiles

supertiler -i user.geojson -o points.mbtiles -maxZoom 11  -radius 1

也可以接入数据动态生成geojson,通过计算extent，减少生成矢量切片时遍历的，优化性能。(一万个点聚合处理ssd里处理只要一秒左右,六百万点聚合处理大概1.5分钟)

           let xmin=Infinity;
            let ymin=Infinity;
            let xmax=-Infinity;
            let ymax=-Infinity;
            result.recordsets[0].forEach(element => {

                let lon=element['lon']
                let lat=element['lat']
                if(lon>xmax){
                    xmax=lon
                }
                if(lat>ymax){
                    ymax=lat
                }

                if(lon<xmin){
                    xmin=lon
                }
                if(lat<ymin){
                    ymin=lat
                }
                let geo= {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                        type: 'Point',
                        coordinates: [lon, lat]
                    }
                }
                geojson.push(geo)
            });

function long2tile(lon, zoom) {
    return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
}
function lat2tile(lat, zoom) {
    return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
}

geoserver发布Mbtiles

下载mbtiles,wps插件,解压后放入geoserver中

新建mbtiles数据源发布

实际效果

参考资料:

https://build.geoserver.org/geoserver/2.17.x/community-latest/

https://docs.geoserver.org/stable/en/user/community/mbtiles/index.html

https://blog.csdn.net/dyxcome/article/details/98375453?locationNum=4&fps=1

https://github.com/ChrisLoer/supertiler/

https://zhuanlan.zhihu.com/p/60843204