vue.js - 使用 Vue 在地图上显示路线

Question

我正在使用 Vue 和 Leaflet 进行一个项目，该项目现在只显示一张地图，我希望当你给出开始和结束坐标时，它会为这些点之间的路线（或许多点和一条路线而不是通过所有这些点）着色）。不幸的是，我发现使用 OSRM 自动路由的 Leaflet 插件“除非您自己配置路由后端，否则将无法正常工作”。有替代方案吗？Vue Leaflet 的任何其他开源插件（或者可以自动跟踪现有路线的 OpenLayers（VueLayers）？提前谢谢你。

Answer 1

您可以将 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('© 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);