天地图实现海量聚合marker--uniapp后端详细实现
本文章详细的讲解了前后端代码来 实现uniapp天地图功能的实现 以及 后端海量数据的聚合查询 和网格算法实现思路。
并对当数据量增加和用户频繁请求接口时可能导致服务器负载过高做了前后端优化。
前端uniapp：
实现了天地图的行政区划边界/地图切换/比例尺/海量数据聚合marker/获取地图当前可视范围坐标/文本信息窗口 /使用节流、防抖的方式来减少过量请求 等功能
后端java：
实现了海量数据的聚合查询，并对查询语句和逻辑做了优化以及sql索引优化/并通过网格算法来解决数据精准度的难点。
效果如下：
前端uniapp实现代码如下：
uniapp/static/skymap.html
<!DOCTYPE html>
<html lang="en">
<head><script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你自己的key"></script><style>body {margin: 0;padding: 0;overflow: hidden;height: 100vh;font-family: "Microsoft YaHei";}#viewDiv {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}</style>
</head>
<body><div id="viewDiv"></div><script>let markerClusterer; // 用于保存聚合器const map = new T.Map("viewDiv");const fetchInterval = 5000; // 节流时间间隔（5秒）let lastFetchTime = 0;function load() {addGeoBoundary(map);map.enableScrollWheelZoom();map.addControl(new T.Control.MapType());map.addControl(new T.Control.Scale());// 添加缩放和移动事件监听器map.addEventListener('zoomend', () => updateMarkers(map));map.addEventListener('moveend', () => updateMarkers(map));// 初始加载标记setTimeout(() => updateMarkers(map), 1000);}async function updateMarkers(map) {const currentTime = Date.now();if (currentTime - lastFetchTime < fetchInterval) {return; // 节流：如果距离上次请求不够，则返回}lastFetchTime = currentTime;const bounds = map.getBounds();const sw = bounds.getSouthWest();const ne = bounds.getNorthEast();const requestData = {bottomLeft: [sw.lng, sw.lat],topRight: [ne.lng, ne.lat]};try {const response = await fetch('http://localhost:10086/things/aggregated-geo', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(requestData)});if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();console.log("响应数据:", data);createMarkers(map, data.data);} catch (error) {console.error("请求失败:", error);}}function createMarkers(map, data) {// 清除旧的聚合标记if (markerClusterer) {markerClusterer.clearMarkers();}const markers = [];const { gridCellList, noGeoThings } = data;gridCellList.forEach(item => {for (let i = 0; i < item.thingCount; i++) {const marker = new T.Marker(new T.LngLat(item.position.longitude, item.position.latitude), {title: `Thing Count: ${item.thingCount}`});markers.push(marker);}});if (noGeoThings && noGeoThings.thingCount > 0) {const point = new T.LngLat(noGeoThings.position.longitude, noGeoThings.position.latitude);const marker = new T.Marker(point);map.addOverLay(marker);const markerInfoWin = new T.InfoWindow("无位置设备: " + noGeoThings.thingCount);marker.addEventListener("click", () => marker.openInfoWindow(markerInfoWin));}// 使用聚合器聚合标记markerClusterer = new T.MarkerClusterer(map, { markers });}function addGeoBoundary(map) {fetch('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520322').then(response => response.json()).then(data => {const coordinates = data.features[0].geometry.coordinates;const centroid = data.features[0].properties.centroid;map.centerAndZoom(new T.LngLat(centroid[0], centroid[1]), 8);coordinates.forEach(polygon => {polygon.forEach(boundary => {const boundaryPolygon = new T.Polygon(boundary.map(coord => new T.LngLat(coord[0], coord[1])), {color: "#7C7BF6",weight: 1,opacity: 0.7,fillColor: "#ABAAF3",fillOpacity: 0.1});boundaryPolygon.addEventListener("mouseover", () => {boundaryPolygon.setFillColor("#ABAAF3");boundaryPolygon.setFillOpacity(0.6);});boundaryPolygon.addEventListener("mouseout", () => {boundaryPolygon.setFillColor("#DCDBF0");boundaryPolygon.setFillOpacity(0.6);});map.addOverLay(boundaryPolygon);});});}).catch(error => console.error('Error fetching GeoJSON:', error));}load();</script>
</body>
</html>
pages/index.vue
<uni-section title="地区分布" class="item map-container" type="line"><iframe src="/static/skymap.html" class="map-frame"></iframe></uni-section>
后端java实现代码如下：
impl.java
@Overridepublic ThingGeo getAggregatedThingGeo(ThingGeoReqDTO reqDTO) {//TODO 租户过滤Area area = areaRepository.getAreaByCode(行政区编码);//1.行政编码区域的中心点，查询没有位置的设备总数：JSONObject properties = area.getBound().getJSONArray("features").getJSONObject(0).getJSONObject("properties");JSONArray centerPosition = properties.getJSONArray("center"); //中心点位置double centerLon = centerPosition.getDouble(0);double centerLat = centerPosition.getDouble(1);GeoPoint centerPoint = new GeoPoint(centerLon, centerLat);long noGeoThingCount = thingRepository.countByNoGeoPosition();GridCellThing noGeoThings = new GridCellThing(centerPoint, noGeoThingCount);//2.网格查询有位置信息的设备总数以及权重点double[] topRight = reqDTO.getTopRight();double[] bottomLeft = reqDTO.getBottomLeft();// 计算X和Y的差值(视图长和宽)double deltaX = topRight[0] - bottomLeft[0];double deltaY = topRight[1] - bottomLeft[1];// 计算X和Y的平均值double avgX = deltaX / 4;double avgY = deltaY / 4;// 使用右上角作为起始点double x = topRight[0];double y = topRight[1];List<GridCellThing> gridCellThings = new ArrayList<>();// 循环生成4*4=16网格for (int a = 0; a < 4; a++) {for (int i = 0; i < 4; i++) {// 计算网格边界double minX = x - (i + 1) * avgX;double maxX = x - i * avgX;double minY = y - (a + 1) * avgY;double maxY = y - a * avgY;//小网格（矩形）的两个对角的经纬度double[] boxTopRight = new double[]{maxX, maxY};double[] boxBottomLeft = new double[]{minX, minY};long count = thingRepository.countByBoundingBox(boxBottomLeft, boxTopRight);if (count > 0) {GeoPoint center = thingRepository.findWeightedCenter(boxBottomLeft, boxTopRight);GeoPoint geoPoint = new GeoPoint(center.getLongitude(), center.getLatitude());GridCellThing gridCellThing = new GridCellThing();gridCellThing.setThingCount(count);gridCellThing.setPosition(geoPoint);gridCellThings.add(gridCellThing);}}}ThingGeo thingGeo = new ThingGeo();thingGeo.setGridCellList(gridCellThings);thingGeo.setNoGeoThings(noGeoThings);return thingGeo;}ThingRepository.java
public interface ThingRepository extends MongoRepository<Thing, String> { @CountQuery("{$and: [{'position': {$exists: true}}, {'deletedAt': null},"+ "{'position': {$geoWithin: { $box: [?0, ?1] }}}]}")long countByBoundingBox(double[] bottomLeft, double[] topRight);@Aggregation(pipeline = {"{ $match: { $and: [ { 'position': { $exists: true } }, { 'deletedAt': null }, { 'position': { $geoWithin: { $box: [?0, ?1] } } } ] } }","{ $group: { _id: null, longitude: { $avg: '$position.longitude' }, latitude: { $avg: '$position.latitude' } } }"})GeoPoint findWeightedCenter(double[] bottomLeft, double[] topRight);@CountQuery("{ $or: [ { 'position': { $exists: false } }, { 'position': null }, { 'position.longitude': 0, 'position.latitude': 0 } ], 'deletedAt': null }")long countByNoGeoPosition();
}Entity
EntityThingGeo.java@Data
@NoArgsConstructor
@AllArgsConstructor
public class ThingGeo {private List<GridCellThing> gridCellList; //各个网格单元内的设备总数private GridCellThing noGeoThings; // 编码区域内没有地理位置的设备总数
}//**************************//GridCellThing .java@Data
@NoArgsConstructor
@AllArgsConstructor
public class GridCellThing {private GeoPoint position;private long thingCount;
}如果对您的工作有所启发和帮助，点个搜藏加关注吧~
相关文章：
天地图实现海量聚合marker--uniapp后端详细实现
本文章详细的讲解了前后端代码来 实现uniapp天地图功能的实现 以及 后端海量数据的聚合查询 和网格算法实现思路。 并对当数据量增加和用户频繁请求接口时可能导致服务器负载过高做了前后端优化。 前端uniapp： 实现了天地图的行政区划边界/地图切换/比例尺/海量数…...
Bug | 项目中数据库查询问题
问题描述 理论上，点击查询后，表头应当显示中文。而不是上面的在数据库中的表头【如上图示】 正常点击查询后，如果没有输入值，应当是查询所有的信息。 原因分析： 这里是直接使用SELECT * 导致的。例如： S…...
C++入门基础知识129—【关于C 库函数 - time()】
成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C 库函数 - time()的相关内容࿰…...
大文件秒传，分片上传，断点续传
大文件分片上传 一 功能描述 1.文件通过web端分片多线程上传到服务端，然后web端发起分片合并，完成大文件分片上传功能 2.上传过的大文件，实现秒传 3.上传过程中，服务异常退出，实现断点续传 二 流程图 三 代码运行…...
多生境扩增子探秘：深度溯源与多样性解析
分析微生物组数据的组成结构的一个主要挑战是确定其潜在来源。在微生物来源分析中，随机森林、SourceTracker和FEAST都有较广泛应用。今天，小编就带大家看一篇发表在《iMeta》的文章，使用溯源技术追踪微生物的来源与去向，揭示生物在…...
Selenium4自动化测试常用函数总结，各种场景操作实战
🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快 seleninum作为自动化测试的工具，自然是提供了很多自动化操作的函数，下面列举下比较常用的函数，更多可见官方文档：…...
图像生成新范式：智源推出全能视觉生成模型 OmniGen
大型语言模型（LLM）的出现统一了语言生成任务，并彻底改变了人机交互。然而，在图像生成领域，能够在单一框架内处理各种任务的统一模型在很大程度上仍未得到探索。近日，智源推出了新的扩散模型架构 OmniGen&am…...
实现RPC接口的demo记录
1.Thrift RPC 接口实现 Demo Service public class DemoServiceImpl implements DemoService.Iface {private static final Logger logger LoggerFactory.getLogger(DemoServiceImpl.class);Overridepublic String sayHello(Context context, String msg) throws TException …...
Python期末题目 | 期末练习题【概念题+代码】
一、前言 Python 是一门功能强大且易于学习的编程语言，在高校中被广泛用作教学语言。Python 的期末考试通常会包含基础知识和编程实践，以考察学生的理解与应用能力。本文整理了一套 Python 期末练习题，包括选择题、填空题、判断题和代码题。…...
视频基本处理)
OpenCV基本操作（python开发）——（6)视频基本处理
OpenCV——视频基本处理 一、读取摄像头 import numpy as np import cv2cap cv2.VideoCapture(0) # 实例化VideoCapture对象, 0表示第一个摄像头 while cap.isOpened():ret, frame cap.read() # 捕获帧cv2.imshow("frame", frame)c cv2.waitKey(1) # 等待1毫…...
详解Java之Spring MVC篇一
目录 Spring MVC 官方介绍 MVC RequestMapping 传递参数 无参数 单个参数 针对String类型 针对Integer类型 针对int类型 针对自定义类型 多个参数 参数重命名 参数强制一致 参数不强制一致 传递数组 编辑传递List 编辑 传递JSON 编辑 从路径中获取参…...
ubuntu20.04上使用 Verdaccio 搭建 npm 私有仓库
安装nvm 首先安装必要的工具： apt update apt install curl下载并执行nvm安装脚本： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash添加环境变量（如果安装脚本没有自动添加）。编辑 ~/.bash…...
Python实现办公自动化的数据可视化与报表生成
在 Python 中，可以利用多个库来实现办公自动化中的数据可视化与报表生成。以下是具体的方法： 一、数据可视化 使用 matplotlib 库 matplotlib 是一个强大的 Python 绘图库，可以创建各种类型的静态、动态和交互式图表。示例代码：i…...
前端知识串联笔记（更新中...）
1.MVVM MVVM 是指 Model - View - ViewModel，Model 是数据与业务逻辑，View 是视图，ViewModel 用于连接 View 和 Model Model ---> View：将数据转化成所看到的页面，实现的方式：Data Bindings -- 数据绑定…...
PostgreSQL根据字符串的长度排序
PostgreSQL根据字符串的长度排序 在 PostgreSQL 中，你可以使用 LENGTH 函数来获取字符串的长度，并根据这个长度进行排序。LENGTH 函数会返回字符串的字符数。 以下是一个基本的 SQL 查询示例，它根据 some_column 字符串列的长度对表中的行进…...
计算机网络：网络层 —— IP数据报的发送和转发过程
文章目录 IP数据报的发送和转发过程主机发送IP数据报路由器转发IP数据报示例 IP数据报的发送和转发过程 IP 数据报的发送和转发过程包含以下两个过程： 主机发送IP数据报路由器转发IP数据报 直接交付：源主机与目的主机在同一网络中间接交付：…...
【算力基础】GPU算力计算和其他相关基础(TFLOPS/TOPS/FP32/INT8...)
文章目录 :one: 算力的常见指标:two: 算力计算:three: 常用链接 🚀 本文主要是聚焦于深度学习领域的 GPU的算力估计，其他类型的硬件设备如CPU可以类比参考。 1️⃣ 算力的常见指标 算力衡量主要与运算速度和精度这两个指标有关。 🌔速度指…...
UI自动化测试（app端）4.0
✨博客主页： https://blog.csdn.net/m0_63815035?typeblog 💗《博客内容》：.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 📢博客专栏： https://blog.csdn.net/m0_63815035/cat…...
C#与C++交互开发系列（十）：数组传递的几种形式
前言 在C#和C的交互开发中，数组传递是一个非常常见且实用的场景。数组可以作为方法的参数，也可以作为响应结果返回。在本篇博客中，我们将探讨几种常见的数组传递方式，展示如何在C#与C之间进行有效的数据交换。我们将主要介绍以下…...
【C++复习】第一弹-基础性语法
前言 学习了C语法这么久了，我其实觉得，我们学习一门语言应该更加注重使用性，对于语法的细节可以通过具体的项目去重新造轮子的时候再去抠细节，也就是说你得学会先走，在去想我们如何走的，身体的哪些肌肉在发…...
别再手动刷新了！SAP ALV中利用change事件与modify_cell实现智能数据同步
SAP ALV开发进阶：巧用change事件与modify_cell构建智能数据联动体系 在SAP前端开发领域，ALV（ABAP List Viewer）作为最常用的数据展示控件，其交互体验直接影响用户操作效率。传统开发模式中，当用户修改某个单…...
5个认知重构，收割你的补偿性Offer
春招反杀指南当别人还在为秋招失利懊悔时，聪明人已经完成了思维系统的彻底升级秋招的硝烟尚未散尽，春招的号角已经吹响。这不是简单的“第二轮机会”，而是认知层面的降维打击战。那些在秋招中凭借简历光环轻松通关的路径已然失效，…...
LVGL V8项目实战：手把手教你用CLion配置CMake，集成Gui Guider生成的UI文件（含避坑指南）
LVGL V8项目实战：CLion与CMake深度集成Gui Guider UI文件的完整指南 当你在嵌入式GUI开发中频繁往返于设计工具与代码编辑器之间时，是否经历过这样的困境：在Gui Guider中精心设计的界面，移植到LVGL项目后却遭遇编译错误、资源路径…...
别再到处找了！这12个三维点云开源数据集，够你从入门到项目实战
三维点云实战指南：12个精选开源数据集与精准匹配策略 当你第一次打开三维点云处理软件，面对空白的项目界面，最迫切的问题往往是："我该从哪里获取高质量的训练数据？"这个问题困扰过每一位初学者，…...
NCCL中RoCE与RDMA的深度解析：如何优化分布式训练网络性能
1. 为什么RoCE和RDMA对分布式训练如此重要？ 第一次接触分布式训练时，我盯着日志里不断跳动的通信耗时直发愁。8块GPU明明都在满负荷运转，但总训练时间就是比单卡8要长不少。后来用NVIDIA的Nsight工具一分析，发现超过30%的时间都花…...
[Windows 驱动] 深入解析进程名获取的多种内核方法
1. Windows驱动开发中的进程名获取基础 在Windows内核驱动开发中，获取进程名是最基础但至关重要的操作之一。想象一下，你正在开发一个安全监控驱动，需要实时检查哪些进程正在运行；或者你在开发一个性能优化工具，需要针…...
Qwen3.5-2B实战入门：20亿参数多模态模型图文对话快速上手指南
Qwen3.5-2B实战入门：20亿参数多模态模型图文对话快速上手指南 1. 认识Qwen3.5-2B Qwen3.5-2B是一款轻量级多模态基础模型，属于Qwen3.5系列的小参数版本（20亿参数）。这个模型特别适合在资源有限的设备上运行，比如个人…...
Mojo嵌入Python项目的4种架构模式（含GIL绕过实测数据+内存安全验证报告）
第一章：Mojo嵌入Python项目的4种架构模式（含GIL绕过实测数据内存安全验证报告）Mojo 作为兼具 Python 兼容性与系统级性能的新兴语言，其嵌入 Python 项目的能力已通过多种生产就绪架构得到验证。以下四种主流集成模式均在 macOS Ve…...
cv_resnet101_face-detection_cvpr22papermogface 模型部署的网络安全考量：防范403 Forbidden等常见攻击
cv_resnet101_face-detection_cvpr22papermogface 模型部署的网络安全考量：防范403 Forbidden等常见攻击 把一个人脸检测模型，比如 cv_resnet101_face-detection_cvpr22papermogface，部署成一个Web API，这事儿听起来挺酷的。想象…...
Phi-4-mini-reasoning vLLM高级特性：LoRA适配器热插拔与多任务推理切换
Phi-4-mini-reasoning vLLM高级特性：LoRA适配器热插拔与多任务推理切换 1. 模型概述 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型，专注于高质量、密集推理的数据处理。作为Phi-4模型家族的一员，它特别强化了数学推理能力…...