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

Leaflet.js+leaflet.heat实现热力图

article 2026/2/22 19:44:50

Leaflet热力图

效果

在这里插入图片描述

一、环境准备

基础依赖安装

#脚手架安装
# 安装 Leaflet
npm install leaflet
# 安装 Leaflet.heat
npm install leaflet.heat

<!-- CDN 安装-->
<!-- Leaflet核心库 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><!-- 热力图插件 -->
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>

二、地图初始化

const map = L.map('map').setView([51.505, -0.09], 13);// 添加OSM底图
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

三、热力数据生成

数据生成函数（可自定义参数）

function generateRandomData(count, centerLat, centerLng, radius) {return Array.from({length: count}, () => [centerLat + (Math.random() - 0.5) * radius,centerLng + (Math.random() - 0.5) * radius,Math.random()  // 强度值范围 0~1]);
}// 生成10000个测试点（伦敦市中心区域）
const heatData = generateRandomData(10000, 51.505, -0.09, 0.1);

数据格式说明：
• 每个数据点为三元组 [纬度, 经度, 强度]
• 建议强度值归一化到0~1范围
• 实际项目可从GeoJSON/CSV转换（参考网页3数据转换方法）

四、热力图层配置

const heat = L.heatLayer(heatData, {radius: 25,        // 点半径（像素）blur: 15,          // 模糊系数（0~1）maxZoom: 17,       // 最大显示层级max: 1.0,          // 强度最大值gradient: {        // 颜色映射配置0.4: 'blue',0.6: 'cyan',0.7: 'lime',0.8: 'yellow',1.0: 'red'}
}).addTo(map);

关键参数说明：
• radius：根据数据密度调整，过大会导致热区重叠（参考网页3建议）
• gradient：支持CSS颜色名/RGB值，推荐使用HSL颜色空间渐变
• minOpacity：可添加此参数控制最小可见度（网页1建议值0.2）

五、完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Leaflet Heatmap Example</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script><style>body {margin: 0;padding: 0;}#map {width: 100%;height: 600px;}</style>
</head><body><div id="map"></div><script>// 初始化地图const map = L.map('map').setView([51.505, -0.09], 13);// 添加瓦片图层L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; OpenStreetMap contributors'}).addTo(map);// 热力图数据// 生成1000个随机数据点function generateRandomData (count, centerLat, centerLng, radius) {const data = [];for (let i = 0; i < count; i++) {// 生成随机偏移量const offsetLat = (Math.random() - 0.5) * radius;const offsetLng = (Math.random() - 0.5) * radius;// 计算随机点的经纬度const lat = centerLat + offsetLat;const lng = centerLng + offsetLng;// 随机强度值const intensity = Math.random();// 添加到数据数组data.push([lat, lng, intensity]);}return data;}const heatData = generateRandomData(10000, 51.505, -0.09, 0.1);// 添加热力图图层const heat = L.heatLayer(heatData, {radius: 25,       // 热力图半径blur: 15,         // 模糊程度maxZoom: 17,      // 最大缩放级别max: 1.0,         // 最大强度gradient: { 0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red' } // 颜色梯度}).addTo(map);// 可选：添加点击事件，在地图点击处添加一个热力点map.on('click', function (e) {const newPoint = [e.latlng.lat, e.latlng.lng, 0.8];heat.addData([newPoint]);});</script>
</body></html>

Leaflet.js+leaflet.heat实现热力图

Leaflet热力图 #mermaid-svg-I1zXN0OrNCBGKEWy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-I1zXN0OrNCBGKEWy .error-icon{fill:#552222;}#mermaid-svg-I1zXN0OrNCBGKEWy .error-text{fill:#552222;stroke:#5522…...

编程日记 2026/2/14 15:42:52

通过git文件查看大模型下载链接的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2026/2/15 6:30:01

多源最短路：Floyd算法の暴力美学

多源最短路求解的是图中的任意两个节点之间的最短路。前文我们已经讲过单源最短路，我们完全可以做n次单源最短路算法，求出任意两节点的最短距离。最快的堆优化版的 dijkstra 算法的时间复杂度为o（m * logm），枚举n次时…...

编程日记 2026/2/14 13:20:05

初教六双机一飞冲天动作要领

初教六双机一飞冲天动作要领初教六双机“一飞冲天”是典型的垂直爬升特技动作，要求双机以近乎垂直的姿态同步高速爬升，展现飞机的动力性能与编队协同能力。以下是该动作的详细技术解析与执行要点： 一、动作定义与特点基本形态双机以相同速…...

编程日记 2026/2/15 20:40:24

qtcore在docker容器中运行

FROM ubuntu # 设置时区环境变量 ENV TZAsia/Shanghai RUN echo "${TZ}" > /etc/timezone \ && ln -sf /usr/share/zoneinfo/${TZ} /etc/localtime \ && apt update \ && apt install -y tzdata \ && rm -rf /var/lib/apt…...

编程日记 2025/12/24 22:27:10

simpleITK - Setup - Pythonic Syntactic Sugar

Pythonic Syntactic Sugar Image Basics Notebook 非常简单，与 ITK 的 C 接口非常接近。 Sugar非常棒，它能让你精力充沛，更快地完成任务！SimpleITK 也应用了大量Sugar来帮助更快地完成任务。 %matplotlib inline import matplo…...

编程日记 2026/2/15 0:37:00

【leetcode hot 100 215】数组中的第K个最大元素

解法一：维护最大最小值 -> 堆 -> k个元素的最小值堆 class Solution {public int findKthLargest(int[] nums, int k) {// 维护最大最小值 -> 堆 -> k个元素的最小值堆PriorityQueue<Integer> heap new PriorityQueue<>((n1, n2) -> n…...

编程日记 2025/12/19 21:43:46

下载vmware17

我用VMware10安装ubuntu24，死活不能成功，要么突然退出，要么装着装着，眼看完成，居然卡住不动，一查日志，提示光盘读取失败（用的ISO文件，居然装模作样的说光驱读取失败&…...

编程日记 2026/2/13 21:52:02

德昂观点：如何看待MicroStrategy改名为Strategy？

2025年2月，纳斯达克上市公司MicroStrategy（股票代码：MSTR）宣布更名为“Strategy”，并同步启用全新品牌标识与橙色主视觉。这不仅是品牌形象的更新，更是公司战略方向的明确宣示。德昂作为MSTR中国区BI合作伙…...

编程日记 2026/2/14 3:14:18

嵌入式八股RTOS与Linux---网络系统篇

前言关于计网的什么TCP三次握手几层模型啊TCP报文啥的不在这里讲,会单独分成一个计算机网络模块这里主要介绍介绍lwip和socket FreeRTOS下的网络接口–移植LWIP 实际上FreeRTOS并不自带网络接口,我们一般会通过移植lwip协议栈让FreeRTOS可以通过网络接口收发数据,具体可…...

编程日记 2026/2/22 6:23:18

Django 生成 ssl 安全证书，切换 https、wss协议（daphne 、nginx）

Django 普通 http 协议不够安全，无法支持连接本地摄像头（虽然在本地 localhost 上能连），此时需要切换成 https 协议（先提个醒，我这个方法最后失败了，不过对您应该也有帮助） 目录配置…...

编程日记 2026/2/22 1:04:05

告别Win10强制更新：永久关闭系统更新指南

你是否厌倦了Win10在开关机时的强制自动更新？无论你是在赶时间还是专注于工作，那突如其来的更新提示总是让人不胜其烦。屏幕上那句“正在更新，请勿关闭电源”的提示，仿佛是对你无奈的嘲笑。别担心，今天我将教你如何永久…...

编程日记 2026/2/16 2:21:15

【django】2-1 (django配置) 应用配置、中间件配置、模板配置

文章目录 1 基本设置2 应用配置2.1 django核心应用2.2 常用第三方应用 3 中间件3.1 默认使用的中间件3.2 其它内置中间件3.3 第三方中间件3.4 中间件的执行顺序 4 模板引擎配置4.1 配置字典的键4.2 上下文处理器创建django项目后，会自动生成初始的项目文件如下&…...

编程日记 2026/2/18 0:30:14

nginx-rtmp-module之ngx_rtmp.c代码详解

1. ngx_rtmp.c — RTMP模块的主逻辑实现这个文件是 RTMP 模块的核心，包含了 RTMP 协议模块的初始化、配置解析和服务端口的管理等功能。它的主要职责是处理 RTMP 配置、初始化模块、配置事件、初始化 RTMP 端口等。主要功能和逻辑： 模块初始化 (ngx_…...

编程日记 2026/2/14 16:01:10

罗杰斯特回归

定义逻辑回归其实就是原来的线性回归加了激活函数，这个函数其实就是sigmoid函数，把一个回归的连续数值压缩到了0到1的空间，其实只要有函数能够满足把数值压缩到0,1之间就可以（因为0到1之间的数值就是概率值） 对于分类…...

编程日记 2026/2/15 23:57:11

Android 10.0 SystemUI状态栏去掉刘海屏功能实现

1.前言在android10.0的系统rom定制化开发中，在一些产品中，对于带有刘海屏的产品中，会因为刘海屏导致状态栏能显示图片的位置很小，然后会出现状态栏图标显示为白点的功能，接下来看下问题怎么解决 2.SystemUI状态栏去掉刘海屏功能实现的核心类 frameworks/base/core/r…...

编程日记 2026/2/14 23:01:45

三维空间中点、线、面的关系

三维空间中点、线、面的关系点相对于平面的位置关系直线相对于平面的位置关系1.根据三点计算平面方程 //根据3点计算平面方程#include <iostream> #include <cmath> #include <vector>...

编程日记 2026/2/13 18:56:25

【嵌入式学习2】C语言 - VScode环境搭建

目录 ## 语言分类 ## c语言编译器 ## VScode相关配置 ## 语言分类编译型语言：C，C解释型语言：python，JS ## c语言编译器分类GCC 系列MinGWCygwinMSVC系列一套编程语言编译器将GCC编译器和GNU Binutils移植到Win32平台下的产物…...

编程日记 2026/2/15 4:41:07

TCP/IP的网络连接设备

TCP/IP层物理层网卡、集线器、中继器数据链路层网桥、交换机网络层路由器传输层网关应用层 1.网桥：网桥主要功能是将一个网络的数据沿通信线路复制到另一个网络中去，可以有效的连接两个局域网 2.网关：网关又称协议转换器，是将两…...

编程日记 2026/2/16 1:28:27

蓝桥杯真题 2109.统计子矩阵

原题地址:1.统计子矩阵 - 蓝桥云课问题描述给定一个 NMNM 的矩阵 AA, 请你统计有多少个子矩阵 (最小 1111, 最大 NM)NM) 满足子矩阵中所有数的和不超过给定的整数 KK ? 输入格式第一行包含三个整数 N,MN,M 和 KK. 之后 NN 行每行包含 MM 个整数, 代表矩阵 AA. 输出格…...

编程日记 2026/2/12 20:14:19

利用脚本和Shader制作屏幕后处理效果

一、屏幕后处理的实现原理该屏幕后处理的原理是将渲染完成后的屏幕纹理通过脚本和Shader完成一些操作，然后实现各种屏幕效果而实现屏幕后处理效果的主要操作就是获得当下渲染完成后的屏幕图像，其中unity提供了一个函数用于获取此图像——OnRenderIma…...

编程日记 2026/2/21 19:20:54

【银河麒麟系统常识】命令：uname -m（查看系统架构）

命令： uname -m 功能常用的 Linux/Unix 终端命令，用于显示当前系统的硬件架构； 返回返回系统的CPU架构类型，用于判断软件兼容性； 输出结果架构说明常见设备x86_64Intel/AMD 64位 CPU主流 PC、服务器aarch64ARM 64位 …...

编程日记 2026/2/15 23:57:13

3.1.2 内存池

文章目录 3.1.2 内存池1. 什么是内存池2. 内存管理1. 定长2. 不定长3. jemalloc4. tcmalloc 3.1.2 内存池 1. 什么是内存池内存池（Memory Pool） 是一种预先分配一块大内存，然后按需分配和回收其中小块内存的技术。它的本质是管理一块连续…...

编程日记 2026/2/13 22:25:48

基于SpringBoot + Vue 的餐厅点餐管理系统

SpringBootVue餐厅点餐管理系统技术框架后端：springboot mybatisPlus前端：Vue2 elementUI数据库：mysql项目构建工具：maven 数据库表 14张角色及功能管理员：登录、用户管理、餐桌信息管理、菜品类型管理、菜…...

编程日记 2026/2/13 22:05:10

Android开发BasePagerAdapter

Android开发BasePagerAdapter 有个基类的PagerAdapter 方便很多 public class BasePagerAdapter extends FragmentPagerAdapter {private static final String TAG "FragmentPagerAdapter";private static final boolean DEBUG false;private final FragmentMana…...

编程日记 2025/9/21 5:10:31

70. Linux驱动开发与裸机开发区别,字符设备驱动开发

一、裸机驱动开发回顾 1、底层，跟寄存器打交道，有些MCU提供了库。二、Linux驱动开发思维 1、Linux下驱动开发直接操作寄存器不现实。 2、根据Linux下的各种驱动框架进行开发。一定要满足框架，也就是Linux下各种驱动框架的掌握。 3、驱动最…...

编程日记 2025/4/4 1:13:33

【博客节选】再谈Unity 的 root motion

节选自【Unity实战笔记】第二十三 root motion变更方向攻击 （OnStateMove rootmotion rigidbody 使用的一些问题） 小伙伴们应该对root motion非常困惑，包括那个bake into pose。当xz bake into pose后，角色攻击动画与父节点产…...

编程日记 2026/2/18 19:30:28