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

【问题标题】：Drawing a line in mapbox-gl using coordinates from an array?使用数组中的坐标在 mapbox-gl 中绘制一条线？
【发布时间】：2018-11-08 06:37:31
【问题描述】：

我正在尝试使用来自 api 请求的坐标在 mapbox 上画一条线。 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 ]
]

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

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

【问题讨论】：

标签： mapbox-gl-js

【解决方案1】：

您可以使用 Turf.js 从位置数组 (http://turfjs.org/docs/#lineString) 创建 LineString 特征，并将此 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":{...},
    });

});

【讨论】：