Javascript 在Mapbox Map中首次单击后仅加载一次GeoJson LineString

我试图在已经加载的点和右键单击的标记点之间添加线。我已经参考了Mapbox示例，并一直到了这个阶段。我第一次做手术时只得到一条线。我想为每一个行动线。操作顺序如下：

左键单击加载点（从geojson加载的点）

右键单击地图上的任意位置。 这应该在右击点创建一个标记，并将其与先前左击点连接

我希望能得到一些帮助。这是我在SO的第一篇帖子。请原谅我这边的任何错误。先谢谢你

mapboxgl.accessToken='pk.eyj1ijoic3viagftymfuc3bocyisimeiioijjajc4cznxazeyawe5mnfwawllnzddkin0.6AZVCVM-wggh5cykoi9ka'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v9',
中心：[-80.486052，37.830348]，//起始位置
缩放：5//开始缩放
});
map.on（'load'，（）=>{
map.addSource（“地震”{
键入：“geojson”，
数据：“https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
});
map.addLayer({
id:“标记”，
类型：“圆圈”，
资料来源：“地震”，
油漆：{
“圆形颜色”：“#11b4da”，
“圆半径”：4，
“圆笔划宽度”：1，
“圆圈笔划颜色”：“#fff”
}
});
});
map.on（'mouseenter'，'markers'，（）=>{
map.getCanvas（）.style.cursor='pointer'
});
map.on（'mouseleave'，'markers'，（）=>{
map.getCanvas（）.style.cursor='crosshair'
});
让地面
让obs
map.on（'contextmenu'，（f）=>{
地面=[f.lngLat.lng，f.lngLat.lat]
var geojson={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：f.lngLat
}
}]
};
//向地图添加标记
geojson.features.forEach（函数（标记）{
//为标记创建DOM元素
var el=document.createElement（'div'）；
el.className='marker'；
el.addEventListener（'click'，函数（）{
窗口警报（f.lngLat）；
})
新mapboxgl.标记（el）
.setLngLat（标记、几何、坐标）
.addTo（地图）；
map.addLayer({
“id”：“路线”，
“类型”：“行”，
“来源”：{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“行字符串”，
“坐标”：[
地面，obs
]
}
}, ]
}
},
“布局”：{
“线路连接”：“圆形”，
“线帽”：“圆形”
},
“油漆”：{
“线条颜色”：“#888”，
“线宽”：3，
“直线阵列”：[0.1,1.8]
}
});
});
})
地图上（'点击'，'标记'，（e）=>{
obs=[e.lngLat.lng，e.lngLat.lat]
});
正文{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
.马克{
显示：块；
边界：无；
边界半径：50%；
光标：指针；
填充：0；
背景色：rgba（5,4,244,0.82）；
高度：10px；
宽度：10px
}
与每次用户添加标记时重新创建新图层和源不同，您应该创建线图层及其源一次，然后只更新基础数据：


mapboxgl.accessToken='pk.eyj1ijoic3viagftymfuc3bocyisimeiioijjajc4cznxazeyawe5mnfwawllnzddkin0.6AZVCVM-wggh5cykoi9ka'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v9',
中心：[-80.486052，37.830348]，//起始位置
缩放：5//开始缩放
});
map.on（'load'，（）=>{
map.addSource（“地震”{
键入：“geojson”，
数据：“https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
});
map.addLayer({
id:“标记”，
类型：“圆圈”，
资料来源：“地震”，
油漆：{
“圆形颜色”：“#11b4da”，
“圆半径”：4，
“圆笔划宽度”：1，
“圆圈笔划颜色”：“#fff”
}
});
map.addSource（'line-source'{
键入：“geojson”，
数据：{
类型：“FeatureCollection”，
特色：[]
}
});
map.addLayer({
键入：“行”，
来源：“行来源”，
id:“行层”
});
});
map.on（'mouseenter'，'markers'，（）=>{
map.getCanvas（）.style.cursor='pointer'
});
map.on（'mouseleave'，'markers'，（）=>{
map.getCanvas（）.style.cursor='crosshair'
});
让地面；
让obs；
map.on（'contextmenu'，（f）=>{
地面=[f.lngLat.lng，f.lngLat.lat]；
map.getSource（'line-source'）.setData({
类型：“FeatureCollection”，
特点：[{
键入：“功能”，
几何图形：{
键入：“LineString”，
坐标：[地面，obs]
}
}]
})
});
地图上（'点击'，'标记'，（e）=>{
obs=[e.lngLat.lng，e.lngLat.lat]；
});
正文{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
.马克{
显示：块；
边界：无；
边界半径：50%；
光标：指针；
填充：0；
背景色：rgba（5,4,244,0.82）；
高度：10px；
宽度：10px
}

P.S:浏览器控制台显示以下信息：错误：已存在此ID的源代码谢谢！是的，这看起来整洁多了。我是否可以显示上次右键单击之前生成的所有行？在这里，相同ID的错误得到解决，但我可以看到连接最后一对点的线。如果可能的话，我希望看到最后一次右键单击之前生成的所有行@scarySize您可以向正在创建的线串几何图形添加其他坐标，它只需要至少有两个坐标。我向线串添加了坐标，如以下坐标：[truthArray[I]，obsrarray[I]]，其中这两个是存储左、右cl的数组