如何在Leaflet中创建类似谷歌地图的多边形内蜿蜒路径？

要实现你需要的多边形内蜿蜒填充路径，核心思路是通过向内等距偏移多边形生成嵌套轮廓，再将这些轮廓的顶点按连续逻辑拼接成单条路径，具体步骤如下：

核心依赖 #

需要借助turf.js处理复杂几何计算（Leaflet本身无内置多边形偏移能力），可通过npm安装或CDN引入。

具体实现步骤 #

1. 地图与原始多边形初始化 #

先创建Leaflet地图，并定义目标多边形：

const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 示例多边形，替换成你的目标多边形
const originalPolygon = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
]).addTo(map);

2. 转换为GeoJSON格式 #

将Leaflet多边形转为turf.js支持的GeoJSON结构：

const polyGeoJSON = originalPolygon.toGeoJSON();

3. 生成嵌套偏移多边形 #

通过负缓冲（向内收缩）生成多层嵌套多边形，直到多边形无法再收缩：

const offsetDistance = -20; // 每次向内偏移20米（负数值为向内收缩）
const nestedPolygons = [];
let currentPoly = polyGeoJSON;

// 循环生成嵌套多边形
while (true) {
  try {
    // 生成向内偏移的多边形
    const buffered = turf.buffer(currentPoly, Math.abs(offsetDistance), {units: 'meters'});
    // 过滤面积过小的无效多边形
    if (turf.area(buffered) < 10) break;
    nestedPolygons.push(buffered);
    currentPoly = buffered;
  } catch (e) {
    // 偏移失败（如多边形退化为线/点）时终止循环
    break;
  }
}

4. 拼接顶点生成连续蜿蜒路径 #

交替嵌套多边形的顶点方向（顺时针/逆时针），让路径首尾相连形成连续蜿蜒效果：

const pathCoords = [];
// 先添加原始多边形的顶点（顺时针）
pathCoords.push(...polyGeoJSON.geometry.coordinates[0]);

// 遍历嵌套多边形，交替方向拼接顶点
nestedPolygons.forEach((poly, index) => {
  const coords = poly.geometry.coordinates[0];
  // 偶数索引反转坐标顺序（逆时针），确保路径连续
  pathCoords.push(...(index % 2 === 0 ? coords.reverse() : coords));
});

5. 渲染路径到地图 #

将拼接好的坐标转为Leaflet折线并添加到地图：

L.polyline(pathCoords, {color: '#ff0000', weight: 2}).addTo(map);

注意事项 #

• 偏移距离调整：根据地图缩放级别和需求的路径间距，调整offsetDistance的数值，单位支持米、千米等（通过turf.buffer的units参数设置）
• 复杂多边形处理：带洞、凹多边形偏移时可能出现异常，可提前用turf.simplify简化顶点，或turf.cleanCoords清理无效坐标
• 性能优化：若原始多边形顶点过多，建议先简化顶点，避免循环计算卡顿

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