Leaflet JS中如何在标记图标边框加圆并让折线终止于此？

一、自定义带边框圆形的标记图标 #

用Leaflet的L.DivIcon可以轻松创建带边框圆形的自定义图标，通过HTML结构和CSS控制样式：

// 创建自定义图标
const customMarkerIcon = L.divIcon({
  className: 'custom-marker-container',
  html: `
    <div class="marker-main"></div>
    <div class="border-circle"></div>
  `,
  iconSize: [40, 40], // 图标整体尺寸，按需调整
  iconAnchor: [20, 20] // 图标锚点设为中心点，方便后续计算偏移
});

// 配套CSS样式（放到你的样式文件里）
.custom-marker-container {
  position: relative;
}
/* 主图标样式，方形/圆形都可以调整 */
.marker-main {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 2px solid #2c3e50;
  border-radius: 4px; /* 圆形图标改50%即可 */
  position: absolute;
  top: 4px;
  left: 4px;
}
/* 边框圆形样式，位置可灵活调整 */
.border-circle {
  width: 12px;
  height: 12px;
  background: #2c3e50;
  border-radius: 50%;
  position: absolute;
  /* 示例：把圆形放在图标右侧中心位置 */
  top: 14px;
  right: 0;
}

创建标记时直接使用这个图标：

const marker = L.marker([51.505, -0.09], { icon: customMarkerIcon }).addTo(map);

二、计算折线端点（边框圆形的地理坐标） #

折线不能直接连标记的原始点位，需要把边框圆形的像素位置转换成地理坐标，步骤如下：

1. 给标记绑定边框圆形的像素偏移量（相对于图标锚点）

// 示例中圆形在图标右侧中心，相对于锚点的像素偏移是x:+14（锚点x是20，圆形中心x是20+14=34），y:0
marker.circleOffset = L.point(14, 0);

2. 编写工具函数，根据标记和偏移量计算圆形的地理坐标

function getCircleLatLng(marker) {
  const map = marker._map;
  const markerLatLng = marker.getLatLng();
  // 把标记地理坐标转成容器像素点
  const markerPoint = map.latLngToContainerPoint(markerLatLng);
  // 加上偏移量得到圆形的容器像素点
  const circlePoint = markerPoint.add(marker.circleOffset);
  // 转成地理坐标返回
  return map.containerPointToLatLng(circlePoint);
}

3. 绘制折线时使用计算后的坐标

// 假设选中了两个标记marker1和marker2
const circle1 = getCircleLatLng(marker1);
const circle2 = getCircleLatLng(marker2);

// 创建折线，端点就是边框圆形的位置
L.polyline([circle1, circle2], { color: '#2c3e50', weight: 2 }).addTo(map);

针对圆形图标的简化方案 #

如果你的标记是纯圆形图标，不需要额外加边框圆形，只想让折线连到图标边缘，可以直接通过方向和距离计算边缘点：

function getCircleEdgeLatLng(fromMarker, toMarker, iconRadiusPx) {
  const map = fromMarker._map;
  const fromLatLng = fromMarker.getLatLng();
  const toLatLng = toMarker.getLatLng();
  
  // 把像素半径转换成实际距离（米）
  const centerPoint = map.latLngToContainerPoint(fromLatLng);
  const edgePoint = centerPoint.add(L.point(iconRadiusPx, 0));
  const radiusMeters = map.containerPointToLatLng(edgePoint).distanceTo(fromLatLng);
  
  // 计算从from到to的方向角度
  const bearing = fromLatLng.bearingTo(toLatLng);
  // 返回图标边缘的地理坐标
  return fromLatLng.destinationPoint(radiusMeters, bearing);
}

// 使用示例：图标半径20px
const edge1 = getCircleEdgeLatLng(markerA, markerB, 20);
const edge2 = getCircleEdgeLatLng(markerB, markerA, 20);
L.polyline([edge1, edge2], { color: '#2c3e50' }).addTo(map);

内容的提问来源于stack exchange，提问作者cmn