关于热力图展示大量数据点耗时导致浏览器崩溃问题及解决方案

news/2024/11/9 0:43:48/

目录

问题描述

问题分析

解决方案


问题描述:

  1. Web前端在地图上加载空间数据库里存储的地块中心点时因为数据点太多从而导致页面崩溃。
  2. Mybatis查询大量数据时,耗时时间更长是主要原因。8万多条数据,数据库查询最慢0.6s, Mybatis查询结果需要4s+。

问题分析:

  1. 数据点太多,超过800个点时页面卡顿,更多点时地图页面卡死。

        目前地图加载地块中心点时,添加了作业类型、年份、地区过滤;大大减小了数据量,缩小了数据点范围, 页面可正常加载。

  1. 数据加载时间过长

        地图加载完成后,等待数据展示时间过长。

解决方案:

一、数据抽稀

  1. 采用聚合算法、地图距离网格化、查询优化、存储过程进行数据点抽稀。

(1) 实现逻辑:根据xmin、ymin、xmax、ymax值限定的最大地理范围进行纵横切分,gridXcount列、gridYcount行。 将每个切分后的小块使用st_makeenvelope() 函数转换成多边形并筛选出在这个多边形内的多个地块中心点所构成的曲面的一个中心点( 这个中心点不是切分后多边形的中心点,也不是某个地块中心点,可以说是新生成的一个曲面中心点),然后筛选距离中心点41米以内的地块中心点1个(这里大约取5个,结果集会没那么稀疏,具体多少个可以按照需求和具体结果)。

 

(2) 函数参数:

tab_name

表名(要操作的表)

xmin

切割范围参数: x轴最小值

ymin

切割范围参数: y轴最小值

xmax

切割范围参数: x轴最大值

ymax

切割范围参数: y轴最大值

gridXcount

网格划分:用于x轴切分

gridYcount

