Mapbox - Попытка добавить маршрут между несколькими маркерами - PullRequest
Новая
       55

Mapbox - Попытка добавить маршрут между несколькими маркерами

0 голосов
/ 01 августа 2020

Я пытаюсь изучить JS и создавать карты с помощью Mapbox GL JS и Directions. Мне удалось добавить маркеры на карту, и теперь я хотел бы добавить маршрут между маркерами (1 -> 2 -> 3 -> 4).

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

Будет создано, если вы мне поможете:)

Спасибо, Бен 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      
      .marker {
          background-image: url('mapbox-icon.png');
          background-size: cover;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          cursor: pointer;
        }
    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'xxx';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-122.662323, 45.523751],
  zoom: 11
});

// code from the next step will go here!
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.662323, 45.523751]
    },
    properties: {
      title: 'Mapbox',
      description: 'Washington, D.C.'
    }
  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.692323, 45.523751]
    },
    properties: {
      title: 'Mapbox',
      description: 'San Francisco, California'
    }

  },
    {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.612323, 45.523751]
    },
    properties: {
      title: 'Mapbox',
      description: 'San Francisco, California'
    }

  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.682323, 45.523751]
    },
    properties: {
      title: 'Mapbox',
      description: 'San Francisco, California'
    }

  }]
};

// add markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);

    
});



map.on('load', () => {
for (i = 0; i < geojson.length; i++) {
  
  for(j = i+1; j < geojson.length; j++) {

    var geomFrom = geojson[i];
    var geomTo = geojson[j];

      $.get(`https://api.mapbox.com/directions/v5/mapbox/driving/` + geomFrom[0] + ',' + geoFrom[1] + ';' + geomTo[0] + ',' + geomTo[1] + `?access_token=${mapboxgl.accessToken}&geometries=geojson`, data => {
   

    map.addLayer({
      id: 'route',
      type: 'line',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: data.routes[0].geometry,
        },
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round',
      },
      paint: {
        'line-color': '#ff7e5f',
        'line-width': 8,
      },
    })
  
  })

  };

 
};


});
</script>

</body>
</html>

1 Ответ

0 голосов
/ 01 августа 2020

В коде я обнаружил много проблем, но короче говоря, источник, который вы создаете, создан неправильно. Чтобы упростить объяснение, мне пришлось удалить двойник для l oop и вызов службы, чтобы показать вам, как вы должны создать источник для пути.

Я сформировал это скрипт, создающий путь в Портленде .

введите описание изображения здесь

Вот соответствующий js код для слоя, который вы должны создать: 

      map.addLayer({
        id: 'route',
        type: 'line',
        source: {
          'type': 'geojson',
          'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
              'type': 'LineString',
              'coordinates': [
                [
                  -122.68035572839027,
                  45.52729517240144
                ],
                [
                  -122.67657260381876,
                  45.527330174436116
                ],
                [
                  -122.67657129671815,
                  45.52666556739695
                ],
                [
                  -122.67085005715236,
                  45.52677044480427
                ],
                [
                  -122.66645605237485,
                  45.52862702776275
                ],
                [
                  -122.66560830926798,
                  45.52866212597536
                ],
                [
                  -122.66532421497476,
                  45.52712020010674
                ],
                [
                  -122.6654770006126,
                  45.52158881104725
                ],
                [
                  -122.66684678096325,
                  45.51749007039993
                ]
              ],
            },
          }
        },
        layout: {
          'line-join': 'round',
          'line-cap': 'round'
        },
        paint: {
          'line-color': '#888',
          'line-width': 8
        }
      })

Теперь, зная, как этот слой должен быть создан, вы наверняка можете вернуть свой циклы и вызов службы, но пока вы выполняете двойной цикл, вы будете создавать слой на l oop, что определенно НЕ желательно и не рекомендуется.

Я также отметил координаты вашего geo json source повторяется, и координаты не соответствуют указанным местам, но я проигнорировал их для образца в скрипке.

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

...