海量数据展示-点聚合与热力图
热力图是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