Географическое изображение не отображается на MapBox - PullRequest
Новая
       19

Географическое изображение не отображается на MapBox

0 голосов
/ 27 ноября 2018

Я занимаюсь разработкой веб-приложения с использованием API MapBox, где я должен построить маршрут на основе координат местоположения, которые я выбрал из файла json, и поместить их в массив.Затем массив используется для создания файла геоджона, который будет рисоваться на моей карте.Однако мой синтаксис выбрасывает необъявленную ошибку обещания, в то время как мои массивы не кажутся определенными.Мой код: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
    <div id='map' style='width: 400px; height: 300px;'></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<script type="text/javascript" src="js/getdata.js"></script>
<script>
  mapboxgl.accessToken = 'pk.eyJ1Ijoia2ltYWlnYSIsImEiOiJjam96aTFnNWQwMTI3M3FsZGs5amltYjBzIn0.X7QPz2DqWmWSLAVtQjRnWQ';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10'
  });
  map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": coords,
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#888",
            "line-width": 8
        }
    });
</script>
</body>
</html>

мой JavaScript: 

const getData = async (url) => {
  const params = {
    method: 'GET',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
    },
  };
  try {
    const data = await fetch(url, { ...params });
    const parsedData = await data.json();
    return parsedData;
  } catch (error) {
    console.log('Error occurred while fetching data');
    console.log(error);
  };
};

const filterData = (array) => {
  const data = {};
  array.forEach(obj => {
    if (obj.hasOwnProperty('data')) {
      Object.assign(data, Object.values(obj.data));
    }
  });
  return data;
}

const coordinates = (array) => {
  let coordsArr = [];
  array.forEach(obj => {
 // array is ['long', 'latitude']
    coordsArr.push(array);
  });
  return coordsArr;

  [
    ['-1.300355', '36.773850'],
    ['-1.300184', '36.776811'],
    ['-1.299840', '36.779386'],
    ['-1.298897', '36.779407'],
    ['-1.299004', '36.777841'],
    ['-1.298982', '36.776811'],
    ['-1.297459', '36.776747'],
    ['-1.296193', '36.776726'],
    ['-1.296097', '36.779236'],
    ['-1.296151', '36.777637'],
    ['-1.296215', '36.776693'],
    ['-1.294252', '36.776586'],
    ['-1.294048', '36.776790'],
    ['-1.293973', '36.779118'],
    ['-1.292622', '36.779075'],
    ['-1.291844', '36.779049'],
    ['-1.291879', '36.778389'],
  ]
}
(async function () {
  const data = await getData('./locations.json');
  const filterData = filterData(data);
  const coords = coordinates(filterData);
  return coords;
}());
...