Leaflet.Path.Transform：能否在各边框中点添加边缘标记？

如果组件库的handlerOptions没有对应配置项，你可以通过CSS伪元素+定位或者结合JS动态计算的方式手动实现，完全满足视觉需求：

纯CSS静态实现方案 #

给目标容器设置相对定位，通过伪元素和额外元素定位到四个边框中点：

/* 目标容器基础样式 */
.target-container {
  position: relative;
  border: 2px solid #333;
  width: 300px;
  height: 200px;
}

/* 上边框中点标记 */
.target-container::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  z-index: 1;
}

/* 下边框中点标记 */
.target-container::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  z-index: 1;
}

/* 左/右边框中点标记 */
.mid-mark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333;
  z-index: 1;
}
.mid-mark.left {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}
.mid-mark.right {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}

对应的HTML结构：

<div class="target-container">
  <div class="mid-mark left"></div>
  <div class="mid-mark right"></div>
</div>

JS动态适配方案（适配容器尺寸变化） #

如果容器尺寸会动态改变（比如拖拽调整大小），可以通过JS监听尺寸变化，实时更新标记位置：

const container = document.querySelector('.target-container');
const leftMark = document.querySelector('.mid-mark.left');
const rightMark = document.querySelector('.mid-mark.right');

function updateMidMarks() {
  const rect = container.getBoundingClientRect();
  // 更新左右标记的垂直位置
  leftMark.style.top = `${rect.height / 2}px`;
  rightMark.style.top = `${rect.height / 2}px`;
}

// 初始化执行一次
updateMidMarks();
// 监听窗口 resize
window.addEventListener('resize', updateMidMarks);
// 如果是组件内部的尺寸变化（比如拖拽回调），在对应事件里调用updateMidMarks即可

预期效果示意图：

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