网格划分:用于y`轴切分

(3) 涉及到的函数:

函数名称

API

ST_distance

获取两个几何对象间的距离

http://postgis.net/docs/ST_Distance.html

st_collect

从其他几何对象的集合中返回一个空间ST_Geometry的值

http://postgis.net/docs/ST_Collect.html

st_pointonsurface

返回曲面上的一个点

http://postgis.net/docs/ST_PointOnSurface.html

st_makeenvelope

从给定的最小值和最大值构造一个Polygon。输入值必须在给定的SRID的有效范围内。

http://postgis.net/docs/ST_MakeEnvelope.html

st_dwithin

如果两个几何对象间距离在给定值范围内,则返回TRUE

http://postgis.net/docs/ST_DWithin.html

  1. 使用网格将数据进行切分,每次数据请求需要计算时间比较长,但是抽稀后每次地块数据量变化不大, 可以每日定时将抽稀完的中心点存到表里,用于前端页面加载。

数据展示从之前的实时计算需要3s 减少到只需不到1s (网络比较好的情况下)。

  1. 最终效果图及耗时

点数

数据查询时间(秒)

抽稀前:

170988

7.57s+

抽稀后

5341

2.67s

提前计算后:

5341

<1s

 

参考:

借鉴抽稀逻辑:https://blog.csdn.net/luojingweikai/article/details/88401201

Postgresql数据库学习手册:http://www.postgres.cn/docs/12/index.html

Postgresl 数据库plgssql语言语法:https://www.postgresql.org/docs/current/plpgsql-overview.html

PostGISx相关学习文档:http://postgis.refractions.net/docs/PostGIS_FAQ.html

二、尝试Node.js解决方案

抽稀的方案没有使用时,仔细研究了下接口代码,发现接口耗时的主要原因是Mybatis查询返回结果耗时时间比较长,讨论过后来尝试使用Node.js解决数据查询问题以及json文件读取耗时。发现Node.js 在查询空间管理数据库读取json文件耗时很短:

最后也没有使用Node.js的方式,因为发现Node.js 访问数据库的代码不能添加到vue项目里。

三、修改接口查询方式:采用jdbc连接查询

这个也是最终解决方案,不再使用Mybatis这个ORM工具、直接jdbc连接查询数据并返回需要的结果集。

耗时不到900ms, 数据点 8.7万+,数据大小3.45Mb 及效果图:

其实接口改好后,通过postman获取数据时间是1.6s+, 数据传输时间占了一半( 大约 0.7s ), 项目部署后看到其实浏览器端对传输数据进行了压缩, 从3.6Mb 压缩到了1.6Mb, 节省了不少时间。再者网速也提升了不少,目前可以看到接口查询数据以及返回结果集的耗时很小很理想。


http://www.ppmy.cn/news/31137.html

相关文章

Java学习环境一站说明(保姆级详细教学)

1.Java开发环境搭建官网下载www.oracle.com2.安装注意&#xff1a;1.选择安装位置时尽量不要安装到C盘&#xff0c;路径中不要有空格以及中文的存在2.开发人员安装的jdk中包含了jre&#xff0c;所以不需要单独安装jre3.环境变量配置打开高级系统设置2.点击环境变量3.在系统变量…

[随笔】repo使用

前提环境&#xff1a;repo已下载并可用&#xff0c;Git服务器也已搭建完毕&#xff0c;使用的是gitblit-1.9.1。操作系统ubuntu16.04 windows10.1.在Git服务器分别创建3个仓库&#xff1a;common,device,manifests2.编写一个名字为default.xml的文件&#xff0c;内容如下&#…

python自带数据的模型合集

鸢尾花----聚类 Python鸢尾花数据集通常用于分类问题&#xff0c; 这些模型都可以通过Python中的Scikit-learn库进行实现。同时&#xff0c;也可以对这些模型进行参数调优以提高模型的准确性。 Logistic Regression&#xff08;逻辑回归&#xff09;&#xff1a; 逻辑回归是一…

程序员中的女性力量——做不被定义的自己

她是office lady&#xff0c;亦是程序媛&#xff0c;程序员界的靓丽色彩&#xff0c;不可或缺。 “只有那些疯狂到以为自己能够改变世界的人——才能真正改变世界。” 女性该如何定义自己&#xff1f;程序媛怎么发挥自己最大的价值。 争取自己做选择&#xff0c;经济和思想都独…

数据清洗和特征选择

数据清洗和特征选择 数据清洗和特征挖掘的工作是在灰色框中框出的部分&#xff0c;即“数据清洗>特征&#xff0c;标注数据生成>模型学习>模型应用”中的前两个步骤。 灰色框中蓝色箭头对应的是离线处理部分。主要工作是 从原始数据&#xff0c;如文本、图像或者应…

JavaScript混淆——逆向思维的艺术

在本文中我们将介绍三种常见的JavaScript混淆技术。 1.混合名称 通过将函数名称和变量名混合使用&#xff0c;我们可以使代码更难读。下面是一个使用名称混合的JavaScript函数。 function c(a){var b[2,4,8,a],db[0]b[1]b[2]b[3],ed""a;return e}混合名称技术通过…

java性能分析-堆内存最佳实践-堆分析

堆内存最佳实践 优化垃圾回收器标志参数很重要但是采用更好的编程实践获得更大的性能提升 1.谨慎的创建对象并尽快的丢弃&#xff0c;是更好的内存是提高gc更好的方法 2.频繁创建某种类型的对象会导致整体的性能变差 对象复用设计 线程局部变量 每个线程中创建一个局部变量…

MySQL索引优化

5 索引优化 5.1 索引单表优化案例 建表&#xff1a; CREATE TABLE IF NOT EXISTS article(id INT(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,author_id INT(10) UNSIGNED NOT NULL,category_id INT(10) UNSIGNED NOT NULL,views INT(10) UNSIGNED NOT NULL,comment…