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

在Angular中使用Leaflet构建地图应用

news 来源：原创 2025/6/27 6:32:32

Leaflet是一个用于创建地图的JavaScript库，它包含许多功能，并且非常适用于移动设备。

准备

nodejs: v20.15.0
npm: 10.7.0
angular: 19.2.10

创建一个地图应用工程

npx @angular/cli new my-leaflet-app --style=css --routing=false --skip-tests

提示 “Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?” 的时候选择 No

创建完成后，启动一下，验证工程可以正常运行。

cd my-leaflet-app
npm start

然后访问 http://localhost:4200/ 验证。

安装leaflet

npm install leaflet @types/leaflet

创建地图组件

npx @angular/cli generate component map --skip-tests

编辑 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,minZoom: 3,},);tiles.addTo(this.map);}
}

编辑 map.component.html 文件

<div class="map-container"><div class="map-frame"><div id="map"></div></div>
</div>

编辑 map.component.css 文件

.map-container {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 30px;
}.map-frame {border: 2px solid black;height: 300px;width: 500px;
}#map {height: 100%;
}

使用地图组件

编辑 app.component.ts 文件，导入地图组建

import { Component } from "@angular/core";
import { MapComponent } from "./map/map.component";@Component({selector: "app-root",imports: [MapComponent],templateUrl: "./app.component.html",styleUrl: "./app.component.css",
})
export class AppComponent {title = "my-leaflet-app";
}

编辑 app.component.html 文件，在视图中添加地图组件

<app-map></app-map>

最后修改 angular.json 文件，在编译选项中添加 “./node_modules/leaflet/dist/leaflet.css”，如下：

{"projects": {"my-leaflet-app": {"architect": {"build": {"options": {"styles": ["./node_modules/leaflet/dist/leaflet.css","src/styles.css"],},},}}}
}

验证

启动服务 npm start，然后访问 http://localhost:4200/。

在Angular中使用Leaflet构建地图应用

Leaflet是一个用于创建地图的JavaScript库，它包含许多功能，并且非常适用于移动设备。准备 nodejs: v20.15.0 npm: 10.7.0 angular: 19.2.10 创建一个地图应用工程 npx angular/cli new my-leaflet-app --stylecss --routingfalse --skip-tests提示 …...

编程日记 2025/6/27 6:32:32

GPU与NPU异构计算任务划分算法研究：基于强化学习的Transformer负载均衡实践

点击 “AladdinEdu，同学们用得起的【H卡】算力平台”，H卡级别算力，按量计费，灵活弹性，顶级配置，学生专属优惠。引言在边缘计算与AI推理场景中，GPU-NPU异构计算架构已成为突破算力瓶颈的关键技…...

编程日记 2025/6/23 14:14:14

iOS 抓包实战：从 Charles 到Sniffmaster 的日常工具对比与使用经验

iOS 抓包实战：从 Charles 到抓包大师 Sniffmaster 的日常工具对比与使用经验抓包这件事，不是高级黑客才要做的。作为一名移动端开发，我几乎每天都要和网络请求打交道，尤其是 HTTPS 请求——加密、重定向、校验证书，各…...

编程日记 2025/6/25 7:59:40

【微服务】SpringBoot + Docker 实现微服务容器多节点负载均衡详解

目录一、前言二、前置准备 2.1 基本环境 2.2 准备一个springboot工程 2.2.1 准备几个测试接口 2.3 准备Dockerfile文件 2.4 打包上传到服务器三、制作微服务镜像与运行服务镜像 3.1 拷贝Dockerfile文件到服务器 3.2 制作服务镜像 3.3 启动镜像服务 3.4 访问一下服…...

编程日记 2025/6/24 15:34:19

【Linux系统】从 C 语言文件操作到系统调用的核心原理

文章目录前言lesson 15_基础IO一、共识原理二、回顾C语言接口2.1 文件的打开操作2.2 文件的读取与写入操作2.3 三个标准输入输出流三、过渡到系统，认识文件系统调用3.1 open 系统调用1. 比特位标志位示例 3.2 write 系统调用1. 模拟实现 w 选项2. 模拟实现 a 选项…...

编程日记 2025/6/25 0:41:52

俄罗斯方块算法

