Блог

Главная - Вопросы по программированию - Проложить маршрут между несколькими маркерами с помощью MapBox

Проложить маршрут между несколькими маркерами с помощью MapBox

#javascript #routing #leaflet #mapbox

#javascript #маршруты #брошюра #mapbox

Вопрос:

Я использую MapBox API для создания разных карт. У меня есть около 25 маркеров с информацией о широте и долготе для каждого маркера. Я могу нанести маркеры на карту. Теперь я хочу нарисовать дорогу, соединяющую эти маркеры. Может кто-нибудь сообщить мне, как это сделать, используя MapBox API.

Ниже приведен HTML-код, который я использую для построения маркеров.

 <!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    .map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
.my-icon {
  border-radius: 100%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: white;
}

.icon-dc {
  background: #3ca0d3;
}

.icon-sf {
  background: #63b6e5;
}

</style>

<div id='map-two' class='map'> </div>
<script>
L.mapbox.accessToken = '<your access token>';
var mapTwo = L.mapbox.map('map-two', 'mapbox.light')
.setView([12.9716,77.5946], 20);

var myLayer = L.mapbox.featureLayer().addTo(mapTwo);

var geojson = [
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [77.5048747113, 13.0408676171]
    },
    properties: {
      icon: {
        className: 'my-icon icon-dc', // class name to style
        html: 'amp;#9733;', // add content inside the marker
        iconSize: null // size of icon, use null to set the size in CSS
      }
    }
  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [77.5045504332, 13.0386169339]
    },
    properties: {
      icon: {
        className: 'my-icon icon-sf', // class name to style
        html: 'amp;#9733;', // add content inside the marker
        iconSize: null // size of icon, use null to set the size in CSS
      }
    }
  }
];

myLayer.on('layeradd', function(e) {
  var marker = e.layer,
    feature = marker.feature;
  marker.setIcon(L.divIcon(feature.properties.icon));
});
myLayer.setGeoJSON(geojson);

mapTwo.scrollWheelZoom.disable();
</script>
</body>
</html>

Пожалуйста, дайте мне знать, есть ли какой-либо другой способ проложить маршрут между маркерами.

Спасибо.

Комментарии:

1. Скоро я покажу вам пример

2. Вы пробовали mapbox direction API?

3. @Manuel, было бы здорово, если бы ты мог показать пример.

4. хорошо, я сделаю! сегодня или завтра утром

5. @Manuel, спасибо за проявленный интерес. С нетерпением ждем вашего звонка.

Ответ №1:

Вы можете сделать это с помощью mapbox directions API. С помощью запроса GET вы можете рассчитать маршрут между двумя точками, например A и B. Фрагмент, выполненный с помощью jQuery, может выглядеть следующим образом:

   $.get('https://api.mapbox.com/directions/v5/mapbox/cycling/'   lngA   ','   latA   ';'   lngB   ','   latB   '?access_token=<your-access-token>', 
    function(data) {

    var coords = polyline.decode(data.routes[0].geometry); // Get the geometry of the request  and convert it from a Google string to coordinates 
    var line = L.polyline(coords).addTo(mapTwo);

  });

Что касается вашего вопроса, вы хотите соединить каждый маркер друг с другом! Итак, я создал функцию для вычисления маршрута и добавляю эту функцию в двойной цикл, чтобы прокладывать маршрут от каждого маркера к каждому маркеру:

 function calculateRoute(geomFrom, geomTo) {

  var lngFrom = geomFrom.geometry.coordinates[0]
  var latFrom = geomFrom.geometry.coordinates[1]

  var lngTo = geomTo.geometry.coordinates[0]  
  var latTo = geomTo.geometry.coordinates[1]

  $.get('https://api.mapbox.com/directions/v5/mapbox/cycling/'   lngFrom   ','   latFrom   ';'   lngTo   ','   latTo   '?access_token=pk.eyJ1IjoicHJheWVyIiwiYSI6ImI3OGRjZjcyY2JiZTUzODMwZWUxZDdiNjRiMWE4NjI5In0.zETX-x6-XPpAv3zt4MiFwg', 
    function( data ) {
    var coords = polyline.decode(data.routes[0].geometry);

    var line = L.polyline(coords).addTo(mapTwo);

  });  
};

Это вычисляет маршрут между каждым маркером в GeoJSON. Здесь вы получили небольшую << СКРИПКУ >>, основанную на коде ваших вопросов. Я надеюсь, что это было полезно, и я смог бы вам помочь!