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

Leaflet使用SVG创建动态Legend

news 来源：原创 2025/6/9 9:28:38

接前一篇文章，前一篇文章我们使用 SVG 创建了带有动态文字的图标，今天再看看怎样在地图上根据动态图标生成相关的legend，当然这里也还是使用了 SVG 来生成相关颜色的 legend。

看下面的代码，生成了一个 svg 节点，其中包含了一个带有颜色的圆形图标和一个文字说明。

private generateLegend(name: string, color: string): string {return `<svgversion="1.2"baseProfile="tiny"xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 30 30"><circle cx="20" cy="20" r="10" fill="${color}" /></svg><span style="margin-left: 4px;">${name}</span>`;
}

完整的 map.component.ts 文件如下，其它代码参考前一篇文章。

import { Component, OnInit, AfterViewInit } from "@angular/core";
import * as leaflet from "leaflet";@Component({selector: "app-map",templateUrl: "./map.component.html",styleUrls: ["./map.component.css"],
})
export class MapComponent implements OnInit, AfterViewInit {map!: leaflet.Map;constructor() {}ngOnInit(): void {}ngAfterViewInit(): void {this.initMap();}private initMap(): void {this.map = leaflet.map("map").setView([51.5, -0.09], 13);const tiles = leaflet.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",{maxZoom: 19,attribution:'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',},);tiles.addTo(this.map);const clients = [{ name: "Client A", lat: 51.5, lng: -0.09, value: 7, color: "red" },{ name: "Client B", lat: 51.5, lng: -0.07, value: 7, color: "blue" },{ name: "Client C", lat: 51.5, lng: -0.11, value: 7, color: "green" },];clients.forEach((client) => {this.generateMarker(client.lat, client.lng, client.value, client.color);});const generateLegend = this.generateLegend;const legend = leaflet.control.scale({ position: "bottomleft" });legend.onAdd = function () {const div = leaflet.DomUtil.create("div", "info");let html = `<div style="width: 80px; height: 80px; background-color: lightgray;">`;html += `<strong>Categories</strong><br/>`;clients.forEach((client) => {html += generateLegend(client.name, client.color) + "<br/>";});html += `</div>`;div.innerHTML = html;return div;};legend.addTo(this.map);}private generateMarker(lat: number,lng: number,value: number,color: string,) {const circleSVGHtml = `<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="250" height="250"><circle cx="125" cy="125" r="100" fill="${color}"/><text x="50%" y="50%" text-anchor="middle" fill="white" font-size="100px" font-family="Arial" dy=".2em">${value}</text></svg>`;const iconURL = "data:image/svg+xml," + encodeURIComponent(circleSVGHtml);const circleIcon = leaflet.icon({iconUrl: iconURL,iconSize: [30, 30],});const marker = leaflet.marker([lat, lng], { icon: circleIcon }).addTo(this.map);return marker;}private generateLegend(name: string, color: string): string {return `<svgversion="1.2"baseProfile="tiny"xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 30 30"><circle cx="20" cy="20" r="10" fill="${color}" /></svg><span style="margin-left: 4px;">${name}</span>`;}
}

Leaflet使用SVG创建动态Legend

接前一篇文章，前一篇文章我们使用 SVG 创建了带有动态文字的图标，今天再看看怎样在地图上根据动态图标生成相关的legend，当然这里也还是使用了 SVG 来生成相关颜色的 legend。看下面的代码，生成了一个 svg 节点，其中…...

编程日记 2025/5/29 16:58:40

使用 Vue Tour 封装一个统一的页面引导组件

项目开发过程中需要实现用户引导功能，经过调研发现一个好用的 Vue 插件 vue-tour，今天就来分享一下我是如何基于 vue-tour 封装一个统一的引导组件，方便后续在多个页面复用的。 📦 第一步：安装 vue-tour 插件首先安装…...

编程日记 2025/5/29 2:37:51

OpenResty 深度解析：构建高性能 Web 服务的终极方案

引言 openresty是什么？在我个人对它的理解来看相当于嵌入了lua的nginx; 我们在nginx中嵌入lua是为了不需要再重新编译,我们只需要重新修改lua脚本,随后重启即可; 一.lua指令序列我们分别从初始化阶段，重写/访问阶段，内容阶段，日志…...

编程日记 2025/6/3 11:01:13

赋能企业级移动应用 CFCA FIDO+提升安全与体验

移动办公与移动金融为企业有效提升业务丰富性、执行便捷性。与此同时，“安全”始终是移动办公与移动金融都绕不开的话题。随着信息安全技术的发展，企业级移动应用中安全与便捷不再是两难的抉择。中金金融认证中心（CFCA）作为经国…...

编程日记 2025/5/27 7:22:19

Redis 数据类型与操作完全指南

Redis 是一个开源的、内存中的数据结构存储系统，它可以用作数据库、缓存和消息中间件。与传统的关系型数据库不同，Redis 提供了丰富的数据类型和灵活的操作方式，这使得它能够高效地解决各种不同场景下的数据存储和处理问题。本文将全面介绍 R…...

编程日记 2025/6/2 16:14:39

ArrayList-集合使用

自动扩容，集合的长度可以变化，而数组长度不变，集合更加灵活。集合只能存引用数据类型，不能直接存基本数据类型，除非包装 ArrayList会拿[]展示数据...

编程日记 2025/6/1 8:54:58

深入解析Spring Boot与Redis集成：高效缓存实践

深入解析Spring Boot与Redis集成：高效缓存实践引言在现代Web应用开发中，缓存技术是提升系统性能的重要手段之一。Redis作为一种高性能的键值存储数据库，广泛应用于缓存、会话管理和消息队列等场景。本文将详细介绍如何在Spring Boot项目中…...

编程日记 2025/5/31 11:25:25

8天Python从入门到精通【itheima】-11~13

目录 11节-PyCharm的安装和基础使用： 1.第三方IDE（集成开发工具） 2.PyCharm的所属——jetbrains公司 3.进入jetbrains的官网，搜索下载【官网自带中文，太友好了，爱你（づ￣3&#x…...

编程日记 2025/6/2 12:34:25

day33-网络编程

1. 网络编程入门 1.1 网络编程概述计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备，通过通信线路连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统…...

编程日记 2025/5/29 13:37:03

CMake基础及操作笔记

CMake 基础与操作：从入门到精通前言 CMake 是一个功能强大、跨平台的构建工具，广泛用于 C 项目管理。它通过简洁的配置文件（CMakeLists.txt）描述编译过程，生成适用于不同平台的构建脚本（如 Makefile 或 …...

编程日记 2025/6/3 19:31:44

使用lvm进行磁盘分区

使用lvm进行磁盘分区目的： 使用/dev/vdb创建一个5g的逻辑卷挂载到/mnt/lvmtest 前提： /dev/vdb是一块干净的空磁盘，数据会被清空！！！ 1. 创建物理卷(PV)： pvcreate /dev/sdb2. 验证&#xf…...

编程日记 2025/5/29 16:09:12

Java的线程通信机制是怎样的呢？

核心观点：线程通信本质是状态同步与数据传递的协同控制（类比测试团队协作：如同测试用例执行需要同步进度，测试数据需要跨线程传递）一、基础通信机制（附测试验证方法） 1. 共享内存（最常用但最危险） // 测试典型场景：多线程统计测试用例通过率 public class Share…...

编程日记 2025/5/29 17:57:20

线性回归策略

一种基于ATR（平均真实范围）、线性回归和布林带的交易策略。以下是对该策略的全面总结和分析：交易逻辑思路 1. 过滤条件： - 集合竞价过滤：在每个交易日的开盘阶段，过滤掉集合竞价产生的异常数据。 - 价格异常过滤：排除当天开盘价与最高价或最低价相同的情况，这…...

编程日记 2025/5/29 12:48:28

Sparse4D运行笔记

Sparse4D有三个版本，其中V1和V2版本的官方文档中环境依赖写得比较模糊且依赖库有版本冲突。 1. Sparse4D V1 创建环境 conda create sparse4dv1 python3.8 激活环境 conda activate sparse4dv1 安装torch, torchvision, torchaudio pip install torch1.13.0c…...

编程日记 2025/5/29 15:30:54

Bitmap、Roaring Bitmap、HyperLogLog对比介绍

一、Bitmap（位图）概述 Bitmap 是一种用位（bit）来表示集合元素是否存在的数据结构。每个位代表一个元素的状态（0或1），非常节省空间且支持快速集合操作。常见Bitmap类型：普通Bitmap 最简单的位数组，适合元素范围固定且不稀疏的场景。例如，元素范围是0~1000，用1001…...

编程日记 2025/5/28 8:30:45

Rust 数据结构：HashMap

Rust 数据结构：HashMap Rust 数据结构：HashMap创建一个新的哈希映射HashMap::new()将元组变成哈希表访问哈希映射中的值哈希映射和所有权更新哈希映射重写一个值仅当键不存在时才添加键和值基于旧值更新值散列函数 Rust 数据结构：HashMap …...

编程日记 2025/5/29 16:35:32

Spring6学习及复习笔记

1、快速入门认识通过编写xml配置文件来创建对象，读取bean标签的id值和class值来创建。之后再通过对象调用相关的方法（这里实际上用到的是反射机制） 对象会存放到Map集合中大致反射思路如下：（这里只是模拟&#x…...

编程日记 2025/5/29 9:31:29

开源语音-文本基础模型和全双工语音对话框架 Moshi 介绍

介绍一、项目背景 Moshi是一种语音-文本基础模型和全双工语音对话框架。它使用了Mimi这一业界领先的流式神经音频编解码器。Mimi能够以完全流式处理的方式（80毫秒的延迟，即帧大小），将24千赫兹的音频信号压缩为12.5赫兹的表示形式…...

编程日记 2025/5/29 12:00:11

MATLAB学习笔记（六）：MATLAB数学建模

MATLAB 是数学建模的强大工具，其丰富的函数库和可视化能力可以高效解决各类数学建模问题。以下是 MATLAB 数学建模的完整指南，涵盖建模流程、常用方法、代码示例及实际应用。一、数学建模的基本流程问题分析 • 明确目标（预测、优化、分类等…...

编程日记 2025/5/18 9:25:53

博客打卡-求解流水线调度

题目如下： 有n个作业（编号为1～n）要在由两台机器M1和M2组成的流水线上完成加工。每个作业加工的顺序都是先在M1上加工，然后在M2上加工。M1和M2加工作业i所需的时间分别为ai和bi（1≤i≤n）。流水…...

编程日记 2025/5/29 18:33:40

【Ragflow】22.RagflowPlus(v0.3.0)：用户会话管理/文件类型拓展/诸多优化更新

概述在历经三周的阶段性开发后，RagflowPlus顺利完成既定计划，正式发布v0.3.0版本。开源地址：https://github.com/zstar1003/ragflow-plus 新功能 1. 用户会话管理在后台管理系统中，新增用户会话管理菜单。在此菜单中&…...

编程日记 2025/6/1 17:05:50

深度学习中ONNX格式的模型文件

一、模型部署的核心步骤模型部署的完整流程通常分为以下阶段，用 “跨国旅行” 类比： 步骤类比解释技术细节1. 训练模型学会一门语言（如中文）用 PyTorch/TensorFlow 训练模型2. 导出为 ONNX翻译成国际通用语言（如英语…...

编程日记 2025/5/29 10:01:30

【机器人】复现 WMNav 具身导航 | 将VLM集成到世界模型中

WMNav 是由VLM视觉语言模型驱动的，基于世界模型的对象目标导航框架。设计一种预测环境状态的记忆策略，采用在线好奇心价值图来量化存储，目标在世界模型预测的各种场景中出现的可能性。本文分享WMNav复现和模型推理的过程～ 下…...

编程日记 2025/5/29 13:29:50

一、问题示例 #include <iostream> using namespace std;class Base { public:Base() { cout << "Base constructor\n"; }~Base() { cout << "Base destructor\n"; } // 不是 virtual };class Derived : public Base { public:Derived(…...

编程日记 2025/5/28 8:46:12

UDP--DDR--SFP,FPGA实现之模块梳理及AXI读写DDR读写上板测试

模块梳理介绍在之前的几篇文章中，笔者详细介绍了整个项目的框架结构以及部分关键模块的实现细节。这些模块包括UDP协议栈、UDP指令监测、数据跨时钟域处理、DDR读写控制、内存读取控制以及DDR AXI控制器等。这些模块共同构成了项目的基础架构，每个模块…...

编程日记 2025/5/29 17:04:39

Slidev集成Chart.js：专业数据可视化演示文稿优化指南

引言：为何选择在Slidev中集成Chart.js？ 在现代演示文稿中，高效的数据可视化对于清晰传达复杂信息至关重要。Slidev是一款灵活的开源演示文稿工具，基于Web技术构建，但在高级数据可视化方面存在一定局限。本文旨在提供一…...

编程日记 2025/5/29 16:52:58

动态规划（3）学习方法论：构建思维模型

引言动态规划是算法领域中一个强大而优雅的解题方法，但对于许多学习者来说，它也是最难以掌握的算法范式之一。与贪心算法或分治法等直观的算法相比，动态规划往往需要更抽象的思维和更系统的学习方法。在前两篇文章中，我们介绍了动态规划的基础概念、原理以及问题建模与状…...

编程日记 2025/5/29 10:14:19

NDS3211HV单路H.264/HEVC/HD视频编码器

1产品概述 NDS3211HV单路高清编码器是一款功能强大的音/视频编码设备，支持2组立体声，同时还支持CC(CVBS)字幕。支持多种音频编码方式。该设备配备了多种音/视频输入接口：HD-SDI数字视频输入、HDMI高清输入（支持CC）、A…...

编程日记 2025/5/29 19:10:27

GO语言语法---if语句

文章目录 1. 基本语法1.1 单分支1.2 双分支1.3 多分支 2. Go特有的if语句特性2.1 条件前可以包含初始化语句2.2 条件表达式不需要括号2.3 必须使用大括号2.4 判断语句所在行数控制 Go语言的if语句用于条件判断，与其他C风格语言类似，但有一些独特的语法特…...

编程日记 2025/5/29 13:10:03

单细胞转录组（4）Cell Ranger

使用 Cell Ranger 分析单细胞数据 1. 数据转换 BCL2FASTQ 在进行单细胞数据分析之前，需要将 Illumina 测序仪生成的 BCL 格式数据转换为 FASTQ 格式。这一步通常使用 bcl2fastq 软件完成。 1.1 安装 bcl2fastq bcl2fastq 是 Illumina 提供的软件，用于…...

编程日记 2025/5/29 13:17:56

Python爬虫-爬取百度指数之人群兴趣分布数据，进行数据分析

前言本文是该专栏的第56篇，后面会持续分享python爬虫干货知识，记得关注。在本专栏之前的文章《Python爬虫-爬取百度指数之需求图谱近一年数据》中，笔者有详细介绍过爬取需求图谱的数据教程。而本文，笔者将再以百度指数为例子，基于Python爬虫获取指定关键词的人群“兴…...

编程日记 2025/6/2 8:21:50

使用Python和Selenium打造一个全网页截图工具

无论是归档网站、测试页面设计，还是为报告记录网页内容，一个可靠的截图工具都能大大提升效率。本文将介绍如何使用Python、Selenium和wxPython构建一个用户友好的网页截图工具。该工具能在浏览器中显示网页，自动平滑滚动到底部以触发懒加载内…...

编程日记 2025/5/29 12:18:26

自动化脚本开发：Python调用云手机API实现TikTok批量内容发布

在2025年的技术生态下，通过Python实现TikTok批量内容发布的自动化脚本开发需结合云手机API调用、TikTok开放接口及智能调度算法。以下是基于最新技术实践的系统化开发方案： 一、云手机环境配置与API对接云手机平台选择与API接入推荐使用比特云手机或丁…...

编程日记 2025/6/4 14:58:27

React Hooks 必须在组件最顶层调用的原因解析

文章目录前言一、Hooks 的基本概念二、Hooks 的调用规则三、为什么 Hooks 必须在最顶层调用？1. 维护 Hooks 的调用顺序2. 闭包与状态关联3. 实现细节：Hook 的链表结构四、违反规则的后果五、如何正确使用 Hooks六、示例：正确与错误的用法对…...

编程日记 2025/5/29 11:25:49

西门子 Teamcenter13 Eclipse RCP 开发 1.2 工具栏开关按钮

西门子 Teamcenter13 Eclipse RCP 开发 1.2 工具栏开关按钮 1 配置文件2 插件控制3 命令框架位置locationURI备注菜单栏menu:org.eclipse.ui.main.menu添加到传统菜单工具栏toolbar:org.eclipse.ui.main.toolbar添加到工具栏 style 值含义显示效果push普通按钮（默…...

编程日记 2025/5/31 7:15:34

5.27本日总结

一、英语复习list2list29 二、数学学习14讲部分内容三、408 学习计组1.2内容四、总结高数和计网明天结束当前章节，计网内容学完之后主要学习计组和操作系统五、明日计划英语：复习lsit3list28，完成07年第二篇阅读数学&#…...

编程日记 2025/5/28 7:42:25

【持续更新中】架构面试知识学习总结

1.分库分表出现冗余数据： ☆分库分表方法：水平和垂直（业务场景，数据关联性。逻辑要调查清楚） 垂直：将一个表(库)按照列的业务相关性进行拆分，把经常一起使用的列放在一张表(库)&…...

编程日记 2025/5/31 9:18:59

文字溢出省略号显示

一、单行文字溢出、省略号显示二、多行文字溢出，省略号显示有较大的兼容性问题，适用于Webkit为内核的浏览器软件，或者移动端的（大部分也是webkit） 此效果建议后端人员开发三、图片底侧空白缝隙的修复技巧&#…...

编程日记 2025/5/28 7:48:42

力扣-283-移动零

1.题目描述 2.题目链接 283. 移动零 - 力扣（LeetCode） 3.题目代码 class Solution {public void moveZeroes(int[] nums) {int dest-1;int cur0;while(cur<nums.length){if(nums[cur]0){cur;}else if(nums[cur]!0){swap(nums,cur,dest1);cur;dest…...

编程日记 2025/5/29 21:29:13

【001】RenPy打包安卓apk 流程源码级别分析

1. 入口在下图 2. SDK版本及代码入口 （renpy-8.3.7-sdk） 由于SDK一直在升级，本文采用标题中的版本进行分析，整体逻辑变化不太大。实际执行逻辑是调用的rapt 2.1 点击按钮实际执行逻辑 def AndroidIfState(state, needed, acti…...

编程日记 2025/5/29 14:59:31

机器学习-人与机器生数据的区分模型测试-数据处理 - 续

这里继续机器学习-人与机器生数据的区分模型测试-数据处理1的内容查看数据中1的情况 #查看数据1的分布情况 one_ratio_list [] for col in data.columns:if col city or col target or col city2: # 跳过第一列continueelse:one_ratio data[col].mean() # 计算1值占…...

编程日记 2025/6/1 8:43:17

计算机视觉与深度学习｜ Python实现EMD-VMD-LSTM时间序列预测（完整源码和数据)

EMD-VMD-LSTM 一、完整代码实现二、代码结构解析三、关键参数说明四、性能优化建议五、工业部署方案以下是用Python实现EMD-VMD-LSTM时间序列预测的完整代码，结合经验模态分解（EMD）、变分模态分解（VMD）与LSTM深度学习模型，适用于复杂非平稳信号的预测任务。代码包含数据生…...

编程日记 2025/5/18 9:09:13

数据结构与算法——双向链表

双向链表定义链表分类双向链表：带头双向循环链表初始化打印尾插头插尾删头删查找在pos(指定位置)之后插入结点在pos(指定位置)之前插入结点删除pos(指定位置)的结点销毁顺序表与链表的分析定义链表分类单向和双向带头和不带头带头是指存在一个头结点&…...

编程日记 2025/5/31 8:23:40

.NET 中管理 Web API 文档的两种方式

前言在 .NET 开发中管理 Web API 文档是确保 API 易用性、可维护性和一致性的关键。今天大姚给大家分享两种在 .NET 中管理 Web API 文档的方式，希望可以帮助到有需要的同学。 Swashbuckle Swashbuckle.AspNetCore 是一个流行的 .NET 库，它使得在 AS…...

编程日记 2025/5/29 20:51:12

混合学习：Bagging与Boosting的深度解析与实践指南

引言在机器学习的世界里，模型的性能优化一直是研究的核心问题。无论是分类任务还是回归任务，我们都希望模型能够在新的数据上表现出色，即具有良好的泛化能力。然而，实际应用中常常遇到模型过拟合（高方差）…...

编程日记 2025/6/3 22:20:36

基于大疆Mini 3无人机和指定软件工具链的完整3D建模工作

基于大疆Mini 3无人机和指定软件工具链的完整3D建模工作流程关键步骤： 1. 无人机航拍准备 • 设备检查：确保大疆 Mini 3 电量充足，相机设置为 RAW 格式（便于后期调色），关闭自动白平衡。 • 飞行规划&…...

编程日记 2025/5/29 13:11:39

开源项目实战学习之YOLO11：12.1 ultralytics-models-sam-blocks.py源码

👉 点击关注不迷路 👉 点击关注不迷路 👉 另外，前些天发现了一个巨牛的AI人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。感兴趣的可以点击相关跳转链接。点击跳转到网站。 ultralytics-models-sam 1.sam-modules-__init__.py2.sam-modules-blocks.pybl…...

编程日记 2025/5/29 15:27:21

3D个人简历网站 5.天空、鸟、飞机

1.显示天空 models下新建文件Sky.jsx Sky.jsx // 从 React 库中导入 useRef 钩子，用于创建可变的 ref 对象 import { useRef } from "react"; // 从 react-three/drei 库中导入 useGLTF 钩子，用于加载 GLTF 格式的 3D 模型 import { useGLT…...

编程日记 2025/5/29 8:47:00

蓝桥杯-不完整的算式

问题描述小蓝在黑板上写了一个形如 AopBCAopBC 的算式，其中 AA、BB、CC 都是非负整数，opop 是、-、*、/、-、*、/（整除）四种运算之一。不过 AA、opop、BB、CC 这四部分有一部分被不小心的同学擦掉了。给出这个不完整的算式&a…...

编程日记 2025/5/30 9:12:12

【Python 算法零基础 3.递推】

压抑与痛苦，那些辗转反侧的夜，终会让我们更加强大 —— 25.5.16 一、递推的概念递推 —— 递推最通俗的理解就是数列，递推和数列的关系就好比算法和数据结构的关系，数列有点像数据结构中的线性表(可以是顺序表，也…...

编程日记 2025/5/28 8:40:12

相关文章：