俄罗斯方块是一款风靡全球 38 年的经典益智游戏，凭借其简单易学但难于精通的特点，成为游戏史上的不朽之作。游戏界面与规则游戏界面为 20 行10 列的可视区域。横向 X 轴区间为 [0，9]，共 10 列；纵向 Y 轴区间为 [0&a…...

编程日记 2025/6/25 21:38:09

Node.js 循环依赖问题详解：原理、案例与解决方案

文章目录一、什么是循环依赖？二、循环依赖的典型表现三、解决方案四、如何检测循环依赖五、循环依赖的隐藏危害一、什么是循环依赖？ 当两个或者多个模块互相直接或者间接引用时，就会形成循环依赖。例如： A.js → 依赖 → B.js…...

编程日记 2025/6/26 1:26:45

Linux系统编程——vfork函数的使用方法以及与fork函数的区别

vfork() 是 Linux 系统编程中与 fork() 类似的系统调用，用于创建一个新的子进程。它们都能创建子进程，但在实现机制和使用场景上有明显区别。以下是对 vfork() 的详细介绍，包括： 使用方法注意事项与 fork() 的联系与区别使…...

编程日记 2025/6/26 12:27:23

.NET 无侵入自动化探针原理与主流实现详解

目录引言一、.NET 无侵入自动化探针的原理 1.1 CLR Profiling API 核心机制示例代码 1.2 CLR Instrumentation 核心机制示例代码 1.3 反射和动态代理核心机制示例代码 1.4 DiagnosticSource 核心机制示例代码二、主流实现与工具 2.1 AppDynamics 实现原…...

编程日记 2025/6/26 8:34:52

大数据：新能源汽车宇宙的未来曲率引擎

** 发布日期：2025-05-14** 关键词：大数据、新能源、机器学习、碳中和、CSDN爆款 1. 大数据科普：定义、特征与技术核心 1.1 什么是大数据？ 大数据（Big Data）指规模巨大、类型多样、生成速度快且价值密度低…...

编程日记 2025/6/26 11:27:17

创建你的第一个MCP服务

创建你的第一个MCP服务 Model Context Protocol (MCP) 中国天气查询服务创建教程什么是 Model Context Protocol (MCP) Model Context Protocol (MCP) 是一种开放标准协议，允许大型语言模型（LLM）如 Claude 与外部系统和数据源进行交互。通…...

编程日记 2025/6/25 20:37:13

说一说Node.js高性能开发中的I/O操作

众所周知，在软件开发的领域中，输入输出（I/O）操作是程序与外部世界交互的重要环节，比如从文件读取数据、向网络发送请求等。这段时间，也指导项目中一些项目的开发工作，发现在Node.js运用中&#…...

编程日记 2025/6/25 17:47:25

小白入门：GitHub 远程仓库使用全攻略

一、Git 核心概念 1. 三个工作区域工作区（Working Directory）：实际编辑文件的地方。暂存区（Staging Area）：准备提交的文件集合（使用git add操作）。本地仓库（Local…...

编程日记 2025/6/25 19:20:17

Protobuf3协议关键字详解与应用实例

一、核心语法与基础关键字 syntax 声明协议版本，必须为文件的第一行非空、非注释内容。 syntax "proto3"; // 显式指定proto3语法，否则编译器默认使用proto2message 定义消息类型，包含一组结构化字段。支持嵌套消息定义&#xff…...

编程日记 2025/6/24 21:25:49

阿克曼-幻宇机器人系列教程3- 机器人交互实践（Message）

上一篇文章介绍了如何通过topic操作命令实现与机器人的交互，本篇我们介绍如何通过Message（即topic的下一级）实现与机器人的交互。和topic一样，首先在一个终端通过ssh命令登录机器人、启动机器人，然后打开另外一个终端…...

编程日记 2025/6/26 20:26:26

Leetcode刷题 | Day63_图论08_拓扑排序

一、学习任务拓扑排序代码随想录二、具体题目 1.拓扑排序117. 软件构建【题目描述】某个大型软件项目的构建系统拥有 N 个文件，文件编号从 0 到 N - 1，在这些文件中，某些文件依赖于其他文件的内容，这意味着如果文件 A 依…...

编程日记 2025/6/25 23:34:17

[Harmony]获取资源文件中.txt文件中的字符串

txt文件 src/main/resources/rawfile/userInfo.txt {"Code": 200,"Msg": "登录成功","RetData": {"Name": "shq","Phone": "18511111111","PostName": "按摩技师",&qu…...

编程日记 2025/6/26 19:48:03

matlab多项式

1. 多项式表示多项式用行向量表示，按降幂排列系数。例如，多项式 3x22x1 表示为 [3 2 1]。 2. 创建多项式直接输入系数：如 p [1 -3 3 -1] 表示 x3−3x23x−1。由根创建：使用 poly 函数。例如，根为 [1, 1, 1]&…...

编程日记 2025/6/25 15:15:39

手搓传染病模型（SEI - SEIAR ）

在传染病防控的前沿研究中，构建精准的数学模型对于理解疾病传播机制、预测疫情走势以及制定有效干预策略至关重要。SEI - SEIAR 模型（易感媒介 \(S_m\) - 潜伏媒介 \(E_m\) - 感染媒介 \(I_m\) - 易感人群 S - 潜伏人群 E - 有症状感染者 I - 无症状感染…...

编程日记 2025/6/24 9:53:52

Ubuntu 安装 Redis

1. 下载 redis 下载地址：https://github.com/redis/redis 2. 解压 redis 把下载的软件包，上传到服务器的 /usr/local 目录中，执行解压命令 tar -zxvf redis-8.0.1.tar.gz 3. 安装 redis 安装依赖 sudo apt-get updatesudo apt-get ins…...

编程日记 2025/6/24 9:25:42

【QGIS二次开发】地图显示与交互-03

系列目录： 【QGIS二次开发】地图显示与交互-01_qgis二次开发加载地图案例-CSDN博客【QGIS二次开发】地图显示与交互-02_setlayerlabeling-CSDN博客 3. 地图符号与色表 3.1 矢量图层符号设置任务要求：双击图层树节点，实现图层中图元的符…...

编程日记 2025/6/25 16:17:30

28、动画魔法圣典：Framer Motion 时空奥义全解——React 19 交互动效

"在数字世界的夹缝中，存在着连接现实与虚拟的魔法纽带——这便是 Framer Motion 的时空秘术。" ——《前端魔法师手札卷七》一、时空裂隙动画 - FLIP量子跃迁术 1. FLIP时空扭曲原理 <motion.divlayout // 开启时空裂隙transition{{type: "spr…...

编程日记 2025/6/26 1:06:49

Ken Thompson 和 Dennis Ritchie

Ken Thompson（肯汤普逊）和Dennis Ritchie（丹尼斯里奇）是计算机科学领域的两位传奇人物，他们对现代计算机技术的发展产生了深远影响。以下是关于他们的详细介绍： 1. Ken Thompson 出生&am…...

编程日记 2025/6/23 6:02:38

SQL：MySQL函数：条件函数（Conditional Functions）

目录什么是条件函数？ 常用 MySQL 条件函数总览表 1️⃣ IF() – 条件判断函数（If Statement） 2️⃣ IFNULL() – 空值判断与替代函数（If Null） 3️⃣ NULLIF() – 相等返回 NULL（Null If Equal&#…...

编程日记 2025/6/25 1:51:08

初识Linux · IP分片

目录前言： IP分片分片vs不分片如何分片分片举例三个字段前言： 前文IP协议上和IP协议下我们已经把IP协议的报头的大多数字段介绍了，唯独有三个字段现在还有介绍，即16位标识，8位协议，13位片偏移…...

编程日记 2025/6/24 23:26:28

TCP 粘包

一、粘包问题详解 1. 粘包的概念定义： 指在 TCP 通信中，由于发送方和接收方的读写速度、数据量不一致，导致多个数据包被错误地合并成一个数据包处理的现象。产生原因： TCP 是流式协议（无边界）&#xff0…...

编程日记 2025/6/25 13:07:10

第一个优化

agent项目 tool 调用外部服务时选择了指数回避的重试机制优化点：延迟时间那加了一个随机的时间抖动指数回避我第一眼看到这不就是 tcp重连机制吗其实就是如果当时网络波动网况不好 || 服务正忙 ，可以不急着在这个时候选择多次重试&#xff0c…...

编程日记 2025/6/22 1:38:01

LabVIEW的CAN通讯测试程序

该程序是基于 NI LabVIEW 平台开发的 CAN（Controller Area Network，控制器局域网）通讯测试程序。主要功能是对 CAN 通讯过程进行模拟、数据传输与验证，确保 CAN 通讯的正常运行和数据的准确传输。程序详细说明接口选择&#xff…...

编程日记 2025/6/24 16:04:45

视频质量分析时，遇到不同分辨率的对照视频和源视频，分辨率对齐的正确顺序。

背景我们平时在做视频转码后，会用VMAF/PSNR得评分工具进行视频对比的评分，但是这几种客观评分方式都有一个要求就是分辨率要一模一样，因为这样才对像素点做数学运算。但是分辨率对齐其实有两种选择，例如源视频是1080P&#xf…...

编程日记 2025/6/25 22:56:54

private suspend fun fetchDataConcurrently(list: MutableList<MyType>,onRequestResult: (Int, List<MyType>?) -> Unit //高阶函数回调) {val deferredList mutableListOf<Deferred<MyType?>>()// 设定任务超时时间为12秒，并使用 …...

编程日记 2025/6/23 16:43:16

Ubuntu 编译SRS和ZLMediaKit用于视频推拉流

SRS实现视频的rtmp webrtc推流 ZLMediaKit编译生成MediaServer实现rtsp推流 SRS指定某个固定网卡，修改程序后重新编译打开SRS-4.0.0/trunk/src/app/srs_app_rtc_server.cpp，在 232 行后面添加： ZLMediaKit编译后文件存放在ZLMediakit/rele…...

编程日记 2025/6/25 23:28:29

typora免费获取序列号

这个方法不是唯一，但是所需要的时长很短。废话不多说 1.下载网盘文件通过网盘分享的文件：typora破解链接: https://pan.baidu.com/s/1KQnSUV3V0uBGpLc_iz2UFQ?pwdetc4 提取码: etc4 2.把解压下来的文件放到装软件的文件夹 3. 打开cmd，…...

编程日记 2025/6/21 12:08:15

C++23 新增的查找算法详解：ranges::find_last 系列函数

文章目录引言C Ranges 库简介ranges::find_last、ranges::find_last_if 和 ranges::find_last_if_not 概述ranges::find_last示例代码代码解释 ranges::find_last_if函数签名参数解释示例代码代码解释 ranges::find_last_if_not示例代码代码解释使用场景总结引言在 C 的发…...

编程日记 2025/6/26 18:00:31

11.基础IO（上）

一、文件概念对文件归类认知： 对于 0KB 的空文件是占用磁盘空间的文件是文件属性（元数据）和文件内容的集合（文件属性（元数据） 内容） 所有的文件操作本质是文件内容操作和文件属性操作。 …...

编程日记 2025/6/23 16:17:22

本地部署Firecrawl+Dify调用踩坑记录

最近自己研究Dify，使用到Firecrawl这个比较好用的工具。用Firecrawl官网的不知道为什么总是卡住得不到结果，于是我打算自己去本地部署一个。好家伙真给我人搞麻了，太多问题了。我是在京东云上面租的一台服务器。首先就是docker的安装&…...

编程日记 2025/6/26 22:07:30

硬盘坏了电脑会出现哪些明显现象？机械和固态可不一样

机械硬盘（HDD）损坏的常见表现 >启动异常：如果是启动盘，可能会遭遇系统无法启动，提示“No Bootable Device”“Operating System not found”或“Sector not found”等错误；以及BIOS无法识别硬盘&#x…...

编程日记 2025/6/21 1:31:07

数据驱动下的具身智能进化范式

数据驱动技术与挑战...

编程日记 2025/6/24 9:07:10

使用Python与正则表达式高效提取Excel中的票号数据

使用Python与正则表达式高效提取Excel中的票号数据一、需求本文将介绍如何利用Python的Pandas库和正则表达式，快速实现票号这一数据清洗任务，并将结果整理为规范的表格结构。在数据处理场景中，从非结构化文本里提取特定格式的信息是常见…...

编程日记 2025/6/22 14:58:02

MySQL 迁移至 Doris 最佳实践方案

在数据架构不断演进的背景下，从 MySQL 迁移至 Doris 成为许多企业提升数据处理效率的关键选择。本文将深入剖析三种经过实践验证的 MySQL 迁移至 Doris 的最佳方案，涵盖全量迁移、增量同步、混合迁移以及基于 CDC（Change Data Capture&#x…...

编程日记 2025/6/20 14:31:21

2025长三角杯数学建模A题思路模型代码：智能手机产品设计优化与定价问题

2025长三角杯数学建模A题思路模型代码，详细内容见文末名片一、问题背景在 2025 年第五届长三角高校数学建模竞赛中，赛题 A 聚焦于智能手机产品设计优化与定价这一极具现实意义的问题。如今的智能手机市场，可谓是一片硝烟弥漫的“战场”&a…...

编程日记 2025/6/25 20:08:26

【hadoop】Kafka 安装部署

一、Kafka安装与配置步骤： 1、使用XFTP将Kafka安装包kafka_2.12-2.8.1.tgz发送到master机器的主目录。 2、解压安装包： tar -zxvf ~/kafka_2.12-2.8.1.tgz 3、修改文件夹的名字，将其改为kafka，或者创建软连接也可&#xff1…...

编程日记 2025/6/24 8:19:45

网络安全EN18031-1,EN18031-2,EN18031-3三个标准对应的测试项目

EN18031-1,EN18031-2,EN18031-3三个标准有什么区别 ‌EN18031-1、EN18031-2和EN18031-3三个标准分别针对不同的安全要求和应用场景，具体区别如下‌： ‌EN18031-1‌：主要关注网络安全防护，特别是防止DDoS攻击和确保安全通信协议的…...

编程日记 2025/6/26 1:14:17

React与Docker中的MySQL进行交互

完整结构 1. 项目结构设置首先创建项目： npm create vitelatest . --template react cd . npm install2. 设置Docker中的MySQL 创建docker-compose.yml文件（与之前相同）： version: 3.8 services:mysql:image: mysql:8.0conta…...

编程日记 2025/6/25 21:39:34

量子隧穿：PROFINET到Ethernet ip的无损耗协议转换方案转

在本季度的生产工作中，我们成功实现了仓储物流自动化分拣系统中的关键技术突破。我们面临的主要挑战是将采用EtherNet/IP协议的输送带控制器与PROFINET协议的上位系统进行有效通信。通过引入ethernet IP转PROFINET网关倍讯科技BX-606-EIP，我们实现了输送…...

编程日记 2025/6/22 19:53:06

W1R3S: 1.0.1靶场

W1R3S: 1.0.1 来自 <W1R3S: 1.0.1 ~ VulnHub> 1，将两台虚拟机网络连接都改为NAT模式 2，攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182，靶场IP192.168.23.249 3，对靶机进行端口…...

编程日记 2025/6/21 18:31:25

pycharm中qthread中的run函数debug不上的问题

先说结论在风和日丽的一天，我尝试把我mac上的代码拿到windows修改。突然遇到了个bug，然后想着对几个线程内部的run函数逐一debug。结果一开线程，整个线程仍然继续报错，run函数的第一行都不停断点。甚至，我加了个pr…...

编程日记 2025/6/26 10:41:23

深度解析IP静态的工作原理，IP静态的应用场景又哪些？

一、什么是IP静态？ 当我们谈到“IP静态”时，大家可能首先想到的是与“动态IP”相对的概念。确实如此，静态IP是一种固定分配的IP地址，也就是说，在特定时间内，分配给你的IP地址不会有所更改——无论你完成多…...

编程日记 2025/6/23 6:33:22

Electron 应用的升级机制详解

在产品分发给用户之后，进入迭代周期是不可避免的过程。开发者需要为产品增加新功能、修复Bug，并推出新版本。如何将这些更新有效地分发给用户，是产品经理和开发人员共同关注的问题。本节将从开发者的角度出发，详细介绍Electron应用的两种常见升级方式：全量升级与增量升级。…...

编程日记 2025/6/24 18:21:30

Java 开源报表系统全解析：免费工具、企业案例与集成实践

在企业级数据可视化与报表开发中，选择一款功能强大且完全免费的开源报表系统至关重要。本文深度剖析 5 款经过权威验证的免费开源 Java 报表工具，涵盖图表展示、定制化及第三方集成能力，附企业级案例与技术实践，助您高效选型。一…...

编程日记 2025/6/21 15:37:59

[原创](现代Delphi 12指南):[macOS 64bit App开发]: 注意“回车换行“的跨平台使用.

[作者] 常用网名: 猪头三出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站编程生涯: 2001年~至今[共24年] 职业生涯: 22年开发语言: C/C++、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、开发工具: Visual Studio、Delphi、XCode、…...

编程日记 2025/6/25 4:00:35

准备

创建一个地图应用工程

安装leaflet

创建地图组件

使用地图组件

验证

相关文章：