惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 叶小钗
云风的 BLOG
云风的 BLOG
G
Google Developers Blog
S
SegmentFault 最新的问题
罗磊的独立博客
Hugging Face - Blog
Hugging Face - Blog
美团技术团队
爱范儿
爱范儿
博客园 - 三生石上(FineUI控件)
H
Hackread – Cybersecurity News, Data Breaches, AI and More
D
DataBreaches.Net
F
Fortinet All Blogs
TaoSecurity Blog
TaoSecurity Blog
D
Docker
C
Cybersecurity and Infrastructure Security Agency CISA
K
Kaspersky official blog
宝玉的分享
宝玉的分享
腾讯CDC
Google Online Security Blog
Google Online Security Blog
Recorded Future
Recorded Future
T
The Exploit Database - CXSecurity.com
T
The Blog of Author Tim Ferriss
V
V2EX
S
Securelist
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
C
CERT Recently Published Vulnerability Notes
A
Arctic Wolf
Scott Helme
Scott Helme
L
LINUX DO - 热门话题
Y
Y Combinator Blog
P
Proofpoint News Feed
T
Tor Project blog
AWS News Blog
AWS News Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
The Last Watchdog
The Last Watchdog
博客园 - 聂微东
T
Threat Research - Cisco Blogs
B
Blog
Attack and Defense Labs
Attack and Defense Labs
L
Lohrmann on Cybersecurity
C
CXSECURITY Database RSS Feed - CXSecurity.com
阮一峰的网络日志
阮一峰的网络日志
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
IT之家
IT之家
N
News and Events Feed by Topic
博客园 - 司徒正美
H
Help Net Security
C
Cisco Blogs
C
Check Point Blog
S
Secure Thoughts

博客园 - 码农张3

Vue3 父组件引用子组件并控制子组件显隐及数据传递 MySQL创建用户且只能访问指定数据库表 自定义跨字段校验必填注解 Element Plus SCSS 变量覆盖用法 SpringBoot项目控制台打印sql设置 Windows 远程桌面复制粘贴突然无效 SQLServerException: 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。 右键用vscode打开文件夹 nodemon: 无法加载文件 C:\DevSoft\nodejs\node_global\nodemon.ps1 - 码农张3 EasyUI Datagrid添加右键导出菜单并导出数据 个人所得税App住房贷款利息解读 JavaScript学习笔记—DOM:操作class JavaScript学习笔记—DOM:通过属性读取样式 SQLServer数据库导出指定表里所有数据成insert语句 解决Mybatis xml文件中执行mysql语句时,语句后携带分号实现多语句执行报异常问题 JS去除字符串前面所有0 Redis启动服务报错:服务没有及时响应启动或者控制请求 JavaScript学习笔记—DOM:元素的添加、修改、删除 JavaScript学习笔记—全选、取消、反选、提交 JavaScript学习笔记—DOM:事件 JavaScript学习笔记—DOM:属性节点
leaflet-canvasmarker添加的marker旋转问题
码农张3 · 2025-04-27 · via 博客园 - 码农张3

Leafletjs的标准图层的marker是可以通过组件 leaflet-rotatedmarker进行图标旋转的,在marker上添加两个属性:

  • rotationAngle:旋转角度,以度为单位,顺时针旋转。
  • rotationOrigin:旋转中心,默认值为 'bottom center',对应于标记图标的“尖端”。

但是leaflet-canvasmarker组件的图层使用leaflet-rotatedmarker的旋转方式失效,而在leaflet-canvasmarker官网提供了一个旋转的方法: Leaflet.Icon扩展参数  rotate

参考网址:https://zhuanlan.zhihu.com/p/593744067

  • 旋转

  • 使用 rotate(angle) 方法可以旋转画布,但默认的旋转原点是画布的左上角,也就是 (0, 0) 坐标。

    我计算旋转角度通常是用 角度 * Math.PI / 180 的方式表示。

关键代码:rotate: Math.PI / 180 * v.direction,

// 图标
const icon = L.icon({
    iconUrl,
    iconSize: [24, 24],
    iconAnchor: [12, 12],
    rotate: Math.PI / 180 * v.direction, 
});
// 加到marker上
const m = L.marker([v.lat, v.lng],{ icon, data: v});