小编Joe*_*oey的帖子

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

我正在尝试使用 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
        }
    }); …
Run Code Online (Sandbox Code Playgroud)

mapbox-gl-js

3
推荐指数
1
解决办法
6244
查看次数

标签 统计

mapbox-gl-js ×1