首页 / Leaflet / 使用示例
DivIcon 图标
四种完全由 CSS 画出来的标记：编号徽章、文字标签、脉冲点、靶标。
源码与运行效果
说明
每个图标都设置 className: ''，避免 Leaflet 默认的白底方块包在外面。
徽章与靶标把 iconAnchor 设为尺寸的一半，让圆心对准坐标；
文字标签把锚点放在底部尖角，iconAnchor: [宽/2, 高 + 5]，
再加 tooltipAnchor 保证提示框不被标签挡住。
放大图标时重新计算 iconSize 与 iconAnchor，
并同步内联字号，锚点比例不变，标记不会跑位。
脉冲效果靠 @keyframes 做外层扩散圈，不占用额外的 DOM 节点。
| 图标 | iconAnchor | 用途 |
|---|---|---|
| 编号徽章 | 中心点 | 站点序号、巡检点 |
| 文字标签 | 底部尖角 | 地名、设备名 |
| 脉冲点 | 中心点 | 告警、实时位置 |
| 靶标 | 中心点 | 选中目标、重点区域 |
| 通用 | className: '' | 去掉默认白底边框 |
图标内的 DOM 会随地图平移频繁更新位置，不要在图标里放视频、输入框这类 有状态的元素，拖动时输入焦点会反复丢失。复杂交互应放在 popup 或侧栏。