How to find the overlap of polylines in order to draw the common segment as shaded on google maps

问题

I am working on a small project to show inefficiency of routes based on overlap of route segments.

So for example, I put together a JSFIDDLE here showing a pink and blue line overlapping between D and E. How can I determine that this stretch of road has an overlap in their routes?

Routes would be drawn by a user manually, this example just provides an example of an overlap I am trying to detect:

var map;
var directionsService;


function loadRoute1() {
var request = {
    origin: new google.maps.LatLng(30.244517, -97.892271),
    destination: new google.maps.LatLng(30.244517, -97.892271),
    waypoints: [
        { location: new google.maps.LatLng(30.241532, -97.894202) },
        { location: new google.maps.LatLng(30.239549, -97.894567) }
    ],
    travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        result.draggable = true;
        var renderer = new google.maps.DirectionsRenderer({
            draggable: true,
            polylineOptions: { strokeColor: "#DD71D8" },
            map: map
        });
        renderer.setDirections(result);

    }
});
}

function loadRoute2() {
var request = {
    origin: new google.maps.LatLng(30.244220, -97.890426),
    destination: new google.maps.LatLng(30.244220, -97.890426),
    waypoints: [
        { location: new google.maps.LatLng(30.243312, -97.890877) },
        { location: new google.maps.LatLng(30.242431, -97.891601 ) },
        { location: new google.maps.LatLng(30.243145, -97.893156) },
        { location: new google.maps.LatLng(30.242357, -97.893811) },
        { location: new google.maps.LatLng(30.241671, -97.891783) }
    ],
    travelMode: google.maps.TravelMode.DRIVING
};


directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        result.draggable = true;
        var renderer = new google.maps.DirectionsRenderer({
            draggable: true,
            polylineOptions: { strokeColor: "#0000ff" },
            map: map
        });
        renderer.setDirections(result);
    }
});
}

function initialize() {

var mapOptions = {
    zoom: 16,
    draggable: true,
    center: { lat: 30.241532, lng: -97.894202 } 
};

map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsService = new google.maps.DirectionsService();

loadRoute1();
loadRoute2();

}

initialize();

Just as a display, a separate polyline should be created with striping of the colors for the routes that overlap.

<html> 
    <body> 
        <div id="map" style="height:500px;width:500px"></div> 
    </body>
</html>

I would like to display the overlapping segments of the routes as striped similar to how this map is doing it.

回答1:

To determine the points in common:

get all the points from the directions result returned
process through both polylines looking for common points

proof of concept fiddle

updated proof of concept with multiple overlaps

code snippet:

var map;
var directionsService;
var bounds = new google.maps.LatLngBounds();

var polyline1 = new google.maps.Polyline({
  path: [],
  strokeColor: "#DD71D8",
  strokeWeight: 1
});
var polyline2 = new google.maps.Polyline({
  path: [],
  strokeColor: "#0000ff",
  strokeWeight: 1
});
var polyline3 = new google.maps.Polyline({
  path: [],
  strokeColor: "#ff0000",
  strokeWeight: 8
});


function loadRoute1() {
  var request = {
    origin: new google.maps.LatLng(30.244517, -97.892271),
    destination: new google.maps.LatLng(30.244517, -97.892271),
    waypoints: [{
      location: new google.maps.LatLng(30.241532, -97.894202)
    }, {
      location: new google.maps.LatLng(30.240374, -97.891633)
    }, {
      location: new google.maps.LatLng(30.244220, -97.890442)
    }],
    travelMode: google.maps.TravelMode.DRIVING
  };

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      result.draggable = true;
      var renderer = new google.maps.DirectionsRenderer({
        draggable: false, // true,
        polylineOptions: {
          strokeColor: "#DD71D8",
          strokeWeight: 1
        },
        map: map
      });
      var path = result.routes[0].overview_path;
      var legs = result.routes[0].legs;
      for (i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            polyline1.getPath().push(nextSegment[k]);
            bounds.extend(nextSegment[k]);
          }
        }
      }
      // polyline1.setMap(map);
      if (polyline2.getPath().getLength() > 1) {
        getPolylineIntersection();
      }
      renderer.setDirections(result);
    }
  });
}

function loadRoute2() {
  var request = {
    origin: new google.maps.LatLng(30.244220, -97.890426),
    destination: new google.maps.LatLng(30.244220, -97.890426),
    waypoints: [{
      location: new google.maps.LatLng(30.243312, -97.890877)
    }, {
      location: new google.maps.LatLng(30.242431, -97.891601)
    }, {
      location: new google.maps.LatLng(30.243145, -97.893156)
    }, {
      location: new google.maps.LatLng(30.242357, -97.893811)
    }, {
      location: new google.maps.LatLng(30.241671, -97.891783)
    }],
    travelMode: google.maps.TravelMode.DRIVING
  };


  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      result.draggable = true;
      var renderer = new google.maps.DirectionsRenderer({
        draggable: false, // true,
        polylineOptions: {
          strokeColor: "#0000ff",
          strokeWeight: 1
        },
        map: map
      });
      var path = result.routes[0].overview_path;
      var legs = result.routes[0].legs;
      for (i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            polyline2.getPath().push(nextSegment[k]);
            bounds.extend(nextSegment[k]);
          }
        }
      }
      // polyline2.setMap(map);
      if (polyline1.getPath().getLength() > 1) {
        getPolylineIntersection();
      }
      renderer.setDirections(result);
    }
  });
}

function getPolylineIntersection() {
  var commonPts = [];
  for (var i = 0; i < polyline1.getPath().getLength(); i++) {
    for (var j = 0; j < polyline2.getPath().getLength(); j++) {
      if (polyline1.getPath().getAt(i).equals(polyline2.getPath().getAt(j))) {
        commonPts.push({
          lat: polyline1.getPath().getAt(i).lat(),
          lng: polyline1.getPath().getAt(i).lng(),
          route1idx: i
        });
      }
    }
  }
  var path = [];
  var prevIdx = commonPts[0].route1idx;
  for (var i = 0; i < commonPts.length; i++) {
    if (commonPts[i].route1idx <= prevIdx + 1) {
      path.push(commonPts[i]);
      prevIdx = commonPts[i].route1idx;
    } else {
      var polyline = new google.maps.Polyline({
        map: map,
        path: path,
        strokeWeight: 8,
        strokeColor: "#ff0000"
      });
      path = [];
      prevIdx = commonPts[i].route1idx;
    }
  }
  var polyline = new google.maps.Polyline({
    map: map,
    path: path,
    strokeWeight: 8,
    strokeColor: "#ff0000"
  });

}

function initialize() {

  var mapOptions = {
    zoom: 16,
    draggable: true,
    center: {
      lat: 30.241532,
      lng: -97.894202
    }
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsService = new google.maps.DirectionsService();

  loadRoute1();
  loadRoute2();

}

initialize();

#map {
  width: 500px;
  height: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>

来源：https://stackoverflow.com/questions/32230611/how-to-find-the-overlap-of-polylines-in-order-to-draw-the-common-segment-as-shad

标签

google-maps

geometry

geospatial