使用 Vue 在地图上显示路线答案

【问题标题】：Show a route on a map with Vue使用 Vue 在地图上显示路线
【发布时间】：2020-11-19 18:32:55
【问题描述】：

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

【问题讨论】：

标签： vue.js dictionary leaflet openlayers vuelayers

【解决方案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('&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);

【讨论】：