使用数组中的坐标在 mapbox-gl 中绘制一条线?

Question

我正在尝试使用 api 请求中的坐标在地图框上画一条线。 api 调用检索地图点纬度和经度值的数组。 我曾尝试使用示例在此网站上创建 geojson 线： https://www.mapbox.com/mapbox-gl-js/example/geojson-line/但是，此示例和我找到的所有其他示例仅显示向地图添加包含硬编码坐标的图层，而不是稍后将从其他源检索的坐标。

我最初认为可行的是简单地创建一个适当格式的经度/经度数组，然后在添加图层时将该数组等于坐标，如下所示：

var lineArray = [];
for(var i = 0; i < response.mapPoints.length; i++)
{
lineArray[i] = " [" + response.mapPoints[i].lng + ", " + response.mapPoints[i].lat + "]";
}
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
lineArray
]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8
}
}); 

打印出来后，lineArray 看起来是正确的。 我能够使用 for 循环创建一小行，并将添加层代码更改为如下所示：

"coordinates": [
[ response.mapPoints[i].lng, response.mapPoints[i].lat ],
[ response.mapPoints[i+1].lng, response.mapPoints[i+1].lat ]
]

然而，这花了太长时间，因为我一次使用数千个坐标，并且必须遍历每一个坐标才能画线。

我走在正确的轨道上吗？ 对类似示例的任何帮助或指导将不胜感激！

Answer 1

您可以使用 Turf.js 从位置数组 (http://turfjs.org/docs/#lineString( 创建线字符串要素，并将此线字符串用作线图层的源：

示例(基于 https://www.mapbox.com/mapbox-gl-js/example/geojson-line/(：

http://jsbin.com/beziyolisu/1/edit?html,output

var positions =[
[lon_1, lat_1],
...
[lon_n, lat_n]
]; 
var linestring = turf.lineString(positions);
map.on('load', function () {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": linestring
},
"layout": {...},
"paint":{...},
});
});