Блог

Я работаю над проектом с Vue и листовкой, который пока просто показывает карту, и я хочу, чтобы, когда вы указываете начальные и конечные координаты, он окрашивал маршрут между этими точками (или многими точками и маршрутом, который проходит через все из них). К сожалению, я обнаружил, что плагин для листовки, который использует OSRM для автоматизации маршрутизации, «не будет работать, если вы сами не настроите серверную часть маршрутизации». Есть ли альтернатива этому? Любой другой плагин с открытым исходным кодом для Vue Leaflet (или, альтернативно, для OpenLayers (VueLayers), который может автоматически отслеживать существующие маршруты? Заранее благодарю.

Вы можете напрямую взаимодействовать с Openlayers с помощью такой службы, как OpenRouteService https://openrouteservice.org/dev/#/api-docs/v2/directions /{profile}/json/post Этот код предполагает карту routesMap с векторным слоем orsRoute и массивом routeComplete пар координат в проекции вида для начала, необязательной путевой точки и конца, а также ключ API orsKey

     var viewProj = routesMap.getView().getProjection();

    var startA = ol.proj.transform(routeComplete[0], viewProj, 'EPSG:4326');
    var viaA = routeComplete[1] ? ol.proj.transform(routeComplete[1], viewProj, 'EPSG:4326') : null;
    var endA = ol.proj.transform(routeComplete[2], viewProj, 'EPSG:4326');

    var startN = startA.toString();
    var viaN = viaA ? viaA.toString() : null;
    var endN = endA.toString();


        var url = 'https://api.openrouteservice.org/v2/directions/driving-car/json';
        var params = '{"coordinates":[['   startN   '],['   (viaN ? viaN   '],[' : '')   endN   ']]}';

        var orsXhr = new XMLHttpRequest();

        orsXhr.onreadystatechange = function() {
            if (orsXhr.readyState == 4) {
                if (orsXhr.status == 200) {
                    var route = JSON.parse(orsXhr.responseText).routes[0];
                    var linestring = route.geometry;
                    var distance = route.summary.distance;
                    var duration = route.summary.duration;
                    orsRoute.getSource().addFeature(
                        new ol.Feature({
                            geometry: new ol.format.Polyline().readGeometry(linestring).transform('EPSG:4326', viewProj),
                            name: 'Openrouteservice',
                            distance: distance,
                            duration: duration
                        })
                    );
                    orsRoute.getSource().setAttributions('amp;copy; Powered by openrouteservice');
                }
            }
        }

        orsXhr.onerror = function(e) { console.log('error'); }
        orsXhr.ontimeout = function(e) { console.log('timeout'); }

        orsXhr.open('POST', url, true);
        orsXhr.timeout = 3000;
        orsXhr.setRequestHeader('Content-type', 'application/json');
        orsXhr.setRequestHeader('Authorization', orsKey);
        orsXhr.send(params);