当前位置：首页 > news >正文

天地图实现海量聚合marker--uniapp后端详细实现

news 2025/10/30 8:11:31

本文章详细的讲解了前后端代码来实现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： 实现了天地图的行政区划边界/地图切换/比例尺/海量数…...

编程日记 2024/10/29 15:11:35

Bug | 项目中数据库查询问题

问题描述理论上，点击查询后，表头应当显示中文。而不是上面的在数据库中的表头【如上图示】正常点击查询后，如果没有输入值，应当是查询所有的信息。原因分析： 这里是直接使用SELECT * 导致的。例如： S…...

编程日记 2024/10/29 15:10:33

C++入门基础知识129—【关于C 库函数 - time()】

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】今日分享关于C 库函数 - time()的相关内容&#xff0…...

编程日记 2024/10/29 15:09:32

大文件秒传，分片上传，断点续传

大文件分片上传一功能描述 1.文件通过web端分片多线程上传到服务端，然后web端发起分片合并，完成大文件分片上传功能 2.上传过的大文件，实现秒传 3.上传过程中，服务异常退出，实现断点续传二流程图三代码运行…...

编程日记 2024/10/29 15:08:30

多生境扩增子探秘：深度溯源与多样性解析

分析微生物组数据的组成结构的一个主要挑战是确定其潜在来源。在微生物来源分析中，随机森林、SourceTracker和FEAST都有较广泛应用。今天，小编就带大家看一篇发表在《iMeta》的文章，使用溯源技术追踪微生物的来源与去向，揭示生物在…...

编程日记 2024/10/29 15:06:18

Selenium4自动化测试常用函数总结，各种场景操作实战

🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快 seleninum作为自动化测试的工具，自然是提供了很多自动化操作的函数，下面列举下比较常用的函数，更多可见官方文档：…...

编程日记 2024/10/29 15:05:14

图像生成新范式：智源推出全能视觉生成模型 OmniGen

大型语言模型（LLM）的出现统一了语言生成任务，并彻底改变了人机交互。然而，在图像生成领域，能够在单一框架内处理各种任务的统一模型在很大程度上仍未得到探索。近日，智源推出了新的扩散模型架构 OmniGen&am…...

编程日记 2024/10/29 15:04:13

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 …...

编程日记 2024/10/29 15:02:08

Python期末题目 | 期末练习题【概念题+代码】

一、前言 Python 是一门功能强大且易于学习的编程语言，在高校中被广泛用作教学语言。Python 的期末考试通常会包含基础知识和编程实践，以考察学生的理解与应用能力。本文整理了一套 Python 期末练习题，包括选择题、填空题、判断题和代码题。…...

编程日记 2024/10/29 15:00:05

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毫…...

编程日记 2024/10/29 14:58:02

详解Java之Spring MVC篇一

目录 Spring MVC 官方介绍 MVC RequestMapping 传递参数无参数单个参数针对String类型针对Integer类型针对int类型针对自定义类型多个参数参数重命名参数强制一致参数不强制一致传递数组编辑传递List 编辑传递JSON 编辑从路径中获取参…...

编程日记 2024/10/29 14:54:59

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…...

编程日记 2024/10/29 14:50:53

Python实现办公自动化的数据可视化与报表生成

在 Python 中，可以利用多个库来实现办公自动化中的数据可视化与报表生成。以下是具体的方法： 一、数据可视化使用 matplotlib 库 matplotlib 是一个强大的 Python 绘图库，可以创建各种类型的静态、动态和交互式图表。示例代码：i…...

编程日记 2024/10/29 14:49:52

前端知识串联笔记（更新中...）

1.MVVM MVVM 是指 Model - View - ViewModel，Model 是数据与业务逻辑，View 是视图，ViewModel 用于连接 View 和 Model Model ---> View：将数据转化成所看到的页面，实现的方式：Data Bindings -- 数据绑定…...

编程日记 2024/10/29 14:47:50

PostgreSQL根据字符串的长度排序

PostgreSQL根据字符串的长度排序在 PostgreSQL 中，你可以使用 LENGTH 函数来获取字符串的长度，并根据这个长度进行排序。LENGTH 函数会返回字符串的字符数。以下是一个基本的 SQL 查询示例，它根据 some_column 字符串列的长度对表中的行进…...

编程日记 2024/10/29 14:46:48

计算机网络：网络层 —— IP数据报的发送和转发过程

文章目录 IP数据报的发送和转发过程主机发送IP数据报路由器转发IP数据报示例 IP数据报的发送和转发过程 IP 数据报的发送和转发过程包含以下两个过程： 主机发送IP数据报路由器转发IP数据报直接交付：源主机与目的主机在同一网络中间接交付：…...

编程日记 2024/10/29 14:44:46

【算力基础】GPU算力计算和其他相关基础(TFLOPS/TOPS/FP32/INT8...)

文章目录 :one: 算力的常见指标:two: 算力计算:three: 常用链接 🚀 本文主要是聚焦于深度学习领域的 GPU的算力估计，其他类型的硬件设备如CPU可以类比参考。 1️⃣ 算力的常见指标算力衡量主要与运算速度和精度这两个指标有关。 🌔速度指…...

编程日记 2024/10/29 14:42:39

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…...

编程日记 2024/10/29 14:39:31

C#与C++交互开发系列（十）：数组传递的几种形式

前言在C#和C的交互开发中，数组传递是一个非常常见且实用的场景。数组可以作为方法的参数，也可以作为响应结果返回。在本篇博客中，我们将探讨几种常见的数组传递方式，展示如何在C#与C之间进行有效的数据交换。我们将主要介绍以下…...

编程日记 2024/10/29 14:37:26

【C++复习】第一弹-基础性语法

前言学习了C语法这么久了，我其实觉得，我们学习一门语言应该更加注重使用性，对于语法的细节可以通过具体的项目去重新造轮子的时候再去抠细节，也就是说你得学会先走，在去想我们如何走的，身体的哪些肌肉在发…...

编程日记 2024/10/29 14:36:24

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/10/29 5:38:18

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2025/10/29 21:53:39

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...

编程新知 2025/10/27 5:01:21

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2025/10/14 13:55:53

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/10/27 21:51:36

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53