JavaScript Leaflet开发：如何用线条连接地图中的多个多边形？

核心实现逻辑：提前按顺序收集所有轨迹点的经纬度坐标，调用Leaflet原生的L.polyline方法即可生成连接所有点的路径。

现有代码优化&修改点 #

• 统一变量名：原代码中定义的数组为geodata，push数据时误用为geodaten，会导致数据读取异常，需先统一变量名
• 优化实例创建：三类图标、出发/到达点标记的创建不需要放在for循环内重复执行，放到循环外创建一次即可，减少不必要的性能消耗
• 调整视角设置：原代码在循环内反复调用map.setView，最终只会定位到最后一个点的位置，建议循环结束后根据所有点的边界自动适配地图视角，展示完整轨迹

修正后完整代码 #

<script src = "<?php echo SITE_URL?>/lib/js/base_map.js"> </script>
<script type = "text/javascript">
const map = createMap ({
  render_elem: 'routemap',
  provider: 'OpenStreetMap.MapTiler',
  fullscreenControl: true,
});

// 存储所有轨迹数据
var geodata = [];
// 存储所有轨迹点坐标，用于绘制连线
var allTrackPoints = [];

// 数据库读取数据存入geodata数组部分（原有逻辑保持不变，注意统一变量名为geodata）
<?php
// 你的while循环读取数据库逻辑，示例：
// while($row = mysqli_fetch_assoc($result)){
//   echo "geodata.push({
//     'depicao': '{$row['NUMBER']}',
//     'latitude': '{$row['NUMBER']}',
//     'longitude': '{$row['NUMBER']}',
//     'altitude': '{$row['NUMBER']}',
//     'phase': '{$row['NUMBER']}',
//     'groudspeed': '{$row['NUMBER']}',
//     'positiontime': '{$row['NUMBER']}',
//   });";
// }
?>

// 循环外统一创建图标实例，避免重复创建
var redIcon = new L.Icon ({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [15, 25],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var yellowIcon = new L.Icon ({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-yellow.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [30, 45],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var greenIcon = new L.Icon ({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [30, 45],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

// 添加出发、到达点标记
const depCoords = L.latLng (<?php echo $lat_dep;?>, <?php echo $lng_dep;?>);
L.marker (depCoords, {icon: yellowIcon}).bindPopup ("<?php echo $dep;?>").addTo(map);
const arrCoords = L.latLng (<?php echo $lat_arr;?>, <?php echo $lng_arr;?>);
L.marker (arrCoords, {icon: greenIcon}).bindPopup ("<?php echo $arr;?>").addTo(map);

// 遍历轨迹点绘制点位，同时收集坐标用于连线
for (var i = 0; i < geodata.length; i++) {
  var current = geodata[i];
  var pointCoords = [current.latitude, current.longitude];
  // 收集坐标到连线数组
  allTrackPoints.push(pointCoords);
  // 绘制单个点位
  var point = L.polygon([pointCoords], {color: 'blue', weight: 9}).addTo(map);
  point.bindPopup("Date:" + current.positiontime + "<br> Altitude:" + current.altitude + "<br> Groundspeed:" + current.groudspeed + "<br> Phase:" + current.phase + "<br><br> Lat: "+ current.latitude +"<br> Lng: "+ current.longitude);
}

// 核心：绘制连接所有点位的路径
L.polyline(allTrackPoints, {
  color: 'red',
  weight: 3,
  opacity: 0.8
}).addTo(map);

// 自动适配地图视角到所有轨迹点的范围
map.fitBounds(allTrackPoints);
</script>

补充说明 #

如果需要调整连线的样式，修改L.polyline的配置参数即可：

• color：线条颜色
• weight：线条宽度
• opacity：线条透明度
• dashArray：设置为如'5, 5'可实现虚线效果

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