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

101.在 Vue 3 + OpenLayers 使用 declutter 避免文字标签重叠

news 来源：原创 2025/8/15 13:03:05

1. 前言

在使用 OpenLayers 进行地图开发时，我们经常需要在地图上添加点、线、区域等图形，并给它们附加文字标签。但当地图上的标注较多时，文字标签可能会发生重叠，导致用户无法清晰地查看地图信息。

幸运的是，OpenLayers 提供了 declutter 选项，能够有效地避免文字标签的重叠问题。本文将介绍如何在 Vue 3 + OpenLayers 项目中使用 declutter，并通过示例代码展示如何添加带有时间标签的轨迹点。

2. `declutter` 介绍

declutter 是 OpenLayers VectorLayer（矢量图层）的一个属性，专门用于处理标注（文本或图标）的重叠问题。如果 declutter: true，OpenLayers 会自动调整标注的显示方式，避免文本或图标重叠在一起，提高地图的可读性。

3. 项目环境

Vue 3 + Composition API
OpenLayers
Vite

安装 OpenLayers

npm install ol

4. 代码实现

4.1 创建 Vue 组件

我们创建一个 Vue 组件，在其中初始化 OpenLayers 地图，并使用 declutter 避免标注重叠。

完整代码

<!--* @Author: 彭麒* @Date: 2025/3/13* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><div class="container"><div class="w-full flex justify-center flex-wrap"><div class="font-bold text-[24px]">在Vue3中+OpenLayers使用declutter，避免文字标签重叠</div></div><div id="vue-openlayers"></div></div>
</template><script setup>
import "ol/ol.css";
import {onMounted, ref} from "vue";
import {Map, View} from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import Text from "ol/style/Text";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import Feature from "ol/Feature";
import {Point, LineString} from "ol/geom";
import startPoint from "@/assets/OpenLayers/startPoint.png";
import endPoint from "@/assets/OpenLayers/endPoint.png";
import pointImg from "@/assets/OpenLayers/point.png";
const map = ref(null);
const trackSource = new VectorSource();
const markersData = ref([[111.44, 24.18, 1604627953],[112.26, 24.48, 1604714353],[113.96, 24.65, 1604800753],[113.44, 24.78, 1604887153],[113.44, 24.98, 1605059953],[113.54, 25.68, 1605146353],
]);const setTrackStyle = (text, img) => {return [new Style({image: new Icon({src: img,anchor: [0.5, 0.5],scale: 0.2,}),text: new Text({font: "12px sans-serif",maxAngle: 30,offsetY: 20,text: text,fill: new Fill({color: "#fff"}),backgroundFill: new Fill({color: "rgba(255,0,0,0.6)"}),backgroundStroke: new Stroke({color: "rgba(255,0,0,0.6)", width: 8}),}),}),];
};const showTrace = (data) => {const lineFeature = new Feature(new LineString(data));lineFeature.setStyle(new Style({stroke: new Stroke({color: "#00f", width: 2})}));trackSource.addFeature(lineFeature);const features = [];data.forEach((point, index) => {let img;if (index === 0) img = startPoint;else if (index === data.length - 1) img = endPoint;else img = pointImgconst feature = new Feature({geometry: new Point([point[0], point[1]]),data: point,});const time = new Date(point[2] * 1000).toISOString().split("T")[0];feature.setStyle(setTrackStyle(`时间: ${time}`, img));features.push(feature);});trackSource.addFeatures(features);
};const initMap = () => {const OSMlayer = new Tile({source: new OSM()});const trackLayer = new VectorLayer({source: trackSource,declutter: true, // 避免标签重叠});map.value = new Map({target: "vue-openlayers",layers: [OSMlayer, trackLayer],view: new View({center: [113.448, 23.986],zoom: 7,projection: "EPSG:4326",}),});
};onMounted(() => {initMap();showTrace(markersData.value);
});</script><style scoped>
.container {width: 840px;height: 590px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 470px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

5. 代码解析

5.1 `setTrackStyle` 方法

该方法用于给轨迹点设置样式：

图标：设置 Icon 作为点的标识
文本：使用 Text 组件显示时间，并设置 fill、backgroundFill 等属性
避免重叠：OpenLayers 通过 declutter 自动处理文字的布局，防止多个标注挤在一起

5.2 `showTrace` 方法

绘制轨迹线路：使用 LineString 创建轨迹线
添加轨迹点：遍历 markersData 数据，为每个点创建 Feature
设置时间标签：使用 setTrackStyle 给每个点添加时间信息

5.3 `initMap` 方法

创建地图实例
添加 OSM 瓦片地图
添加 VectorLayer（启用 declutter）

6. `declutter` 前后效果对比

在未启用 declutter 时，多个标注可能会重叠在一起，影响阅读：

开启 declutter 后，OpenLayers 会自动优化文本排布，防止文字叠加：

7. 结论

本文介绍了如何在 Vue 3 + OpenLayers 项目中使用 declutter 避免文字标签重叠。declutter 是 OpenLayers 提供的强大功能，能够自动优化地图标注，使得地图数据更加清晰可读。希望本文对你有所帮助！

如果觉得有用，请点赞收藏支持！🚀
📢 关注我，获取更多前端 & GIS 开发技巧！

101.在 Vue 3 + OpenLayers 使用 declutter 避免文字标签重叠

1. 前言在使用 OpenLayers 进行地图开发时，我们经常需要在地图上添加点、线、区域等图形，并给它们附加文字标签。但当地图上的标注较多时，文字标签可能会发生重叠，导致用户无法清晰地查看地图信息。幸运的是，OpenL…...

编程日记 2025/8/15 13:03:05

面试vue2开发时怎么加载编译速度（webpack）

可以输入命令获取默认 webpack 设置 vue inspect > set.js 1.使用缓存 configureWebpack: {cache: {type: filesystem, // 使用文件系统缓存类型buildDependencies: {config: [__filename] // 缓存依赖，例如webpack配置文件路径}}}, 2.启用 vue-loader (测试明…...

编程日记 2025/8/15 12:57:09

大模型推理后JSON数据后处理

大模型推理后JSON数据后处理 flyfish LLM 通常指的是 Large Language Model，也就是大语言模型，针对 JSON格式的输出，可以在大模型推理前、推理中、推理后进行处理，这里是在推理后进行处理。针对模型输出结果，可采用结…...

编程日记 2025/8/15 12:54:16

面试总结：2024前端面试题

前几天写了一篇对面试官的吐槽，今天来总结一下最近面试的一些题目。题目不分具体公司了，毕竟题目的重复率不会特别高，就多做准备吧。技术面还是离不开“八股文”，个人不喜欢也没办法，硬着头皮上，下面分几个…...

编程日记 2025/8/15 12:59:39

剑指 Offer II 083. 没有重复元素集合的全排列

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20083.%20%E6%B2%A1%E6%9C%89%E9%87%8D%E5%A4%8D%E5%85%83%E7%B4%A0%E9%9B%86%E5%90%88%E7%9A%84%E5%85%A8%E6%8E%92%E5%88%97/README.md 剑指 Offer II 083. 没…...

编程日记 2025/8/15 12:56:20

SFT数据处理部分的思考

SFT数据及处理的业内共识 1．prompt的质量和多样性远重要于数据量级，微调一个 30 b 量级的base model只需要 10 w 量级的数据即可参考：《LIMA：Less Is More for Alignment》 2．合成数据很重要！一般需要通过…...

编程日记 2025/8/11 13:24:28

c++三级（枚举问题）

菲波那契数列(2) 题目描述菲波那契数列是指这样的数列: 数列的第一个和第二个数都为1，接下来每个数都等于前面2个数之和。给出一个正整数a，要求菲波那契数列中第a个数对1000取模的结果是多少。输入格式第1行是测试数据的组数n，后面跟着n行…...

编程日记 2025/8/14 13:48:36

vb编程有哪些相关的IDE开发工具vb.net,Basic语言？

在编程领域，VB 系列拥有丰富多样的 IDE 开发工具，为不同需求的开发者提供了广泛的选择，以下为你详细介绍： 兼容 VB6 源码的开发工具 twinbasic：属于 VB7 系列，它几乎能 100% 兼容 VB6 源码，这…...

编程日记 2025/8/12 1:39:42

XSS跨站脚本攻击

1、什么是XSS攻击 XSS全称（Cross Site Scripting）跨站脚本攻击，为了避免与css层叠样式表名称冲突，所以改为xss，是最常见的web应用程序安全漏洞之一。它指的是恶意攻击者往web页面里插入恶意html代码（JavaS…...

编程日记 2025/8/14 20:27:56

Uniapp 开发 App 端上架用户隐私协议实现指南

文章目录引言一、为什么需要用户隐私协议？二、Uniapp 中实现用户隐私协议的步骤2.1 编写隐私协议内容2.2 在 Uniapp 中集成隐私协议2.3 DCloud数据采集说明2.4 配置方式3.1 Apple App Store3.2 Google Play Store 四、常见问题与解决方案4.1 隐私协议内容不完整4.2…...

编程日记 2025/8/10 9:25:39

mapbox高阶，结合threejs（threebox）添加extrusion挤出几何体，并添加侧面窗户贴图和楼顶贴图

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️threebox extrusion挤出几何体二、🍀…...

编程日记 2025/8/14 8:19:17

【Pycharm】Pycharm无法复制粘贴，提示系统剪贴板不可用

我也没有用vim的插件，检查了本地和ubutnu上都没有。区别是我是远程到ubutnu的pycharm，我本地直接控制windowes的pycharm是没问题的。现象是可以从外部复制到pycharm反之则不行。 ctl c ctlv 以及右键都不行参考：Pycharm无法复制粘贴&…...

编程日记 2025/8/12 12:45:19

Java泛型程序设计使用方法

Java泛型程序设计是Java语言中一项强大的特性，它允许你编写更加通用和类型安全的代码。以下是Java泛型程序设计的使用方法和技巧： 1. 基本概念泛型类：可以定义一个类，其中的某些类型是参数化的。 public class Box<T> {pr…...

编程日记 2025/8/11 15:05:24

【STM32】USART串口收发HEX数据包收发文本数据包

有关串口知识参考：【STM32】USART串口协议&串口外设-学习笔记-CSDN博客 HEX模式/十六进制模式/二进制模式：以原始数据的形式显示文本模式/字符模式：以原始数据编码后的形式显示参考上面文章查看ASCII编码表 HEX数据包包头包尾和…...

编程日记 2025/8/13 22:04:26

Keil5下载教程及安装教程（附安装包）

文章目录前言一、Keil5下载教程二、Keil5安装教程三、Keil5授权教程前言本教程详细的介绍了Keil5下载教程及安装教程，就像搭积木一样简单易懂，让你轻松迈出开发的第一步。一、Keil5下载教程相比旧版本，Keil MDK v5.40 有显著升级。新增…...

编程日记 2025/8/11 13:00:25

快速上手网络通信 -- Qt Network应用开发

概述在现代应用程序开发中，网络通信是不可或缺的一部分，无论是客户端与服务器之间的数据交换，还是设备间的通信，都需要一个高效且可靠的网络库。Qt提供了强大的QT Network模块，支持多种网络协议和操作，如HTTP、FTP、TCP/IP等，本文将详细介绍如何使用Qt Network模块进行…...

编程日记 2025/8/11 18:30:18

Linux-进程概念

本节学习重点： • 认识冯诺依曼系统 • 操作系统概念与定位 • 深⼊理解进程概念，了解PCB • 学习进程状态，学会创建进程，掌握僵⼫进程和孤⼉进程，及其形成原因和危害 • 了解进程调度，Linux进程优先级&am…...

编程日记 2025/8/11 14:40:34

【LeetCode】622、设计循环队列

【LeetCode】622、设计循环队列文章目录一、数组实现循环队列1.1 队列二、多语言解法一、数组实现循环队列 1.1 队列注意：题目要求了 Front() 和 Rear()，当 IsEmpty() 时返回 -1 // go type MyCircularQueue struct {l intr intlen intcap intar…...

编程日记 2025/8/15 1:29:32

基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统源码+运行

功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。源码功能包括：医生管理、科室管理、护士管理、住院管理、药品管理、用户管理、日志管理、系统信息模块。源码地址 https://github.com/geee…...

编程日记 2025/8/12 8:31:46

2023南京理工大学计算机复试上机真题

2023南京理工大学计算机复试上机真题 2023南京理工大学计算机复试机试真题历年南京理工大学计算机复试上机真题在线评测：传送门：pgcode.cn 括号匹配二题目描述苗苗今天刚刚学会使用括号，不过他分不清小括号，中括号&#…...

编程日记 2025/8/11 17:03:13

开发、科研、日常办公工具汇总（自用，持续更新）

主要记录汇总一下自己平常会用到的网站工具，方便查阅。 update：2025/2/11（开发网站补一下） update：2025/2/21（补充一些AI工具，刚好在做AI视频相关工作） update：2025/3/7&…...

编程日记 2025/8/11 13:07:01

python3GUI--模仿安卓桌面 By:PyQt5（附下载地址）

文章目录一．前言二．展示1.主界面2.设置页面3.更换了壁纸且切换桌面页面三．项目分享1.项目代码结构2.组件代码分享四．总结文件大小25.5M，欢迎下载体验！点击下载一．前言今天给大家推荐我用…...

编程日记 2025/8/11 2:50:13

STM32CubeIDE 下载与安装教程（以 1.18.0 版本为例）

STM32CubeIDE 下载与安装教程（以 1.18.0 版本为例） 软件介绍 STM32CubeIDE 是 STMicroelectronics 提供的官方集成开发环境（IDE），专为 STM32 微控制器系列设计。它融合了 STM32CubeMX 和 Eclipse 的强大功能&#xf…...

编程日记 2025/8/15 7:27:02

酒店宾馆IPTV数字电视系统：创新宾客体验，引领智慧服务新潮流

酒店宾馆IPTV数字电视系统：创新宾客体验，引领智慧服务新潮流北京海特伟业科技有限公司任洪卓于2025年3月15日发布随着智慧酒店的不断发展，宾客对于酒店内的娱乐和信息服务需求日益多样化，传统的电视服务已难以满足现代宾客的高…...

编程日记 2025/8/15 4:52:21

蓝桥杯刷题——第十五届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组

一、0握手问题 - 蓝桥云课算法代码： #include <iostream> using namespace std; int main() {int sum0;for(int i49;i>7;i--)sumi;cout<<sum<<endl;return 0; } 直接暴力，题意很清晰，累加即可。二、0小球反弹 - 蓝…...

编程日记 2025/8/12 22:17:42

MobileNet家族：从v1到v4的架构演进与发展历程

MobileNet 是一个专为移动设备和嵌入式系统设计的轻量化卷积神经网络（CNN）家族，旨在在资源受限的环境中实现高效的图像分类、对象检测和语义分割等任务。自 2017 年首次推出以来，MobileNet 经历了从 v1 到 v4 的多次迭代&#xff…...

编程日记 2025/8/11 4:04:48

PyTorch PINN实战：用深度学习求解微分方程

在人工智能与计算数学的交汇点，物理信息神经网络（Physics-Informed Neural Networks，PINN）正引领着一场求解微分方程的革命。传统上，微分方程是描述自然现象和工程问题中各种关系的重要工具，但其求解往往依…...

编程日记 2025/8/13 18:30:59

LRU（最近最少使用）算法实现

核心思想与基本思路 LRU（Least Recently Used）算法是一种缓存淘汰策略，其核心思想是淘汰最近最少使用的数据。最近使用原则：最近被访问的数据在未来被访问的概率更高，因此应保留在缓存中。淘汰机制：当缓…...

编程日记 2025/8/14 8:25:00

【大模型实战】利用ms-swift微调框架对QwQ-32B推理模型进行微调

1. 背景介绍之前我们在《大模型训练/微调的一些经验分享》、《利用DeepSeek-R1数据微调蒸馏ChatGLM32B让大模型具备思考能力》中做了相关模型微调的介绍。目前在基座大模型能力还没有达到足够牛的情况下，大模型微调在商业化、垂直领域应用依然是不可或缺&#xff0…...

编程日记 2025/8/12 19:19:44

蓝桥杯省赛真题C++B组-小球反弹

一、题目有一长方形，长为 343720 单位长度，宽为 233333 单位长度。在其内部左上角顶点有一小球(无视其体积)，其初速度如图所示且保持运动速率不变，分解到长宽两个方向上的速率之比为 dx:dy 15:17。小球碰到长方形的边框时会发生…...

编程日记 2025/8/11 3:01:59

Web3到底解决了什么问题?

文章目录 Web3到底解决了什么问题?1. 数据所有权与控制权的转移2. 打破中心化平台的垄断3. 信任与透明度的重构4. 价值分配机制的革新5. 互操作性与开放生态6.Web3 的局限性（附加说明） Web3到底解决了什么问题? 1. 数据所有权与控制权的转移问题&am…...

编程日记 2025/8/14 13:16:55

基于CSV构建轻量级数据库：SQL与Excel操作的双模实践

基于CSV构建轻量级数据库：SQL与Excel操作的双模实践引言：当CSV遇到SQL和Excel CSV（逗号分隔值）作为最通用的数据存储格式之一，凭借其纯文本可读性和跨平台兼容性，被广泛应用于数据交换和简单存储场景。但…...

编程日记 2025/8/13 19:18:29

【深度学习】多源物料融合算法（一）：量纲对齐常见方法

目录一、引言二、量纲对齐常见方法 2.1 Z-score标准化Sigmoid归一化 2.2 Min-Max 归一化 2.3 Rank Transformation 2.4 Log Transformation 2.5 Robust Scaling 3、总结一、引言类似抖音、快手、小红书等产品的信息流推荐业务，主要通过信息流广告、信…...

编程日记 2025/8/5 1:11:56

STM32-SPI通信外设

目录一：SPI外设简介 SPI框图编辑 SPI逻辑编辑主模式全双工连续传输编辑非连续传输二：硬件SPI读写W25Q64 1.接线： 2. 代码 SPI外设的初始化生成时序一：SPI外设简介 STM32内部集成了硬件SPI收发电路&#…...

编程日记 2025/8/10 1:19:17

告别XML模板的繁琐！Word文档导出,easy!

word模板导出最近项目中有个功能，导出月报，发现同事使用了docx格式模板,感觉比之前转成xml的简单多了，这边记录下使用方法。 xml方式导出word,模板太复杂了资料 poi-tl 一个基于Apache POI的Word模板引擎，也是一个免费开源的Jav…...

编程日记 2025/8/14 18:24:40

LeetCode 3280 将日期转换为二进制表示

【算法实战】日期转二进制：两种解法的思路与优化（附代码解析） 一、问题描述给定一个yyyy-mm-dd格式的日期字符串，要求将年、月、日分别转为无前导零的二进制，并保持year-month-day格式。示例：输入2025-…...

编程日记 2025/8/10 19:13:17

基于SpringBoot的“考研互助平台”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“考研互助平台”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：SpringBoot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示系统整体功能图局部E-R图系统首页界面系统注册…...

编程日记 2025/8/10 23:02:47

在线Doc/Docx转换为PDF格式超快速转换的一款办公软件文档快速转换在线转换免费转换办公软件

小白工具https://www.xiaobaitool.net/files/word-pdf/提供了一项非常实用的在线服务——将Doc或Docx格式的文档快速转换为PDF格式。这项服务不仅操作简单，而且转换效率高，非常适合需要频繁处理文档转换的用户。服务特点： 批量转换&#x…...

编程日记 2025/8/12 13:38:17

3.14-进程间通信

进程间通信 IPC 进程间通信的原理，借助进程之间使用同一个内核，借助内核，传递数据。进程间通信的方法管道：最简单。信号：开销小。mmap映射：速度最快，非血缘关系之间。socket（本…...

编程日记 2025/8/8 1:26:53

大模型AI多智能体系统（Multi-Agent Systems, MAS）技术介绍

一、多智能体系统的定义与核心概念多智能体系统（MAS）是由多个具备自主决策能力的智能体（Agent）组成的分布式系统。每个智能体能够感知环境、执行动作，并通过协作或竞争实现个体或集体目标。其核心特征包括：自主性：智能体无需外部指令即可独立决策（如MetaGPT中的角色…...

编程日记 2025/8/14 0:25:01

web3区块链

Web3 是指下一代互联网，也被称为“去中心化互联网”或“区块链互联网”。它是基于区块链技术构建的，旨在创建一个更加开放、透明和用户主导的网络生态系统。以下是关于 Web3 的一些关键点： ### 1. **核心概念** - **去中心化**&#xff1…...

编程日记 2025/8/15 1:29:43

Alembic 实战指南：快速入门到FastAPI 集成

一、快速开始 1.1 简介 Alembic 是一个基于 SQLAlchemy 的数据库迁移工具，主要用于管理数据库模式（Schema）的变更，例如新增表、修改字段、删除索引等，确保数据库结构与应用程序的 ORM 模型保持一致。 Alembic 通过版…...

编程日记 2025/8/11 18:08:11

【视频】V4L2、ffmpeg、OpenCV中对YUV的定义

1、常见的YUV格式 1.1 YUV420 每像素16位 IMC1：YYYYYYYY VV-- UU– IMC3：YYYYYYYY UU-- VV– 每像素12位 I420: YYYYYYYY UU VV =>YUV420P YV12: YYYYYYYY VV UU =>YUV420P NV12: YYYYYYYY UV UV =>YUV420SP（最受欢迎格式） NV21: YYYYYYYY VU VU =>YUV420SP…...

编程日记 2025/8/13 11:17:08

ubuntu20.04装nv驱动的一些坑

**1.一定要去bios里面关闭secure boot，否则驱动程序需要签名，安装了的驱动无法被识别加载 2.假如没有关闭secure boot然后装了驱动，然后再去关闭secure boot，可能会导致进入不了ubuntu的情况此时，先恢复secure boot&…...

编程日记 2025/8/12 19:34:46

【SpringMVC】常用注解：@SessionAttributes

1.作用用于多次执行控制器方法间的参数共享 2.属性 value：用于指定存入的属性名称 type：用于指定存入的数据类型 3.示例先写JSP代码 <a href"demo1/putMethod">存入 SessionAttribute</a><br><a href"demo…...

编程日记 2025/8/10 20:41:28

阿里云企业邮箱出现故障怎么处理？

阿里云企业邮箱出现故障怎么处理？ 以下是处理阿里云企业邮箱故障的详细分步指南，帮助您快速定位问题并恢复邮箱正常使用： 一、初步排查：确认故障范围与现象确定影响范围全体用户无法使用 → 可能为阿里云服务端故障或网络中断。…...

编程日记 2025/8/12 0:01:54

C# Enumerable类之集合操作

总目录前言在 C# 中，System.Linq.Enumerable 类是 LINQ（Language Integrated Query）的核心组成部分，它提供了一系列静态方法，用于操作实现了 IEnumerable 接口的集合。通过这些方法，我们可以轻松地对集合…...

编程日记 2025/8/11 13:24:28

LVGL移植到6818开发板

一、移植步骤 1.lv_config.h 配置文件启动 framebuffer 2、lv_config.h 配置文件关闭SDL 2.修改main.c 去掉SDL输入设备 3.修改Makefile 文件启动交叉编译去掉警告参数去掉SDL库 4.交叉编译代码 make clean #清空 ⭐ 必须要清空一次再编译！ 因为修改了 lv_con…...

编程日记 2025/8/11 9:19:27

深入理解 `ParameterizedTypeReference`：解决 Java 泛型擦除问题

在 Java 中，由于类型擦除的存在，我们在使用 RestTemplate 获取带有泛型的 HTTP 响应时，可能会遇到泛型信息丢失的问题。而 ParameterizedTypeReference<T> 正是用来解决这个问题的。本文将深入解析 ParameterizedTypeReference 的作…...

编程日记 2025/8/11 0:09:40

如何使用Python的matplotlib.pyplot绘制热图和损失图

在Python的数据可视化中，matplotlib是一个非常重要的库。而matplotlib.pyplot作为其中一个模块，提供了许多绘制各种图形的函数。今天，我们就来聊聊如何利用这个库来绘制热图和损失图，通过这两个图形展示数据，让我们一起…...

编程日记 2025/8/10 1:24:10

1. 前言

2. declutter 介绍

3. 项目环境

4. 代码实现

4.1 创建 Vue 组件

完整代码

5. 代码解析

5.1 setTrackStyle 方法

5.2 showTrace 方法

5.3 initMap 方法

6. declutter 前后效果对比