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

推荐订阅源

Stack Overflow Blog
Stack Overflow Blog
量子位
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
美团技术团队
小众软件
小众软件
aimingoo的专栏
aimingoo的专栏
Recent Announcements
Recent Announcements
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Microsoft Security Blog
Microsoft Security Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
酷 壳 – CoolShell
酷 壳 – CoolShell
J
Java Code Geeks
V
V2EX
大猫的无限游戏
大猫的无限游戏
D
DataBreaches.Net
博客园 - Franky
爱范儿
爱范儿
T
Tailwind CSS Blog
A
About on SuperTechFans
Google DeepMind News
Google DeepMind News
博客园_首页
B
Blog RSS Feed
博客园 - 司徒正美
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

博客园 - 码农张3

Windows下安装OpenSSL SpringBoot集成BCrypt密码加密库 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});