Рисование линии в mapbox-gl с использованием координат из массива? - PullRequest
Новая
       8

Рисование линии в mapbox-gl с использованием координат из массива?

0 голосов
/ 29 мая 2018

Я пытаюсь нарисовать линию на карте, используя координаты из запроса API.Вызов API вызывает массив значений точек широты и долготы карты.Я попытался использовать пример для создания линии геоджона на этом веб-сайте: https://www.mapbox.com/mapbox-gl-js/example/geojson-line/, однако этот пример и каждый другой найденный мной пример показывал только добавление слоев на карту, содержащих жестко закодированные координаты, а не координаты, которые будут получены из другого источника.позже.

То, что я первоначально думал, сработает, это просто создайте массив значений lat / long в соответствующем формате, а затем добавьте этот массив равным координатам при добавлении слоя, например: 

    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 ]
]

, однако это заняло слишком много времени, так как я использую тысячи координат одновременно имне приходится перебирать каждую из них, чтобы нарисовать линию.

Я на правильном пути вообще?Любая помощь или направление к подобному примеру будет принята с благодарностью!

1 Ответ

0 голосов
/ 30 мая 2018

Вы можете использовать Turf.js для создания объекта LineString из массива позиций (http://turfjs.org/docs/#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":{...},
    });

});
...