使用Leaflet实现地图高亮点标记功能 渲染本地icon图片

在前端地图开发中，经常需要在地图上高亮显示某些特定点位。本文将介绍如何使用Leaflet.js库实现这一功能，矢量前端渲染本地图片。

准备好的png放到文件目录（@/assets/flight.png）：

核心代码解析

import flightIcon from '@/assets/flight.png';// 高亮点要素（如果存在）
if (points?.length > 0) {points.forEach(point => {const coords = point.geometry.coordinates;const direction = point.properties.direction || 0;const icon = L.icon({iconUrl: flightIcon,iconSize: [20, 20],iconAnchor: [10, 10],iconRotate: direction});const marker = L.marker([coords[1], coords[0]], {icon,rotationAngle: direction,zIndexOffset: 1000});highlightGroup.addLayer(marker);});highlightState.value.points = points;
}

功能实现要点

1. 图标配置：

   • 使用L.icon()创建自定义图标
   • iconUrl指定图标路径
   • iconSize设置图标尺寸
   • iconAnchor定义图标锚点位置
   • iconRotate实现图标旋转效果

2. 标记创建：

   • 使用L.marker()创建标记
   • 坐标格式为[纬度, 经度]
   • rotationAngle设置标记旋转角度
   • zIndexOffset提高标记层级确保显示在最上层

3. 分组管理：

   • 将标记添加到highlightGroup图层组
   • 便于统一管理和控制高亮点

应用场景

这种实现方式特别适用于：

• 航班追踪系统
• 实时交通监控
• 物流追踪平台
• 任何需要突出显示动态点位的场景

优化建议

1. 考虑添加动画效果增强用户体验
2. 实现点击事件处理交互
3. 根据缩放级别调整图标大小