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

news2024/11/18 3:47:54

目录

问题描述

问题分析

解决方案


问题描述:

  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.coloradmin.cn/o/398471.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【可信平台】开证问题汇总--1.无采购入库记录,2.箱码无产出记录

这里面的问题主要有两类, 批号无采购入库记录箱码无产出记录批号无采购入库记录 第一个问题,以批号 W200263242022100600018 为例。 MES里入库明细里能查到可信平台集成报错: 入库数量>采购数量 再看下入库明细里的情况: 可信平台集成提示物料库存不存在。(没有入库记…

【LeetCode】剑指 Offer(19)

目录 题目&#xff1a;剑指 Offer 36. 二叉搜索树与双向链表 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 题目&#xff1a;剑指 Offer 36. …

JUC并发编程共享模型之管程(三)(上)

三 共享模型之管程&#xff08;上&#xff09; 4.1 共享问题 问题发现 Slf4j public class ShareTest01 {static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1 new Thread(() -> {for(int i 0; i < 5000; i){count…

jvm理解

1.堆栈 JVM运行字节码时&#xff0c;所有的操作基本都是围绕两种数据结构&#xff0c;一种是堆栈&#xff08;本质是栈结构&#xff09;&#xff0c;还有一种是队列&#xff0c;如果JVM执行某条指令时&#xff0c;该指令需要对数据进行操作&#xff0c;那么被操作的数据在指令…

macos ncnn 安装踩坑记录···

安装真麻烦踩了无数坑&#xff0c;官方给的安装教程&#xff1a;macos安装ncnn, 安装过程老是报错&#xff0c;记录一下卡的比较久的&#xff0c;网上也不好找资料的错. 我的电脑&#xff1a; 1. 使用homebrew 的时候失败fatal: not in a git directory Error: Command failed…

用Python帮老叔选出好基金,大赚一笔,老叔专门提着茅台登门道谢

我有个老叔很喜欢买基金&#xff0c;因为不想被割韭菜&#xff0c;所以啥群都没进&#xff0c;全部自己精挑细选。 看着他的一个本子密密麻麻地写了一大堆东西&#xff0c;全是基金的数据分析&#xff0c;一大把年纪了挺不容易的&#xff0c;于是就决定帮他一把。 在跟他详谈…

合作伙伴确定过程

下销售单的时候&#xff0c;会由Sold—to Party&#xff08;售达方&#xff09;来下单。定单会有不同的Ship—to Party&#xff08;送达方&#xff09;。发票会走到被称为Bill—to Party&#xff08;收票方&#xff09;的一方&#xff0c;还有一方Payer&#xff08;付款方&…

GDAL python教程基础篇(1)——用OGR写入矢量数据

上一篇博客介绍了如何使用OGR读取矢量数据&#xff0c;那么怎么用OGR写入呢&#xff0c;下面就让我们一起学习怎么写入数据吧。 1.创建新文件 在写入数据之前我们首先需要确定写入对象&#xff0c;也就是先创建一个可供写入数据的对象。 创建对象使用driver.CreateDataSource…

4. STM32 OLED及keil调试简介

常用程序调试方法•串口调试&#xff1a;通过串口通信&#xff0c;将调试信息发送到电脑端&#xff0c;电脑使用串口助手显示调试信息•显示屏调试&#xff1a;直接将显示屏连接到单片机&#xff0c;将调试信息打印在显示屏上•Keil调试模式&#xff1a;借助Keil软件的调试模式…

Java基础面试题(一)

Java基础面试题 一、面向对象和集合专题 1. 面向对象和面向过程的区别 面向过程&#xff1a;是分析解决问题的步骤&#xff0c;然后用函数把这些步骤一步一步地实现&#xff0c;然后在使用的时候一一调用则可。性能较高&#xff0c;所以单片机、嵌入式开发等一般采用面向过程…

项目执行差,你应该如何推进解决?(万千项目)

在日常工作中&#xff0c;项目成员可能存在以下问题&#xff1a;1、沟通能力不足。团队成员之间不主动反馈沟通导致问题堆积影响项目进度&#xff1b;2、执行力不足。成员推一下动一下&#xff0c;不主动积极执行工作任务&#xff1b;3、技术能力不不足。一写代码全是bug&#…

使用 Wall 搭建个人照片墙和视频墙

下载 Github:https://github.com/super-tongyao/wall 国内仓库&#xff08;不推荐&#xff0c;只做加速访问&#xff0c;无编译包和发行版&#xff0c;以github仓库为准&#xff09;&#xff1a;https://gitee.com/Super_TongYao/wall 推荐github仓库&#xff0c;下载最新版…

小米把不干活的同事都裁了,给了n+2,留下的人年终奖才1个多月工资,工作压力还变大了,太冤了,还不如被裁!...

被裁一定是不幸&#xff0c;留下一定是幸运吗&#xff1f;也未必&#xff0c;来看看这位网友的爆料&#xff1a;我同学21届校招进小米&#xff0c;今年年前躲过了裁员&#xff0c;不干活的同事都被裁了&#xff0c;给了n2。但发年终奖时&#xff0c;他才拿了不到2个月工资&…

Nginx服务优化措施与配置防盗链

目录 一.优化Nginx的相关措施 二.隐藏/查看版本号 三.修改用户与组 四.设置缓存时间 五.日志切割脚本 六.设置连接超时控制连接访问时间 七.开启多进程 八.配置网页压缩 九.配置防盗链 1.配置web源主机&#xff08;192.168.79.210 www.zhuo.com&#xff09; 1.1 安装…

CentOS 7 安装 mysql 5.7 最新版本

最近学习 mysql 菜鸟教程 &#xff0c;在 CentOS 7 上&#xff0c;教程里安装 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm &#xff0c;el7-5 一定是比较旧的版本了&#xff0c;但是到哪里可以找到最新的版本呢&#xff1f;当然是官网和官方仓库 &a…

JS - var / let / const 区别

var &#xff1a;变量提升&#xff0c;定义的变量都会被提升到该作用域的最顶部&#xff0c;变量也可以在声明之前使用 let &#xff1a;块级作用域&#xff0c;不能重复定义const &#xff1a;块级作用域&#xff0c;不能重复定义&#xff0c;定义常量不能被修改&#xff1b;虽…

JeecgBoot 3.5.0 版本发布,开源的企业级低代码平台

项目介绍 JeecgBoot是一款企业级的低代码平台&#xff01;前后端分离架构 SpringBoot2.x&#xff0c;SpringCloud&#xff0c;Ant Design&Vue3&#xff0c;Mybatis-plus&#xff0c;Shiro&#xff0c;JWT 支持微服务。强大的代码生成器让前后端代码一键生成! JeecgBoot引领…

万有引力优化支持向量机SVM的回归预测,gsa-svm回归分析,Libsvm参数优化

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 万有引力算法 SVM应用实例,基于万有引力算法优化SVM的回归预测 代码 结果分析 展望 支持向量机SVM的详细原理 SVM的定义 支持向量机(support vector machines, SVM)是一…

RK3568平台开发系列讲解(显示篇)什么是DRM

🚀返回专栏总目录 文章目录 一、DRM介绍二、DRM与framebuffer的区别沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇文章将介绍什么是DRM。 一、DRM介绍 DRM 是 Linux 目前主流的图形显示框架,相比FB架构,DRM更能适应当前日益更新的显示硬件。 比如FB原生不支…

MySQL8.0真正的并行复制writeset

MySQL 主从复制模型 MySQL的主从架构依赖于 MySQL Binlog 功能&#xff0c; Master节点上产生Binlog并将Binlog写入到Binlog文件中。Slave节点上启动两个线程&#xff1a;一个IO线程&#xff0c;从MySQL上捞取Binlog日志并写入到本地的RelayLog日志&#xff1b;另一个SQL线程&a…