如何在Leaflet中实现JSON生成标记点与巴格达中心标记点的点对点连线

嘿，我清楚你现在遇到的问题了——你当前的代码把所有从JSON加载的标记点连成了一条连续的折线，但你需要的是每个标记点都单独和巴格达的中心标记点建立独立连线。咱们来快速修改代码实现这个需求：

问题根源 #

你原来的代码里，points数组会不断累积所有加载到的坐标点，每次调用L.polyline(points)时，都会把之前所有的点连起来，自然就形成了连续折线，而不是你想要的“中心-单个标记点”的独立线段。

修改方案 #

我们只需要调整连线的创建逻辑：

1. 先把巴格达中心的坐标定义成一个单独变量，方便复用
2. 在遍历每个标记点时，直接用中心坐标 + 当前标记点坐标的数组来创建折线，而不是累积所有点

修改后的完整代码 #

$(document).ready(function () {
 $.ajax('./api/bgw_route.json?', {
 type: 'GET',
 dataType: 'json',
 success: function () {
 },
 error: function () {
 alert('Something wrong . Please try again later !');
 }
 }).done(function (data, textStatus, jqXHR) {
 console.log(data)
 // layers icons controls
 var IraqiAirspace = L.layerGroup();
 var in_out = L.layerGroup();
 // map initilizing
 var coords = [33, 44];
 var zoomLevel = 4
 var map = new L.Map('map').setView(coords, zoomLevel);
 L.tileLayer('mobile.2.0.2/{z}/{x}/{y}.png', {
 attribution: '',
 maxZoom: 8,
 minZoom: 4,
 zoomControl: false
 }).addTo(map);
 map.addLayer(IraqiAirspace)
 var icon = L.icon({
 iconUrl: 'airport_pin_40_blue.png',
 iconSize:[30,30]
 })

 // 定义巴格达中心坐标，方便复用
 const baghdadCenter = [33.262501, 44.234444];
 // 先添加中心标记点
 L.marker(baghdadCenter, { icon: icon }).addTo(map)

 if(data){
 data.forEach(element => {
 const currentPoint = [element.lat, element.lon];
 // 添加当前标记点
 L.marker(currentPoint, { icon: icon }).addTo(map);
 // 创建中心到当前点的独立连线
 L.polyline([baghdadCenter, currentPoint]).addTo(map);
 });
 }
 })
})

关键修改点说明 #

• 把巴格达中心坐标提取为baghdadCenter变量，避免重复写坐标，也让代码更清晰
• 移除了原来的points数组，不再累积坐标
• 遍历每个元素时，创建的折线坐标是[baghdadCenter, currentPoint]，这样每次都会生成一条从中心到当前标记点的独立线段
• 把中心标记点的创建移到了循环外面，只需要添加一次就够了

这样修改后，每个从JSON加载的标记点都会和巴格达中心单独连线，完全符合你的需求啦！

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